Several days ago, I started to look into linters and specifically ESlint (while there are other options on the market, but ESlint is notably the most popular one available). So this guide is a complete set-up guide for anyone wants to add ESlint to their project.
What is a linter?
Instead of looking at ESlint specifically, let’s look at what a linter is. And remember ESlint is just one of the kind.
A linter is a tool that analyses source code to flag bugs from syntax errors, give stylistic error warnings and best practice recommendation.
This is especially helpful in JavaScript due to its nature as an interpreted language, since we won’t get the compiled code until at runtime.
Apart from the above benefits, linters also help you to
- have a consistent code style
- reduce runtime errors
- provide smooth collaboration with your team
Installation
npm install -g eslint
npm install eslint --save-devThere are two ways to install ESlint, globally or locally.
Next in your root directly init the eslint. If you don’t have ESLint installed globally, go to node_modules to init, or simply create a .eslintrc file by yourself.
eslint --init //global install
./node_modules/.bin/eslint --init //local installYou will come up with a list of questions.
$ eslint — init✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you’ve selected requires the following dependencies:eslint-plugin-react@latest eslint-config-standard@latest eslint@>=6.2.2 eslint-plugin-import@>=2.18.0 eslint-plugin-node@>=9.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.0
✔ Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-react@latest, eslint-config-standard@latest, eslint@>=6.2.2, eslint-plugin-import@>=2.18.0, eslint-plugin-node@>=9.1.0, eslint-plugin-promise@>=4.2.1, eslint-plugin-standard@>=4.0.0
⸨░░░░░░░░░░░░░░░░░░⸩ ⠦ fetchMetadata: sill resolveWithNewModule globals@12.4.0 checking installable status
After this it will create an .eslintrc file for you:
module.exports = {
env: {
browser: true,
es2020: true,
commonjs: true,
es6: true,
},
extends: [‘plugin:react/recommended’, ‘standard’],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 11,
sourceType: ‘module’,
},
plugins: [‘react’],
rules: { ‘no-console’: ‘error’},
};Configure rules
You will see there are list of properties configurable in the file (not surprising!). We are going to look through it one by one and explain what each is doing.
environment
Environment defines predefined global variables you’re using. For example, mocha: true is to help ESlint understand the variables specific to mocha will be understood by ESlint. The popular env variables include: “browser”: true, “node”: true .
extends
This is to include eslint configuration others configurations. The popular configs are from Create React App, Airbnb, or Standard.
"extends": [
"airbnb",
],parserOptions
ESLint allows you to specify the JavaScript language options you want to support. By default, ESLint expects ECMAScript 5 syntax. You can override that setting to enable support for other ECMAScript versions as well as JSX by using parser options.
plugins
Basically, plugins are a set of ESLint rules related to a same subject.What’s the difference with extends? Extends uses a config file which applies set of rules when you add that to the extends options. A plugin on the other hand provides you with a set of rules that you can individually apply depending on your need. A plugin may provide you with configuration files as well. If the plugin provides configuration file, then you can load that in your extends section after adding the plugin in the plugins property field, like with prettier:
{
"extends": ["prettier"],
"plugins": ["prettier"],
}Note that for both plugin and extends you need to install the specific package in order to use it.
rules
These are really the customised rules for you to play around. Noted that there are 3 levels of values you can set for each rule.
- 0 (or
off) to disable a rule - 1 or (
warn) to emit a warning - 2 (or
error) to trigger an error
"no-console": "2"
"jsx-a11y/label-has-for": [ //some can have array get passed in
2,
{
"components": [
"label"
],
"required": {
"every": [
"nesting",
"id"
]
},
"allowChildren": true
}
],Run & Fix
Run eslint . from the root directory. It will print errors like：
1:19 error Strings must use singlequote quotes
1:26 error Extra semicolon semi
2:25 error Strings must use singlequote quotes
2:38 error Extra semicolon semi
3:29 error Strings must use singlequote quotes
3:39 error Extra semicolon semi
5:27 error Missing space before function parentheses space-before-function-paren
8:8 error Unexpected console statement no-console
8:26 error ‘numberOfIceCreams’ is missing in props validation...
✖ 300 problems (300 errors, 0 warnings)
275 errors and 0 warnings potentially fixable with the `--fix` option.
To run eslint as npm script, add it to package.json file: npm run lint .
script:{
"lint":"eslint"
}To run it ignoring some files, add a .eslintignore:
node_modulesYou may get annoyed by the errors and don’t want to go through them one by one. ESlint has you a helper for that: --fix flag.
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint --fix .&& echo 'Complete ESlint fix'"
}
}Disable rules
Sometimes you have some certain lines, blocks of code or a whole file where you need TSlint not to check on. You can do this by comments:
On a single line:
console.log("hello")// eslint-disable-lineOn multiple lines:
/* eslint-disable */
console.log("hello")
/* eslint-enable */You can do rule specific disable:
/* eslint-disable no-console */
console.log('test');
/* eslint-enable no-console */So that’s all for setting up ESlint in your project!
Happy Reading!
🥑 🦊 🥃🥑 🦊 🥃🥑 🦊 🥃🥑 🦊 🥃🥑 🦊 🥃🥑 🦊 🥃🥑 🦊 🥃🥑 🦊 🥃🥑 🦊
