ESLint

检测语法和代码规范的前端工具

在 CLI 中使用

本地安装 ESLint

npm i -D eslint

在项目根目录中创建配置文件

• .eslintrc.js
• .eslintrc.json
• package.json 中的 eslintConfig 字段

可以自动生成配置文件

npx eslint --init

// .eslintrc.js

module.exports = {
    root: true,
    env: {
        es2021: true,
    },
    parser: 'espree',
    parserOptions: {
        ecmaVersion: 'latest',
    },
    extends: ['eslint:recommended'],
    rules: {},
};

parser 和 parserOptions 检测语法
extends 和 rules 检测代码规范

在项目根目录中创建忽略文件 .eslintignore，文件格式使用 gitignore syntax

# 忽略 build 目录下的除了 index.js 之外的所有文件的代码检测
build
!build/index.js

默认会忽略 node_modules 目录

# Ignore artifacts by default 
**/node_modules

检测 TypeScript 代码，需要本地安装 @typescript-eslint/eslint-plugin、@typescript-eslint/parser，其中 @typescript-eslint/parser 为 eslint 提供了 typescript 的语法解析器，@typescript-eslint/eslint-plugin 为 eslint 提供了适合 typescript 的 rules。

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

修改配置文件 .eslintrc.js

// .eslintrc.js

module.exports = {
    root: true,
    env: {
        es2021: true,
    },
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 'latest',
    },
    plugins: ['@typescript-eslint'],
    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
    rules: {},
};

如果通过 npx eslint --init 来自动生成配置文件，会提示是否使用 TypeScript，选 Yes，则自动安装 @typescript-eslint/eslint-plugin、@typescript-eslint/parser，并且自动设置好配置文件中的相关项。

执行 CLI 命令

# 检测当前项目中的所有 js 文件(除了 .eslintignore 里忽略的文件)
npx eslint .
# 检测特定目录中的所有 js 文件
npx eslint src
# 检测特定目录中的所有 ts 文件
npx eslint --ext .ts src
# 检测某个具体的 js 文件
npx eslint src/index.js
# 检测某个具体的 ts 文件
npx eslint src/index.ts
# 检测并修复
npx eslint --fix src

在 VSCode 中使用

1. 本地安装 eslint npm i -D eslint
2. 项目根目录中创建配置文件 .eslintrc.js
3. 项目根目录中创建忽略文件 .eslintignore
4. 在 VSCode 中安装 ESLint 插件
   shift command x 搜索并安装 ESLint 插件
5. 在编辑器中编写代码，会自动进行 ESLint 检测(无需运行 CLI 命令)，出错的地方会有红色的波浪线
6. 通过以下任意一种方式设置保存时自动使用 ESLint 检测并修复
   • 控制面板设置 command + , 搜索 auto fix on save，打钩
   • 修改 vscode 配置文件："eslint.autoFixOnSave": true
   • 新版本 vscode 需要修改配置文件：

   "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
   }
   

配合 Prettier 使用

ESLint 可以检测语法和代码规范：

parser 和 parserOptions 检测语法
extends 和 rules 检测代码规范

ESLint 提供了两种类型的代码规范：

• 代码格式：例如 max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…
  Prettier 可以替代这类规则，因此需要关闭 ESLint 当中的这类规则

• 代码质量：no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…
  Prettier 不提供这类规则，因此只能用 ESLint 来检测

推荐安装 eslint-config-prettier，它是一个 eslint 的配置文件，其中关闭了所有与 Prettier 有冲突的 rules，在你自己的 eslint 配置文件中 extends eslint-config-prettier，就可以将 ESLint 与 Prettier 同时使用了。

npm i -D eslint-config-prettier

将 prettier 放到 extends 数组的最后，这样它可以覆盖其他 extends 的 rules

// .eslintrc.js

{
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
    ]
}