- Install eslint and plugins
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
- Create a
eslintrc
file
yarn eslint --init
- Configure
eslintrc
module.exports = {
...
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
};
- Add
lint
script inpackage.json
{
...
"scripts": {
...
"lint": "eslint '**/*.{js,ts,tsx}' --fix --cache",
}
}
- with React
yarn add -D eslint-plugin-react
module.exports = {
...
plugins: [
...
'react',
],
extends: [
...
'plugin:react/recommended',
],
};
- with React Native
yarn add -D eslint-plugin-react @react-native-community/eslint-config
module.exports = {
...
plugins: [
...
'react',
],
extends: [
...
'plugin:react/recommended',
'@react-native-community',
],
};
- with NextJs (already done if you used
create-next-app
)
yarn add -D eslint-config-next
module.exports = {
...
extends: [
...
'next/core-web-vitals',
],
};
- Install dependencies
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
- Create the Prettier file
touch .prettierrc
- Some basic configuration
{
"useTabs": false,
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"printWidth": 120,
"quoteProps": "consistent",
"arrowParens": "avoid",
"endOfLine": "auto"
}
- Add plugin inside
eslintrc
module.exports = {
plugins: [
...
'prettier',
],
extends: [
...
'plugin:prettier/recommended',
]
};
- Install dependencies
yarn add -D husky
- Inside package.json add
postinstall
script
{
...
"scripts": {
...
"postinstall": "rm -f .husky/pre-commit && husky install && husky add .husky/pre-commit 'yarn lint'",
}
}
This will run after the project install all the dependencies. (Or you can run yarn postinstall
)
- For additional configurations edit
./husky/pre-commit
. - In order to make this work the flag
-a
is needed. (eg: git commit -am '...)
Additionally I like to add some rules for eslint
module.exports = {
...
rules: {
...
'no-console': 'warn',
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/no-explicit-any': 'warn',
'prettier/prettier': 'error', // this will change the behavior of prettier (default is error)
},
};
For React and React Native
module.exports = {
...
rules: {
...
'react/react-in-jsx-scope': 'off', // is not required to be in scope anymore
},
};