岩石教程

ESLint

2024-07-12 21:06:16 432
ESLint 是一个用于识别和报告 JavaScript 代码中的问题的开源静态代码分析工具。它可以帮助开发人员在编写代码时遵循一致的编码规范，减少错误并提高代码质量。

特点

  • 高度可配置：支持自定义规则、插件和共享配置。
  • 支持现代 JavaScript：兼容 ES6 及以上版本的 JavaScript，还支持 TypeScript、JSX 等。
  • 可扩展性强：通过插件系统，用户可以添加自定义规则或使用社区提供的插件。
  • 集成性强：与多种编辑器和开发工具集成，如 VSCode、Sublime Text、Webpack 等。
  • 自动修复：支持自动修复部分可修复的代码问题，提高开发效率。

使用场景

  • 代码审查：在代码提交前进行静态分析，确保代码质量。
  • 代码一致性：团队协作时，统一编码风格，减少因风格不同导致的代码冲突。
  • 错误检测：在开发过程中及早发现并修复潜在错误。

安装方式

npm 安装

npm install eslint --save-dev

全局安装

npm install eslint --global

使用示例

初始化配置

npx eslint --init

该命令会引导用户根据项目需求生成 .eslintrc 配置文件。

配置文件示例

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"]
  }
}

在项目中运行 ESLint

npx eslint yourfile.js

配置选项

下面是ESLint所有配置参数的详细说明

参数名称类型默认值描述
env对象无指定环境（例如：browser、node等），设置全局变量。
globals对象无配置额外的全局变量，设置为true表示可写，为false表示只读。
parser字符串espree指定解析器。可以使用espree、babel-eslint、@typescript-eslint/parser等。
parserOptions对象无配置解析器选项，比如ecmaVersion、sourceType、ecmaFeatures。
plugins数组无使用的插件列表。
settings对象无为特定插件提供共享设置。
rules对象无自定义规则及其错误级别（例如：off、warn、error）。
extends数组或字符串无配置文件扩展，可以继承多个共享配置。
overrides数组无覆盖特定文件的配置，可以针对特定文件类型应用不同的规则。
ignorePatterns数组无指定要忽略的文件和目录。
root布尔值false指定当前配置文件为根配置文件，ESLint在寻找配置文件时不会再往上查找。
noInlineConfig布尔值false禁用文件内的注释配置（如/* eslint-disable */）。
reportUnusedDisableDirectives布尔值或字符串false报告未使用的eslint-disable注释。值可以是true、false、error、warn。
processor字符串无指定处理器，允许在Lint前对文件内容进行转换。

常用规则

以下是ESLint常用规则，更多规则可以参考官网

