Our JS/TS style guide is based on Prettier and ESLint. We use the style from CRA's default eslint-config and default prettier rules with minor modifications.
You will find the prettier config in packages/prettier-config and the ESLint rules in packages/eslint-config.
The following assumes you are working on a project with TypeScript and React.
npm install -D prettier @codefreak/prettier-config
Add the following to your package.json (more information):
"prettier": "@codefreak/prettier-config"You will need ESLint + all peer dependencies of eslint-config-react-app.
npm install -D eslint @codefreak/eslint-config babel-eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-react-app eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooksCreate the file .eslintrc with the following content (more information):
{
"extends": "@codefreak"
}After installing prettier and eslint you can place the following npm scripts inside your package.json to run checks/fixes against ESLint and Prettier.
{
"scripts": {
"lint:eslint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
"fix:eslint": "eslint --fix \"src/**/*.{ts,tsx,js,jsx}\"",
"lint:prettier": "prettier --check \"src/**/*.{ts,tsx,js,jsx}\"",
"fix:prettier": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\""
}
}To test out local changes you can use npm link inside packages/eslint-config or packages/prettier-config.
Afterwards you have to use npm link @codefreak/eslint-config or npm link @codefreak/prettier-config in a local (test-)project.
This will create a symbolic link in node_modules/@codefreak/* so any changes you make to one of the packages will be available right inside your testing environment.
Make sure you have access rights to our npm organisation and are logged in with npm login.
Then you can publish a new version using lerna by typing npm run publish.