什么是 ESLint？
ESLint 是一个用于检查 JavaScript 代码是否符合规范的工具，可以提供代码质量保证并且减少代码错误。ESLint 可以自定义规则以适配团队风格和项目需求。
ESLint 配置
安装 ESLint
ESLint 可以通过 NPM 包进行安装，可以使用以下命令进行全局或者项目安装。
npm install -g eslint # 全局安装 npm install eslint --save-dev # 项目内安装
配置文件
在安装完成之后，可以通过 eslint --init 命令自动生成 .eslintrc.* 配置文件。可以选择手动创建配置文件或者根据需求自动生成。
在配置文件中，rules 是 ESLint 的核心部分。它是一个对象，其中包含要使用的规则以及它们的设置。规则可以通过字符串或者数字进行指定。例如：
{
"rules": {
"semi": ["error", "never"],
"quotes": ["error", "single"]
}
}上面的配置要求不使用分号，字符串统一使用单引号。这意味着当您的代码中出现不必要的分号时，会产生一个错误，这会导致 ESLint 报告错误。
配置规则
ESLint 有默认的规则集，也可以自定义规则集。
预定义规则
预定义规则是从命名空间 eslint:recommended 中导入的规则。如果您不使用配置文件，则默认启用此规则。建议使用 eslint:recommended 作为起点自定义规则。
自定义规则
自定义规则允许在规则集之外指定特定的规则。除了指定‘警告’或‘错误’实例之外，可以指定一个数组来充当示例。这在列出允许的值时非常有用。
例如，以下配置允许一个函数包含的最大行数为 50，如果超过此限制，则会产生一个错误。
{
"rules": {
"max-lines-per-function": ["error", { "max": 50 }]
}
}配置插件
ESLint 可以由扩展插件添加规则。您可以使用 npm 安装插件并在 .eslintrc.* 文件中通过配置插件列表的方式自定义规则。
npm install eslint-plugin-react --save-dev
{
"plugins": [
"react"
],
"rules": {
"react/prop-types": "error"
}
}配置全局变量
全局变量是在项目中声明的，但不在本地定义中使用的变量。您可以通过配置 globales 对象来定义这样的变量。例如：
{
"globals": {
"require": false,
"module": false,
"angular": false
}
}上述配置告诉 ESLint 为所在作用域声明 require、module 和 angular 三个变量，但是它们不应该被修改。
配置环境
在设计应用程序时，需要考虑各种环境。例如，如果您的代码运行在一个浏览器环境中，则需要使用特定的全局变量。
可以通过环境变量配置来告诉 ESLint 在哪个环境中运行：
{
"env": {
"browser": true,
"node": true,
"es6": true
}
}接口
你可以启用不同类型的接口，例如，对于 TypeScript 语法的代码，需要启用 TypeScript 接口。可以使用 parsers 和 parserOptions 配置。
{
"parser": "typescript-eslint-parser",
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module",
"project": "./tsconfig.json"
}
}注释
您可以在注释中添加规则。这对于已经无法修复的代码的代码规范非常有用，以及不希望在代码中添加规则的例外。
例如，以下代码片段禁用了一条规则：
/* eslint-disable no-console */
console.log('Hello World!');
/* eslint-enable no-console */你可以在注释中使用规则以及规则设置：
console.log('Hello World!'); // eslint-disable-line no-consoleESLint 在开发中的应用
在项目开发中，ESLint 可以保证代码质量并减少代码错误。在使用 Sass 或者其他预处理器时，我们可以在 ESLint 中使用 eslint-plugin-sass-lint 来检查 CSS 或者 Sass 的代码。
同时，在管理多人协作时，可以规范团队的代码风格，并可以在提交前自动 lint 代码。
结论
本文介绍了 ESLint 的配置，包括方法及示例代码。使用 ESLint 可以大大提高代码质量，并减少代码错误数量。ESLint 配置越规范，则团队成员开发并协作时，代码风格越规范，代码质量越理想。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674aa78ca1ce00635499da1a