Eslint is a front-end tool for JS code, with the goal of unifying the team’s code style and specification and avoiding unnecessary bugs.

Github branch description

  1. Eslint for master
  2. Webpack-eslint is esLint with the WebPack version
  3. Githook is the hook version of ESLint that works with Git

The code address

The installation

The installation includes the current project installation and global installation.

NPM install eslint --save-dev // Current projectCopy the code
NPM install -g eslint // globalCopy the code

The configuration file is initialized

After installation, a configuration file is required, which can be generated by running the following command:

Eslint --init // globally installed can be written this wayCopy the code
. / node_modules/eslint/bin/eslint js - init / / the current project installationCopy the code

The process it will prompt you to choose some options, do not know the words are the default line directly, and then generates similar. Eslintrc. (js | json, etc.) the suffix of files, this is eslint configuration file.

Configuration file details

There are also two ways to configure ESLint

  1. Configure by comment
  2. The configuration file

Annotation configuration

Turn off checks for alert, console, etc. This is suitable for special processing and is not recommended.

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* global var1, var2 */ // Comments declare some global variables
Copy the code

The configuration file

This section describes common configuration file parameters

module.exports = {
    root: 'true'.// ESLint will stop looking in the parent directory once it finds "root": true in the configuration file.
    parser: 'babel-eslint'.// By default ESlint uses Espree as the parser, but once we use Babel we need to use babel-eslint to make ESlint and Babel work better together.
    parserOptions: {
        "ecmaVersion": 6."sourceType": "module"."ecmaFeatures": {
            "jsx": true}},// Parser configuration
    "extends": [
        "standard"."plugin:react/recommended"].// The default check scope is limited, this parameter is inherited from some of the more well-known ESLint configurations. Out of the box, eslint-config-standard is used here, and eslint-config-airbnb is also known. For details, check NPM
    "rules": {
        "semi": [2."never"].// prohibit semicolons
        "quotes": [2."single"].// Only single quotes are allowed
        "comma-dangle":  ["error"."never"]},/ / here only lists several examples, the first parameter is the error of the level, the second is to set the value of the three values off, warn, error (0), the specific parameter configuration, see https://eslint.org/docs/rules/ for details
    "env": {
        "browser": true."node": true."es6": true     
    }, // Set esLint's environment to avoid checking for global variables. You can select multiple global variables, for example, if you remove node, some undefined variables will be reported
    "globals": {
        "_": true."$": true
    }, // esLint checks for skipped global variables. Here I'm using Lodash,jquery
    "plugins": [
        "react"."html"].// Some plugins for esLint
}
Copy the code

ESLint usage scenarios

There are several ways to control ESLint

  1. Eslint directly specifies the file to check
  2. Use with WebPack (eslint-Loader)
  3. Git Hook (Check before submitting code)

Eslint specifies files

Simple and crude way, directly specify the files you need to check.

./node_modules/eslint/bin/eslint.js myfile.js
Copy the code

Use with WebPack

To work with WebPack, you need to install esLint-Loader and ESLint

npm install eslint-loader eslint --save-dev
Copy the code

Webpack configuration,”pre” is checked before plug-ins like Babel-loader, vue-loader are parsed.

module.exports = {
  // ...
  module: {
    rules: [{enforce: "pre".test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"}}]// ...
};
Copy the code

Eslint-loader configuration method address

Work with Git hook

We can also do some code checking before submitting, starting with installing two plug-ins

npm install --save-dev husky lint-staged
Copy the code

Then configure package.json as follows:

// ...
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "src/*.js": [
      "eslint --fix".// Add --fix to fix automatically
      "git add"]}// ...
Copy the code

When you submit, you will be prompted with an error if you do not add –fix.

Git /hook/pre-commit

#! /bin/bash

for file in $(git diff --cached --name-only | grep -E '\.(js|jsx)$')

do

  git show ":$file" | node_modules/.bin/eslint --stdin --stdin-filename "$file" # we only want to lint the staged changes, not any un-staged changes

  if [ $? -ne 0 ]; then

    echo "ESLint failed on staged file '$file'. Please check your code and try again. You can run ESLint manually via npm run eslint."

    exit 1 # exit with failure status

  fi

done
Copy the code

other

  1. Create.eslintignore to let ESLint know that files don’t need to be checked.
  2. Search in vscode for the eslint plugin installation, after installation

Open vscode preferences/Settings and then search eslint to find eslint: Enable, eslint: Auto Fix On Save, either to Enable IDE eslint checking or to automatically Fix non-conforming items when saving.