ESLint 代码风格规则详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码风格是非常重要的。统一的代码风格可以增强代码的可读性、可维护性和可扩展性。ESLint 是一个非常流行的 JavaScript 代码检查工具，它可以轻松地帮助我们规范代码风格并发现潜在的 bug。

本文将详细讲解 ESLint 的代码风格规则，包括规则分类、规则列表和示例代码。希望对前端开发者提供帮助，提高代码的质量和效率。

规则分类

ESLint 的代码风格规则可以分为以下几类：

基本规则（Basic）
变量规则（Variables）
Node.js 规则（Node.js and CommonJS）
Stylistic 规则（Stylistic Issues）
ECMAScript 6 规则（ECMAScript 6）
最佳实践规则（Best Practices）
严格模式规则（Strict Mode）
react 规则（React）
JSX 规则（JSX）

每个规则分类又细分为多个规则条目。在使用 ESLint 进行代码检查时，可以选择需要检查的规则分类和规则条目。

规则列表

下面列出 ESLint 的部分代码风格规则：

一、基本规则

规则条目	描述
`no-console`	禁用 console
`no-debugger`	禁用 debugger
`no-empty`	禁止空块语句
`no-useless-escape`	禁止不必要的转义符
`use-isnan`	要求使用 `isNaN()` 检查 NaN
`valid-typeof`	强制 typeof 表达式与有效的字符串进行比较
`no-extra-bind`	禁止不必要的函数绑定
`no-extra-parens`	禁止不必要的括号
`no-extra-semi`	禁止不必要的分号
`no-multi-spaces`	禁止多余的空白
`no-unused-vars`	禁止未使用的变量
`no-undef-init`	禁止将变量初始化为 `undefined`
`no-extend-native`	禁止扩展原生对象
`no-global-assign`	禁止对全局变量赋值

二、变量规则

规则条目	描述
`no-delete-var`	禁止删除变量
`no-shadow`	禁止变量声明覆盖外层作用域的变量
`no-shadow-restricted-names`	禁止将标识符与受限制的名字重名
`no-undef`	禁止访问未定义的变量
`no-unused-vars`	禁止未使用的变量
`no-use-before-define`	禁止在变量定义之前使用它
`no-param-reassign`	禁止对函数参数进行重新赋值
`no-process-env`	禁止使用 `process.env`
`no-catch-shadow`	禁止在 catch 子句中重复声明变量

三、Node.js 规则

规则条目	描述
`callback-return`	强制回调函数中的错误处理
`no-mixed-requires`	禁止混合使用 `import` 和 `require`
`no-new-require`	禁止使用 `new require()`
`no-path-concat`	禁止使用 `__dirname` 和 `__filename` 的拼接
`no-process-exit`	禁止使用 `process.exit()`
`no-restricted-modules`	禁止使用指定的 Node.js 模块
`no-sync`	禁止使用同步的方法

四、Stylistic 规则

规则条目	描述
`array-bracket-spacing`	强制数组方括号内的空格
`camelcase`	强制驼峰命名
`comma-spacing`	强制逗号周围的空格
`key-spacing`	强制对象字面量中键和值之间的空格
`indent`	强制缩进
`max-len`	强制一行的最大长度
`no-array-constructor`	禁止使用数组构造器
`no-extra-parens`	禁止不必要的括号
`no-multiple-empty-lines`	禁止多余的连续空行
`no-trailing-spaces`	禁止行末空格
`object-curly-spacing`	对象字面量{}内的空格，不允许内部有空行
`padded-blocks`	语句块之间强制填充空行
`prefer-const`	建议使用 `const`
`quote-props`	强制属性名称使用一致的引号
`semi`	强制使用分号
`space-before-blocks`	语句块之前需要有空格
`space-before-function-paren`	函数声明时括号与函数名间不允许有空格
`space-in-parens`	禁止在括号内使用空格
`space-infix-ops`	强制中缀操作符周围有空格
`spaced-comment`	强制在注释前使用空格

五、ECMAScript 6 规则

规则条目	描述
`arrow-body-style`	强制箭头函数体使用大括号
`arrow-parens`	强制箭头函数参数使用括号
`arrow-spacing`	要求箭头函数的箭头之前和之后有空格
`generator-star-spacing`	强制 generator 函数中 `*` 和函数名之间有空格
`no-duplicate-imports`	禁止重复模块导入
`no-useless-computed-key`	禁止不必要的计算属性键名
`no-useless-constructor`	禁止不必要的构造函数
`no-useless-rename`	禁止不必要的重命名
`object-shorthand`	要求使用对象字面量简写语法
`prefer-arrow-callback`	建议使用箭头函数作为回调函数
`prefer-const`	建议使用 `const`
`prefer-destructuring`	建议使用解构赋值
`prefer-rest-params`	建议使用剩余参数代替 `arguments`
`prefer-spread`	建议使用扩展运算符
`rest-spread-spacing`	强制剩余和扩展运算符之间有空格
`template-curly-spacing`	要求模板字符串中使用一致的空格
`yield-star-spacing`	强制 yield* 表达式中 `*` 和参数之间有空格