规则名称默认值描述
accessor-pairsoff强制getter和setter成对出现在对象中。
array-bracket-newlineoff强制数组括号内换行。
array-bracket-spacingoff强制数组括号内的空格一致性。
array-callback-returnoff强制数组方法的回调函数中有return语句。
array-element-newlineoff强制数组元素的换行。
arrow-body-styleoff要求箭头函数体使用大括号。
arrow-parensoff要求箭头函数的参数使用圆括号。
arrow-spacingoff强制箭头函数的箭头前后使用一致的空格。
block-scoped-varoff强制在块作用域中使用变量。
block-spacingoff强制单行代码块的空格。
brace-styleoff强制代码块大括号风格。
callback-returnoff强制数组方法的回调函数中有return语句。
camelcaseoff强制使用驼峰命名法。
capitalized-commentsoff强制注释首字母大写。
class-methods-use-thisoff强制类方法使用this。
comma-dangleoff强制使用尾逗号。
comma-spacingoff强制逗号前后的空格一致性。
comma-styleoff强制使用一致的逗号风格。
complexityoff强制代码复杂度限制。
computed-property-spacingoff强制计算属性的空格一致性。
consistent-returnoff强制函数返回值的一致性。
consistent-thisoff强制this的别名一致性。
curlyoff强制所有控制语句使用一致的大括号风格。
default-caseoff要求switch语句中有default分支。
dot-locationoff强制对象访问符的位置。
dot-notationoff强制使用点号符访问属性。
eol-lastoff要求文件末尾保留一行空行。
eqeqeqoff强制使用全等（=== 和 !==）操作符。
func-call-spacingoff强制函数调用间的空格一致性。
func-namesoff强制函数表达式有名称。
func-styleoff强制一致地使用函数声明或函数表达式。
function-paren-newlineoff强制函数括号内换行的一致性。
generator-star-spacingoff强制生成器函数星号周围空格的一致性。
guard-for-inoff强制for-in循环中有一个if语句。
handle-callback-erroff强制回调错误处理。
id-blacklistoff禁用指定的标识符。
id-lengthoff强制标识符最小和最大长度。
id-matchoff强制标识符匹配指定的正则表达式。
implicit-arrow-linebreakoff强制隐式返回的箭头函数体的换行。
indentoff强制一致的缩进。
jsx-quotesoff强制JSX属性中一致使用双引号或单引号。
key-spacingoff强制对象字面量中冒号前后的空格一致性。
keyword-spacingoff强制关键字前后空格的一致性。
line-comment-positionoff强制行注释的位置。
linebreak-styleoff强制使用一致的换行风格。
lines-around-commentoff强制注释周围有空行。
lines-between-class-membersoff强制类成员之间有空行。
max-depthoff强制块语句的最大嵌套深度。
max-lenoff强制一行的最大长度。
max-linesoff强制文件的最大行数。
max-lines-per-functionoff强制函数的最大行数。
max-nested-callbacksoff强制回调函数的最大嵌套深度。
max-paramsoff强制函数定义中最多允许的参数数量。
max-statementsoff强制函数块中的语句最大数量。
max-statements-per-lineoff强制每一行中的语句数量。
multiline-comment-styleoff强制多行注释的风格。
multiline-ternaryoff强制三元表达式的换行。
new-capoff要求构造函数首字母大写。
new-parensoff强制或禁止调用无参构造函数时有圆括号。
newline-per-chained-calloff强制每个方法调用都换行。
no-alertoff禁用alert、confirm和prompt。
no-array-constructoroff禁用Array构造函数。
no-async-promise-executoroff禁止使用async函数作为Promise执行器。
no-await-in-loopoff禁止在循环中使用await。
no-bitwiseoff禁用按位操作符。
no-calleroff禁用arguments.caller或arguments.callee。
no-case-declarationsoff不允许在case或default子句中使用词法声明。
no-class-assignoff禁止修改类声明的变量。
no-compare-neg-zerooff禁止与负零进行比较。
no-cond-assignoff禁止条件表达式中出现赋值操作符。
no-confusing-arrowoff禁止在可能与比较操作符相混淆的地方使用箭头函数。
no-consoleoff禁用console。
no-const-assignoff禁止修改const声明的变量。
no-constant-conditionoff禁止在条件中使用常量表达式。
no-constructor-returnoff禁止构造函数中返回值。
no-continueoff禁用continue语句。
no-control-regexoff禁止正则表达式中的控制字符。
no-debuggeroff禁用debugger。
no-delete-varoff禁止删除变量。
no-div-regexoff禁止正则

高级用法

自定义规则

// 在项目根目录创建自定义规则文件 custom-rules/no-console.js
module.exports = {
  create: function(context) {
    return {
      CallExpression(node) {
        if (node.callee.object.name === 'console') {
          context.report({
            node,
            message: 'Unexpected console statement.'
          });
        }
      }
    };
  }
};

在 .eslintrc.js 中添加自定义规则：

module.exports = {
  // 其他配置...
  rules: {
    'no-console': 'off',
    'custom-rules/no-console': 'error'
  },
  plugins: ['custom-rules']
};

官方资料