Setting ESLint on a React Typescript project (2021)

Introduction

Prerequisites

Step 1: Create a React Project with Typescript

npx create-react-app my-app --template typescript

Step 2: Removing the pre-set ESLint configuration from React project

"eslintConfig": {
"extends":[
"react-app",
"react-app/jest"
]
}

Step 3: Install ESLint package

npm install eslint --save-dev
"devDependencies": {
"eslint":"^7.20.0"
}

Step 4: Setup ESLint

npx eslint --init
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"eslint": "^7.20.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0"
}

Step 5: Running ESLint

npx eslint <targetFile>
npx eslint <targetFile> --fix
npx eslint <targetFile> --quiet

Step 5.1: Let’s Run!

npx eslint src/* 
✖ 35 problems (35 errors, 0 warnings)
13 errors and 0 warnings potentially fixable with the ` — fix` option.
npx eslint src/* --fix
✖ 22 problems (22 errors, 0 warnings)

Solving remaining problems

Problem: “‘no-use-before-define”

Solution

"rules": {
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"]
}

Problem: “‘react/jsx-filename-extension”

Solution

"rules":{

"react/jsx-filename-extension": [ "warn", {"extensions": [".tsx"]} ]
}

Problem: “import/no-unresolved”

Solution

npm install eslint-import-resolver-typescript --save-dev
"settings": {
"import/resolver": {
"typescript": {}
}
}

Problem: “import/extensions”

Solution

"rules":{

"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never"
}
]
}

Problem: “no-undef”

Solution

"extends": [

"plugin:@typescript-eslint/recommended"
],

Problem: “no-shadow”

Solution

"rules":{

"no-shadow": "off",
"@typescript-eslint/no-shadow": ["error"]
}

Problem: Any error over files that are not ‘js’,’jsx’, ‘ts’, or ‘tsx’ extension files

Solution:

*.css
*.svg

Extra:

Some nice rules to apply

Force all functions have explicit return type

"rules":{
...
"@typescript-eslint/explicit-function-return-type": [
"error",
{
"allowExpressions": true
}
]
}

Max length of line code

"rules":{

"max-len": ["warn", { "code": 80 }]
}

React Hooks rules

"plugins": [

"react-hooks"
],
"rules":{

"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}

Some rules to ignore:

Prefer use of default export

"rules":{

"import/prefer-default-export": "off"
}

Prop Types rules

"rules":{

"react/prop-types": "off"
}

Conclusion

VS Code: execute ESLint with auto fix in a file when save

.vscode/settings.json
{
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
ESLint Extension for VSCode
ext install dbaeumer.vscode-eslint
ESLint status bar icon on VSCode
ESLint extension popup content on first use.

References

Just a hardworking developer | https://github.com/andrebnassis