深入解析 ESLint 配置：打造个性化代码检查工具

用户2694110373617
242 阅读2分钟

ESLint 是一个针对 JavaScript 的代码风格检查工具，当代码不满足其要求的风格时，会给予警告或错误。它可以帮助开发者保持代码的一致性和质量。

1. 官方资源

2. 使用

ESLint 通常配合编辑器使用，以下是在 VSCode 中配置和使用 ESLint 的步骤。

2.1 在 VSCode 中安装 ESLint

  1. 安装 ESLint 插件：

    • 打开 VSCode。
    • 进入扩展市场（Extensions Market）。
    • 搜索 ESLint 并安装。

  2. 安装 ESLint 库：

    • 在项目根目录下打开终端。
    • 运行以下命令安装 ESLint： 
      npm install eslint --save-dev
2.2 创建配置文件

可以通过 ESLint 交互式命令创建配置文件。由于 Windows 环境中 Git 窗口对交互式命令支持不是很好，建议使用 PowerShell。

  1. 运行初始化命令：

    npx eslint --init

  2. 按照提示选择配置：

    • 选择配置类型（例如，React, Vue, Node.js 等）。
    • 选择代码风格（例如，Airbnb, Standard, Google 等）。
    • 选择是否使用 TypeScript。
    • 选择是否使用 JSX。
    • 选择是否使用 ES6。
    • 选择是否使用共享配置。
    • 选择是否安装推荐的插件。

3. 配置

ESLint 的配置文件可以是 .eslintrc.* 文件（如 .eslintrc.json, .eslintrc.yaml, .eslintrc.js）或 package.json 中的 eslintConfig 字段。

3.1 env

配置代码的运行环境：

  • browser：代码是否在浏览器环境中运行。
  • es6：是否启用 ES6 的全局 API，例如 Promise 等。
{
  "env": {
    "browser": true,
    "es6": true
  }
}
3.2 parserOptions

该配置指定 ESLint 对哪些语法的支持：

  • ecmaVersion：支持的 ES 语法版本。
  • sourceType：
    • script：传统脚本。
    • module：模块化脚本。
{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  }
}
3.3 parser

ESLint 默认使用 Espree 作为其解析器，你可以在配置文件中指定一个不同的解析器。

{
  "parser": "babel-eslint"
}
3.4 globals

配置可以使用的额外的全局变量：

{
  "globals": {
    "var1": "readonly",
    "var2": "writable"
  }
}

你也可以在代码中使用注释形式的配置：

/* global var1, var2 */
/* global var3:writable, var4:writable */
3.5 extends

该配置继承自哪里，它的值可以是字符串或者数组：

{
  "extends": "eslint:recommended"
}

表示，该配置缺失的位置，使用 ESLint 推荐的规则。

3.6 ignoreFiles

排除掉某些不需要验证的文件，可以在 .eslintignore 文件中配置：

dist/**/*.js
node_modules
3.7 rules

ESLint 规则集，每条规则影响某个方面的代码风格。每条规则有以下取值：

  • off 或 0 或 false：关闭该规则的检查。
  • warn 或 1 或 true：警告，不会导致程序退出。
  • error 或 2：错误，当被触发的时候，程序会退出。

除了在配置文件中使用规则外，还可以在注释中使用：

/* eslint eqeqeq: "off", curly: "error" */

4. 示例配置文件

{
  "env": {
    "browser": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "parser": "babel-eslint",
  "globals": {
    "var1": "readonly",
    "var2": "writable"
  },
  "extends": "eslint:recommended",
  "rules": {
    "eqeqeq": "error",
    "curly": "error",
    "no-console": "warn"
  }
}

5. 总结

通过配置 ESLint，可以显著提高代码的质量和一致性。

avatar
文章
阅读
粉丝