How to integrate ESLint with your React Typescript project (2021)
When we are working on a project of the most common problem is the code quality, for that reason, there are several tools that can be integrated into our project to make sure of that.
Importance of Code Quality?
- Making software robust: The ability to cope up with the errors during the program execution in spite of the unusual conditions.
- Increasing readability and ease of editing: Good quality of code makes sure that codes are written in such a way that makes them highly readable. The use of comments, proper indentation, clear notations, and simplicity in the flow are some factors.
- Making program sustainable: Software is said to be sustainable when it can survive over time with minimal changes.
- Promotes easy transferability: Code quality practices make the translation of software across platforms straightforward with minimal changes.
- Decreasing technical debt: One of the biggest problems in software projects is technical debt, a software with poor quality is set to fail early unless a significant number of changes are brought into the program repeatedly and hence increasing the technical debt. The extra development work is time and capital-consuming, which a high-quality code avoids.
In this post, we will see how to integrate ESLint in your React project and some common stuff related to configuration. ESLint is an npm package that helps to find and fix problems in projects. Provide some feature as find problems, fix automatically and also customization based in our project and team rules.
Install ESLint package dependency
First of all, we need to install ESLint
npm install eslint --save-dev
After running that you will see that eslint was added as a development dependency in the package.json file.
{
...
"devDependencies": {
"eslint": "^7.26.0"
},
...
}
Note: The Eslint version could be different there isn't a problem with that.
Setup ESLint in our project
Run the next command in the terminal inside the project folder
npx eslint --init
After running this command, you will need to answer some questions related to your project and the configuration you want.
How would you like to use ESLint?
Answer: to check syntax, find problems, and enforce code style
What type of modules does your project use?
Answer: JavaScript modules (import/export)
Which framework does your project use?
Answer: React
Does your project use TypeScript?
Answer: Yes
Where does your code run?
Answer: Browser
How would you like to define a style for your project?
Answer: Use a popular style guide
Which style guide do you want to follow?
Answer: Airbnb: https://github.com/airbnb/javascript
What format do you want your config file to be in?
Answer: JSON
Would you like to install them now with npm?
Answer: Yes
Then, it will install all the packages needed. After the installation, the development dependencies in the package.json file could something similar to
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.24.0",
"@typescript-eslint/parser": "^4.24.0",
"eslint": "^7.26.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
},
After that you will that was created a new file called .eslintrc.json at the root of the project with the rules and configuration related to ESLint. The file content should looks something similar to
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {}
}
Running ESLint
Install ESLint extension for VSCode, After that need to reload the VSCode window once to get proper linting.*
ESLint will automatically start detecting errors/warnings in the files. If that's not the case then either your project has no linting errors or ESLint is not properly set up.
To test if the linting works, we should run the ESLint command in the terminal with folder path and notice output.
npx eslint .
Finally, you can also add linting to scripts in package.json as a part of your pipeline process in the project
{
"scripts": {
"lint": "eslint src/*",
"lint:fix": "eslint src/* --fix",
"lint:quiet": "eslint src/* --quiet"
}
}
Notes:
- To automatically fix some errors, you can use ‘--fix’ in the command
- If you want to ignore warnings, you can use ‘ --quiet’ in the command
- To specify some type of files to check you can use '--ext' and pass the extensions that want to be checked
.eslintignore
To disable the linting of some files/folders you could create a .eslintignore at the root of the project.
node_modules
dist
coverage
How to solve common ESLint rules problems
Problem: import/extensions
How to fix it?
In eslintrc.json, over rules, add the following
{
"rules": {
"import/extensions": ["error", "ignorePackages", { "ts": "never", "tsx": "never" } ]
}
}
Problem: react/jsx-filename-extension
How to fix it?
In eslintrc.json, over rules, add the following
{
"rules": {
"react/jsx-filename-extension": ["warn", { "extensions": [".tsx",] }],
}
}
Problem: import/no-extraneous-dependencies
How to fix it?
This is common when we are working in the devDependencies. To fix just add the following in eslintrc.json over rules.
{
"rules": {
"import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
}
}
Problem: import/no-unresolved
How to fix it?
Install eslint-import-resolver-typescript package
npm install eslint-import-resolver-typescript --save-dev
After that on eslintrc.json add a new property called settings
{
"settings": {
"import/resolver": {
"typescript": {}
}
}
}
Problem: no-use-before-define
How to fix it?
This is common when there is a mismatched version with @typescript-eslint. To fix just add the following in eslintrc.json over rules.
{
"rules": {
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"]
}
}
Conclusion
Eslint is an awesome tool that we need to integrate into every project due that improve the code quality in our React projects. Need to consider every specific case of use, just to make sure the best performance and render time speed in our React projects.
I will be updating this post based on your comments and recommendations so let me know in any case that you have a common rule problem with Eslint and React that can be added or something like that. Thanks for all! 👍
