What is linting? What are linting tools? How do you set up ESLint in a ReactJS Project?
Fixing bugs is something software developers do almost every single day. It would be so much easier if we could identify them before execution. This is where linting comes into play.
What is Linting? and What are Linting Tools?
Linting is the process of identifying programming errors, performance, stylistic errors, and suspicious constructs without executing the source code.
Programming errors:
In programming languages like Java, you can identify and fix programming errors at the compile time. Is there a way to fix it before execution??? And how to fix them in interpreted programming language like JavaScript that doesn’t have a compile-time???
Performance:
When programming a software developer should follow the best practices that would increase the performance of the source code. But beginners don’t have much knowledge about best practices and even skilled programmers could miss a better approach to increasing performance. How to make sure the code is optimized???
Stylistic Errors:
Multiple people make commits to the same GitHub repository. Now imagine one person having a CRLF line break and another having an LF line break. After each pull request, each person has to spend time fixing the stylistic errors. Is there a way to have standardization throughout the code base???
Suspicious Constructs:
Securing the code is a primary duty of a software developer but since they are humans they could miss a potential security issue or two. How to make sure all the potential security issues are dealt with??
Linting tools
are the solution for all the above-mentioned problems. Linting tools are Static Analysis Tools. Static Analysis Tools scrutinize the code before running it and flag potential errors and bugs.
There are multiple linting tools out there that can be used with a JS project. In my opinion, the best one is ESlint.
ESLint is completely plug-able, every single rule is a plugin and we can add more rules at run-time. It is the most recent out of the three libraries. It is designed to be easily extensible, comes with a large number of custom rules, and it’s easy to install more rules in the form of plugins. It gives concise output, and also includes the rule name by default so you always know which rules are causing the error messages.
Pros
Completely configurable — we can configure/enable/disable any rule
Extensible — We can create our own rules
Has a rich set of existing rules as per best practices
Completely supports ES6 and React
Easy to understand output with rule names
Rules are very well documented with examples
Configured through a configuration file (json/yaml/js) — Easy to share configuration across team members
Easy integration with IDE
Cons
Needs initial configuration to get started
A bit slow
How do you set up ESLint in a ReactJS Project?
First, let’s create a react app called eslint-tester
npx create-react-app eslint-tester
cd eslint-tester
Now let’s install and configure ESLint
npm init @eslint/config
After running this command it would ask you a series of questions. Please note that I am selecting the options that suit my needs.
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
Since I want to check syntax, find problems, and enforce code style, I am going to pick the last option.
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? …
❯ React
Vue.js
None of these
? Does your project use TypeScript? › No / Yes
Since I prefer JavaScript modules and this is a ReactJS project without TypeScript these are the options I picked.
? Where does your code run?
✔ Browser
✔ Node
My project is a web app hence I picked Browser here.
? How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
? Which style guide do you want to follow? …
❯ Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo
There are four popular style guides available for eslint. They are Airbnb, Google, Standard, and XO. Since we are picking the Airbnb style guide. To get a better understanding please look into the below links.
? What format do you want your config file to be in? …
JavaScript
YAML
❯ JSON
Now you have to pick the format you want your config file to be in.
ESLint supports configuration files in several formats:
JavaScript — use
.eslintrc.js
and export an object containing your configuration.JavaScript (ESM) — use
.eslintrc.cjs
when running ESLint in JavaScript packages that specify"type":"module"
in theirpackage.json
. Note that ESLint does not support ESM configuration at this time.YAML — use
.eslintrc.yaml
or.eslintrc.yml
to define the configuration structure.JSON — use
.eslintrc.json
to define the configuration structure. ESLint’s JSON files also allow JavaScript-style comments.package.json — create an
eslintConfig
property in yourpackage.json
file and define your configuration there.If there are multiple configuration files in the same directory, ESLint only uses one. The priority order is as follows:
.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
package.json
Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest eslint-config-google@latest eslint@>=5.16.0
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Once they check for peer dependencies of eslint-config-google@latest they will ask the above questions. For the package manager, you can select npm, yarn, or pnpm.
Now it will install and create the config file in your chosen format.
{
"env": {
"browser": true,
"es2021": true,
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {}
}
If you go into your App.test.js file you will see eslint errors.
This lint error occurs when undeclared variables are used.
Please note that Jest is a JavaScript testing framework that comes built-in with ReactJS. For further reading on Jest please click on the below link.
https://jestjs.io/
To fix the issue we are going to add the jest: true inside env in .eslintrc.js
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {}
}
And this is how I added ESLint to my project.
You can configure your .eslintrc.js to meet your needs. Please refer to the official documentation when configuring ESLint.
Hope you learned something new.
Happy Coding :)