Either use install-peerdeps via npx to install this shareable config and its peer dependencies automatically.
npx install-peerdeps --dev @39digits/eslint-config-react
Or explicitly install everything in one line using npm.
npm install --save-dev eslint babel-eslint @39digits/eslint-config-react eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks prettier
Now create a .eslintrc.js
configuration file in your project root and add @39digits/eslint-config-react
to the extends
field. Add any extra rules you want to use under the rules
section.
{
"extends": ["@39digits/eslint-config-react"],
"rules": {
// ...
}
}
Create a .prettierrc
configuration file in your project root and populate with your preferred formatting preferences.
My personal preferences are as follows.
{
"singleQuote": true,
"semi": true,
"useTabs": false
}
If you like the Prettier defaults, simply leave the config object empty.
My shareable config only uses the ESLint Prettier Config and does not make use of the ESLint Prettier Plugin. This is the recommended method of integrating Prettier with your linter.
The Prettier Config will turn off any ESLint rules that should only be handled by Prettier itself. This ensures ESlint focuses on checking code quality; Prettier to format it.
Many shareable configs that use the Prettier Plugin will set Prettier preferences as actual linting rules. I don't feel comfortable hiding these settings from the project view and instead rely on an easily discoverable .prettierrc
configuration file with explicit rules in the project root.
I did not include the TypeScript modules in the peerDependencies of package.json
to avoid npm complaining on projects that won't use TypeScript at all. You will need to install the dependencies manually.
npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
Note: Install these packages in addition to the main shareable config packages.
You may also wish to install some types while you're at it - these will change depending on your project's requirements.
npm install --save-dev @types/react @types/node
I prefer using the TypeScript parser and TypeScript linting rules on *.ts
or *.tsx
files only. I then leave the JavaScript linting to babel-eslint
.
To achieve this we can use ESLint's overrides
feature. This ensures the TypeScript linting rules do not, for example, complain about no return type on a function inside of a *.js
file.
There is one caveat in that any project specific rules
do not cascade. Any rules defined in our local .eslintrc.js
file needs to be replicated within the overrides
section. I recommend setting any local rules within a variable and then applying that to each section to avoid unnecessary duplication and bugs.
// .eslintrc.js
const commonRules = {
// Example rule...
'prefer-const': 'error',
};
module.exports = {
extends: ['@39digits/eslint-config-react'],
rules: commonRules,
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
extends: ['@39digits/eslint-config-react/typescript'],
rules: commonRules,
},
],
};
Other times you may want to run everything through @typescript-eslint/parser
and the TypeScript linting rules.
// .eslintrc.js
module.exports = {
extends: ['@39digits/eslint-config-react/typescript'],
rules: {
// ...
},
};
Install the ESLint and Prettier Visual Studio Code extensions.
Add the following to your Visual Studio Code settings.json
preferences file.
{
// When you save a file it will run any formatters (i.e. Prettier)
"editor.formatOnSave": true,
// Ensure the Prettier extension is used as the default formatter
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// This requires a .prettierrc file in the project root.
// If there is no config file then Prettier will not run.
// This is useful if you work on projects not (yet) using Prettier
// to avoid huge commits existing of largely formatting changes
// Reference: https://github.com/prettier/prettier-vscode#prettierrequireconfig-default-false
"prettier.requireConfig": true
}
Now Prettier will automatically format your code when you save any supported file. ESLint will also now show visual indicators for any code not adhering to your rules.
Happy coding!
MIT.