Use ESLint to keep your code clean

Understand the basics of the most popular JavaScript linter, which can help make your code follow a specific set of grammatical conventions, check whether the code contains the possible source of the problem, and whether the code conforms to a set of standards defined by you or your team Match

ESLint is aJavaScriptShort plush.

What is short-staple cotton?

good question! Short fleece is a tool for identifying problems in the code.

Running lint on the code can tell you many things:

  • If the code follows a specific set of grammatical conventions
  • If the code contains a possible source of the problem
  • If the code meets a set of standards defined by you or your team

It will issue a warning that you or your tool can analyze and provide you with actionable data to improve your code.

ESLint

ESLint is the lint of the JavaScript programming language, withNode.js.

It is very useful because JavaScript is an interpreted language, there are no compilation steps, and many errors can only be found at runtime.

ESLint will help you catch those errors. Which mistakes do you specifically ask?

  • Avoid infinitecycleinsideforCycle condition
  • Make sure all getter methods return something
  • Disallow console.log (and similar) statements
  • Check if there are duplicate cases in the switch
  • Check for unreachable codes
  • Check the validity of JSDoc

And more! The full list is available at:https://eslint.org/docs/rules/

getting more popularmore beautifulAs a code formatter, the style part of ESLint is outdated, but ESLint is still very useful in catching errors and code smells in the code.

ESLint is very flexible and configurable, you can choose the rules you want to check or the style you want to enforce. Many available rules have been disabled, you can turn them on on your computer.eslintrcConfiguration file, it can be global or specific to your project.

Install ESLint globally

usenpm.

npm install -g eslint

# create a .eslintrc configuration file eslint --init

# run ESLint against any file with eslint yourfile.js

Install ESLint locally

npm install eslint --save-dev

# create a .eslintrc configuration file ./node_modules/.bin/eslint --init

# run ESLint against any file with ./node_modules/.bin/eslint yourfile.js

Use ESLint in your favorite editor

Of course, the most common use of ESLint is in your editor.

Common ESLint configuration

ESLint can be configured in many different ways.

Airbnb style guide

The common setting is to useAirbnb JavaScript coding styleOrganize your code.

run

yarn add --dev eslint-config-airbnb

or

npm install --save-dev eslint-config-airbnb

Install the Airbnb configuration package and add your.eslintrcThe files are placed in the root directory of your project:

{
  "extends": "airbnb",
}

reaction

React code can be easily implemented using React plugins:

yarn add --dev eslint-plugin-react

or

npm install --save-dev eslint-plugin-react

At your.eslintrcFile addition

{
  "extends": "airbnb",
  "plugins": [
      "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Use a specific version of ECMAScript

ECMAScriptThe version is now changed every year.

The current default setting is 5, which means before 2015.

Open ES6 (or higher) by setting this property in the following location.eslintrc:

{
  "parserOptions": {
    "ecmaVersion": 6,
  }
}

Enforce strict mode

{
  "parserOptions": {
    "ecmaFeatures": {
      "impliedStrict": true
    }
  }
}

More advanced rules

A detailed guide to the rules can be found on the following official website:https://eslint.org/docs/user-guide/configuring

Disable rules on specific lines

Sometimes rules may cause false positives, or you may be explicitly willing to use ESLint marked routes.

In this case, you can completely disable ESLint in the following lines:

/* eslint-disable */
alert('test');
/* eslint-enable */

Or single line:

alert('test'); // eslint-disable-line

Or just disable one or more specific rules for multiple lines:

/* eslint-disable no-alert, no-console */
alert('test');
console.log('test');
/* eslint-enable no-alert, no-console */

Or single line:

alert('test'); // eslint-disable-line no-alert, quotes, semi

More devtools tutorials: