ESLint

官方文档

安装 ESLint

ESLint 可以使用默认配置、共享配置和自定义配置。

使用默认配置

# 安装并配置 eslint
npm init @eslint/config

使用共享配置

#  使用 semistandard
npm init @eslint/config -- --config eslint-config-semistandard
# 使用 semistandard 和 standard，数组形式一
npm init @eslint/config -- --config semistandard,standard
# 使用 semistandard 和 standard，数组形式二
npm init @eslint/config -- --config semistandard --config standard

使用自定义配置

# 安装 eslint
yarn add eslint

在根目录下创建 .eslintrc.js 文件，并添加以下内容：

// .eslintrc.js 示例
module.exports = {};

配置 ESLint

根目录（root）

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。

为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件设置 "root": true。

ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。

修改 .eslintrc.js 文件，添加以下内容：

module.exports = {
  root: true,
}

环境（env）

env 属性用于指定代码运行环境，比如浏览器、Node.js、浏览器的 DOM 等。

修改 .eslintrc.js 文件，添加以下内容：

module.exports = {
  env: {
    // 浏览器环境
    browser: true,
    // Node.js 环境
    node: true,
    // ECMAScript 2021 环境
    // 如果需要支持更新的 ECMAScript 特性，请将此属性修改为其他属性名，如 es2020 或 es2022。
    es2021: true,
  },
};

配置语言选项-指定环境

全局变量（globals）

在 ESLint 中，使用未声明的变量会报错，比如 window、document 等，更特别的如微信小程序的 wx，这个时候就要设置全局变量来避免。

修改 .eslintrc.js 文件，添加以下内容：

module.exports = {
  globals: {
    wx: "readonly",
    window: "readonly",
    document: "readonly",
  },
};

规则（rules）

需要使用哪条规则，就在 rules 对象中声明，并设置规则严重性。

规则严重性

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 启用并视作警告（不影响退出）
• "error" 或 2 - 启用并视作错误（触发时退出代码为 1）

修改 .eslintrc.js 文件，添加以下内容：

module.exports = {
  rules: {
    // 不允许使用 console.log
    "no-console": "off",
    // 不允许使用 debugger
    "no-debugger": "off",
    // 不允许有未使用的变量
    "no-unused-vars": "error",
    // 要使用 let 或 const 而不是 var
    "no-var": "error",
    // 不允许使用 eval
    "no-eval": "error",
  },
};

规则参考

继承（extends）

继承可以减少重复配置，比如 eslint:recommended 等。

eslint:recommended 插件，它包含所有 ESLint 默认规则。

修改 .eslintrc.js 文件，添加以下内容：

module.exports = {
  extends: ["eslint:recommended"],
}

有时候插件会有多套配置，也需要在 extends 中指定。

插件（plugins）

ESLint 规则多且繁杂，使用插件可以快速扩展规则。

插件能力

• 自定义规则，以验证你的代码是否符合某个期望，以及如果不符合该期望该怎么做。
• 自定义配置。
• 自定义环境。
• 自定义处理器，从其他类型的文件中提取 JavaScript 代码，或在提示前对代码进行预处理。

使用前安装对应插件：

yarn add eslint-plugin-vue

修改 .eslintrc.js 文件，添加以下内容：

module.exports = {
  // 使用 vue 插件
  plugins: ["vue"],
  // 插件需要在 rules、extends 中定义后才会生效
  extends: ["plugin:vue/essential"],
  rules: {
    "vue/no-unused-vars": "error",
  },
};

解析器（parser）

解析器用于解析代码，比如 @babel/eslint-parser、@typescript-eslint/parser 等。

使用前安装自定义解析器：

yarn add @babel/eslint-parser

修改 .eslintrc.js 文件，添加以下内容：

module.exports = {
  parser: "@babel/eslint-parser",
};

注意当使用自定义解析器时，仍需要使用 parserOptions 配置属性以便 ESLint 可以正常使用默认不在 ECMAScript 5 中的特性。解析器都会传递 parserOptions，并可能使用或不使用它们来决定启用哪些功能。

module.exports = {
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
};