如何配置 ESLint 全球规则

前言

ESLint 是一个常用的 JavaScript 代码检查工具，可以帮助我们在编写代码时遵循一些规范、规则，从而提高代码质量和可读性。ESLint 提供了很多预设的规则，但是这些规则可能并不符合我们的项目需求，因此需要进行配置。

本文将介绍如何配置 ESLint 的全球规则，以及如何在项目中使用这些规则。

配置全球规则

全球规则是指在项目中使用的一组通用的规则。我们可以将这些规则配置在一个全局的配置文件中，从而避免在每个项目中都进行配置。

1. 首先，我们需要安装 ESLint：

   npm install eslint --save-dev

2. 接着，在项目根目录下创建一个名为 .eslintrc.json 的文件，用于存放全球规则的配置。

   {
     "extends": "eslint:recommended",
     "rules": {
       "semi": ["error", "always"],
       "quotes": ["error", "single"]
     }
   }

   在上面的配置中，我们使用了 eslint:recommended 这个预设规则集，并且指定了两个规则：semi 和 quotes。semi 规则表示必须使用分号，quotes 规则表示必须使用单引号。

   具体规则的配置可以参考 ESLint 官方文档。

3. 最后，我们还需要在项目中安装一些插件，以便在编辑器中直接看到 ESLint 的错误和警告信息。以 VS Code 为例，我们可以安装 eslint 和 eslint-plugin-vue 插件。

   npm install eslint eslint-plugin-vue --save-dev

   安装完成后，我们需要在 VS Code 的设置中将 ESLint 设置为默认的代码检查工具：

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

   这样就可以在保存文件时自动修复 ESLint 的错误和警告了。

使用全球规则

我们已经将全球规则配置好了，现在需要在项目中使用这些规则。

1. 首先，我们需要在项目中安装 eslint：

   npm install eslint --save-dev

2. 接着，在项目根目录下创建一个名为 .eslintrc.json 的文件，用于存放项目规则的配置。

   {
     "extends": "../.eslintrc.json",
     "rules": {
       "no-console": "warn"
     }
   }

   在上面的配置中，我们使用了 ../.eslintrc.json 这个路径来继承全球规则，同时指定了一个项目规则：no-console。这个规则表示禁止使用 console。

3. 最后，我们还需要在编辑器中安装 eslint 插件，并且在 VS Code 的设置中将 ESLint 设置为默认的代码检查工具（同上）。

   这样就可以在编辑器中直接看到 ESLint 的错误和警告信息了。

示例代码

下面是一个示例代码，演示了如何使用 ESLint 的全球规则和项目规则：

function add(a, b) {
  return a + b
}

add(1, 2)

在上面的代码中，我们使用了 add 函数来计算两个数的和。然而，我们并没有使用分号，也没有使用单引号。如果我们在编辑器中打开这个文件，就会看到 ESLint 的两个错误信息：

Missing semicolon. (semi)
Strings must use singlequote. (quotes)

这些错误信息是由全球规则定义的，表示我们必须使用分号和单引号。如果我们将代码修改为：

function add(a, b) {
  return a + b;
}

add(1, 2);

这样就符合了全球规则的要求。但是，我们还有一个问题：我们使用了 console 来输出结果。如果我们保存文件，就会看到 ESLint 的另一个警告信息：

Unexpected console statement. (no-console)

这个警告信息是由项目规则定义的，表示我们不能使用 console。如果我们将代码修改为：

function add(a, b) {
  return a + b;
}

const result = add(1, 2);
console.log(result);

这样就符合了项目规则的要求。现在，我们的代码不仅符合全球规则，还符合项目规则。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d53ff3a941bf71349b46b6