六、最佳实践规则

规则条目	描述
`no-alert`	禁止使用 `alert()` 弹出窗口
`no-eq-null`	禁止等于 `null` 或 `undefined`
`no-floating-decimal`	禁止浮点数的小数位前缺少 0
`no-implicit-coercion`	禁止不必要的类型转换
`no-lone-blocks`	禁止没有必要的嵌套块
`no-multi-spaces`	禁止多余的空格
`no-redeclare`	禁止重复声明变量
`no-self-assign`	禁止自我赋值
`no-with`	禁用 `with` 关键字
`consistent-return`	要求函数返回值
`no-case-declarations`	禁止在 `case` 或 `default` 子句中使用声明
`no-fallthrough`	禁止 `switch` 语句落空
`no-unreachable`	禁止在 `return`、`throw`、`continue` 和 `break` 语句之后再使用语句
`no-useless-concat`	禁止不必要的字符串连接
`no-useless-return`	禁止不必要的 `return` 语句
`radix`	强制使用八进制字面量

七、严格模式规则

规则条目	描述
`strict`	要求或禁止严格模式指令
`no-var`	要求使用 `let` 或 `const` 代替 `var`

八、react 规则

规则条目	描述
`jsx-quotes`	强制使用一致的单引号或双引号
`react/display-name`	防止在 React 组件定义中丢失 displayName
`react/jsx-boolean-value`	强制将 JSX 属性的值采用一致的布尔值写法
`react/jsx-closing-bracket-location`	强制在关闭标签时使用一致的位置
`react/jsx-curly-spacing`	强制在 JSX 属性中使用一致的空格
`react/jsx-equals-spacing`	强制在 JSX 属性中使用一致的等号间距
`react/jsx-first-prop-new-line`	强制将 JSX 属性放在单独行上
`react/jsx-indent`	对齐标签中的 JSX
`react/jsx-indent-props`	对齐组件属性
`react/jsx-key`	防止使用未唯一的键
`react/jsx-no-bind`	防止在 `JSX props` 和事件处理程序中使用未绑定的方法
`react/jsx-no-comment-textnodes`	防止在 JSX 中使用注释
`react/jsx-no-duplicate-props`	禁止重复对象属性
`react/jsx-no-target-blank`	防止在 `target="_blank"` 中使用 `rel="noopener noreferrer"`
`react/jsx-no-undef`	防止在 JSX 中使用未定义的变量
`react/jsx-pascal-case`	强制 PascalCase for JSX components
`react/jsx-props-no-multi-spaces`	防止属性中多余的空格
`react/jsx-props-no-spreading`	防止扩展 JSX 属性
`react/jsx-tag-spacing`	强制在 JSX 打开标签时使用一致的间距
`react/jsx-uses-react`	防止 React 尚未导入的使用
`react/jsx-uses-vars`	防止在 JSX 中使用未定义的变量
`react/jsx-wrap-multilines`	强制异步组件使用 `await`

九、JSX 规则

规则条目	描述
`react/jsx-closing-tag-location`	防止在关闭标记后在JSX中添加描述性注释
`react/jsx-curly-brace-presence`	强制禁止或允许多行JSX中的花括号内的空格
`react/jsx-curly-newline`	强制或禁止在多行JSX元素的花括号中打空格
`react/jsx-max-depth`	强制限制在JSX中嵌套表达式的深度
`react/jsx-max-props-per-line`	强制限制JSX在深度中每行的props数
`react/jsx-props-no-multi-spaces`	防止使用多个空格来缩进JSX属性
`react/jsx-props-no-multi-line`	防止JSX属性写在多行，除非每个属性都从新的一行开始
`react/jsx-sort-props`	强制在JSX中排序props

示例代码

下面是一段违反 ESLint 检查规则的代码：

-------- ------------ -
  ------------ ------ ------ -
-

-------------

使用 ESLint 执行代码检查，将输出以下结果：

---   -----    ---------- ------- ---------   ----------
----  -----    ------- ---- --- -----------   ------
----  -----    ------- ---------              ----
----  -----    ----- ----- ----- -------      ---------------

表示代码存在以下错误：

使用了 console 语句，不符合 no-console 规则
第二行的字符串应该使用单引号，不符合 quotes 规则
第二行缺少分号，不符合 semi 规则
第二行的字符串后存在额外的空格，不符合 no-multi-spaces 规则

修改后的代码如下：

-------- ------------ -
  ------------------ --------
-

-------------

这段代码符合 ESLint 的所有检查规则，可以提供更加规范的代码风格，增强代码的可读性和可维护性。

总结

ESLint 是一个非常实用的代码检查工具，它可以帮助前端开发者规范代码风格并发现潜在的 bug。本文对 ESLint 的代码风格规则进行了详细介绍，包括规则分类、规则列表和示例代码。希望对前端开发者进行指导和帮助，提高代码的质量和效率。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/647ee5a248841e9894e93615