ESLint 是目前最为主流的 JavaScript Lint 工具，用于检测 JavaScript 代码质量。使用 ESLint 很容易统一开发者的编码风格。

上手

安装

yarn add eslint --dev
yarn eslint --version

初始化

要想使用 ESLint 检查代码，首先需要初始化，根据命令行询问的问题配置一些选项，安装一些模块后，生成一个配置文件 .eslintrc.js。

yarn eslint --init

// .eslintrc.js
module.exports = {
  env: {  // 项目运行环境
    browser: true,  // 是否运行在浏览器，会决定能否使用 window 等对象
    node: false,    // 是否运行在 node 环境，会决定能否使用 node 的 API
    es2020: true        // ES 的版本
    es6: true      // 启用除了 modules 以外的所有的 ECMAScript 6 特性 （该选项会设置 ecmaVersion解析器为6）
  },
  extends: [
    'standard' // 要继承使用的代码风格配置，没有配置的项就会使用这个风格，可继承多个，可选 Airbnb，Google
  ],
  parserOptions: {
    ecmaVersion: 11  // 设置语法解析器的版本，如果设置5或以下，代码使用ES6的新特性就不能通过校验，也可以设置年份比如2015。这个选项只是检测语法，并不代表是不可用。
  },
  rules: {  // 配置每个校验规则的开关
    'no-alert': "off"  // "off" | "warn" | "error"  0 | 1| 2   含义：关闭 | 警告 | 报错
  },
  globals: { // 定义可以使用的全局变量，定义在这里的变量在 JS 文件可以直接使用不报错
    "jQuery": "readonly"
  },
}

校验文件

初始化后就可以校验 js 文件了。运行 yarn eslint 文件名，如果有语法错误，会打印出错误，校验无法执行。加上--fix参数，ESLint 会修复一些能够修复的问题，像代码风格的问题，如缩进，空格等。但并不是所有的问题都能自动修复。

配置注释

在写代码时，一些语句我们有时候不得不违反 ESLint 的规则，有这种需求可以通过特殊的注释，告诉 ESLint 在校验这些语句的时候，忽略一些规则。

const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string 
// 如果只写 eslint-disable-line 就会忽略所有规则，相当这一行完全不校验
console.log(str1)

ESLint 自动化工具模块

一些自动化工具有一些专门的 ESLint 模块，与工具本身的集成度更高。

gulp-eslint

配合 gulp，对 JS 文件进行校验、按规则格式化。

// gulpfile.js  gulp 配置文件
const loadPlugins = require('gulp-load-plugins')  // gulp 自动加载已安装插件的工具
const plugins = loadPlugins()
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.eslint())
    .pipe(plugins.eslint.format())
    .pipe(plugins.eslint.failAfterError())
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

eslint-loadr (已停止维护)

webpack 的 ESLint loader。这个 loader 依赖于 eslint 模块。

// webpack.config.js
module.exports = {
  module: {
    rules: [
        {
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: 'babel-loader'
      },
      // 先使用 eslint-loader 进行校验, 再使用 babel-loader 处理
      {
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: 'eslint-loader',
        enforce: "pre"  // 提高优先级
      },
    ]
  }
}

React 项目

如果是自创建的 react 项目，使用 ESLint，还需要额外安装一个 eslint-plugin-react，并在配置文件中声明使用的插件。

// .eslintrc.js
module.exports = {
  env: { 
    browser: true,  
    node: false, 
    es2020: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 11
  },
  rules: {
    'react/jsx-uses-react': 2, // 等同 "error"
    'react/jsx-uses-vars': 2
  },
  plugins: [
    'react' // 使用 react 插件
  ]
}

对于大多数插件， ESLint 会提供共享的配置，降低使用成本，react 插件有两个配置：recommended 和 all。

// .eslintrc.js
module.exports = {
  env: { 
    browser: true,  
    node: false, 
    es2020: true
  },
  extends: [
    'standard',
    'plugin:react/recommended', // react 插件的配置
  ],
  parserOptions: {
    ecmaVersion: 11
  },
  rules: {
    // 'react/jsx-uses-react': 2, // 等同 "error"
    // 'react/jsx-uses-vars': 2
  },
  plugins: [
    // 'react' // 使用 react 插件
  ]
}

React 和 Vue 的官方工具已经集成了 ESLint，在构建项目时，会询问是否安装。

TypeScript

ESLint 运行初始化命令时，会询问是否用到了 TypeScript，如果选是，会额外安装一个解析器和插件，配置文件会自动配置进去。

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: [
    'standard'
  ],
  parser: '@typescript-eslint/parser',  // 解析器
  parserOptions: {
    ecmaVersion: 11
  },
  plugins: [
    '@typescript-eslint' // 插件
  ],
  rules: {
  }
}

Stylelint

CSS 的 lint 工具。StyleLint 提供默认的校验规则，也提供 CLI 工具，以供调用。通过插件也可以支持 Sass，Less，PostCSS。另外，Stylelint 也支持 Gulp 和 Webpack 集成。

安装本体和两个配置模块：

yarn add stylelint --dev
yarn add stylelint-config-standard --dev 
yarn add stylelint-config-sass-guidelines --dev

Stylelint 使用前同样需要初始化配置文件.stylelintrc.js：

module.exports = {
  extends: [ // 继承配置
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ]
}

Prettier

现在前端经常使用的一款格式化工具。可以格式化 html， js，css，scss，vue，react等

安装：

yarn add prettier --dev

使用：

yarn prettier [文件名或 . ] --write

如果不加 --write就不会覆盖掉源文件的内容，只会输出在控制台。

GitHooks

Git 钩子，在进行一些 git 的特定操作时，会自动触发这些钩子的自定义脚本。我们用其中的pre-commit钩子来实现在提交代码前强制 lint。
如果不熟悉 shell 脚本编写，可以安装 Husky，它是能够实现不编写 shell 使用 Git Hooks 的 npm 模块。lint-staged 是能够只lint git暂存区文件的工具。这里通过 Husky 配置 pre-commit来在提交前运行 lint-staged 工具，由 lint-staged 调用 ESLint。

安装：

yarn add husky --dev
yarn add lint-staged --dev

在 package.json 中配置 husky：

{
  "scripts": {
    "test": "eslint ./index.js",
    "precommit": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint",
      "git add"
    ]
  }
}

在项目根目录下的 .git 文件夹下，有一个 hooks 文件夹，里面的文件就是 git 的钩子，我们需要更改 pre-commit文件。

#!/bin/sh
# husky
# Created by Husky v4.2.5 (https://github.com/typicode/husky#readme)
#   At: 2020-6-13 1:50:04 ├F10: AM┤
#   From: undefined (https://github.com/typicode/husky#readme)
. "$(dirname "$0")/husky.sh"