ESLint配置详解(二) - 常用规则(Rules)集合
2021-04-17 本文已影响0人
AizawaSayo
指路：➡️ ESLint配置详解(一) - 超级深入详细
说明：这边只整理列出相对较常用或者主观性强可根据个人喜好配置的参数项，更推荐保持默认值的规则（比如ESLint最佳实践选项）则省略（谨代表个人观点）。而且如果用了像 vue-cli4脚手架 + Prettier 这种现成配置，就很少需要操心ESLint这些规则的配置，只有当格式不符合自己预期的时候再去额外配规则即可。具体可以参考 ➡️ vue-cli4 ESLint + prettier 修改插件规则实例
ESLint完整规则(rules)地址：https://eslint.org/docs/rules/
中文版：https://cn.eslint.org/docs/rules/
-
array-element-newline ：
<string|object>
"always"(默认) - 需要数组元素之间的换行符
"never" - 不允许数组元素之间换行
"consistent" - 数组元素之间保持一致的换行符 -
array-bracket-newline：
<string|object>数组内元素的换行规则
"always" - 总是在 [] 内换行
"never" - 禁止在 [] 内换行
"consistent"(推荐) - 数组两个[ ]之间需要一致的换行符。比如该对中的前一个方括号内有换行符，而另一个方括号内没有换行符，则会报错。 -
block-spacing：
<string>规定在代码块的花括号{}开始和结束位置是否有空格
"always"(默认|推荐) 要求有一致的空格
"never" 禁止有空格 -
comma-dangle：
<string|object>是否在对象/数组的末尾元素后加逗号。当传递的值为 object 时，可以为"arrays"、"objects"、"imports"、"exports"、"functions"分别设置。
"never" (默认) 禁用末尾逗号
"always" 要求使用末尾逗号
"always-multiline" 当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时，要求使用拖尾逗号；当在 同一行时，禁止使用拖尾逗号。
"only-multiline" 当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时，允许（但不要求）使用拖尾逗号；当在同一行时，禁止使用拖尾逗号。 -
eol-last：
<string>文件末尾是否添加换行符(文件最后有一行空行是常见的 UNIX 风格)
"always" (默认) 强制使用换行符 (LF)
"never" 强制文件末尾不要有换行符 -
jsx-quotes：
<string>强制在 JSX 属性中使用一致的单引号或双引号
"prefer-double" (默认) 强制所有不包含双引号的 JSX 属性值使用双引号。
"prefer-single" 强制所有不包含单引号的 JSX 属性值使用单引号。 -
keyword-spacing：
<object>强制在关键字(如 if、else、async、await )前后使用一致的空格。其中参数有：
"before": <boolean> (默认true) 要求在关键字之前至少有一个空格
"after": <boolean> (默认true) 要求在关键字之后至少有一个空格
"overrides" 允许覆盖指定的关键字的空格风格，示例：keyword-spacing: ["error", { "overrides": { "for": { "after": false }, "while": { "after": false }} }] -
multiline-ternary：
<string>规定三元操作数(:/?/&&)之间换行的规则。bar > baz ? value1 : value2
"always" (默认) 强制三元操作数之间有换行。
"always-multiline" 如果表达式跨越多个行，则在三元表达式的操作数之间强制换行。
"never"(个人习惯这个) 禁止三元操作数之间有换行 (强制整个三元表达式在同一行) -
newline-per-chained-call：
<object>规定链式调用的换行规则，要求在方法链中的每个调用后或深度成员访问之后都有一个换行符。属性访问比如 instance[something] 不适用于此规则。
{ "ignoreChainWithDepth": 2 } (默认) 允许在同一行成链的深度 -
no-mixed-operators：
<object>每两个连续的混合操作符，如果没有用括号括起来，可读性差且无法表达执行优先级的意图。比如var foo = a && b || c || d，改成var foo = (a && b) || c || d明显要好得多。建议开启这条规则为error就好，下面的选项按默认值即可。
groups (string[][]) - 指定要检查的操作符分组。groups 选项是分组的列表，分组是二进制运算符的列表。默认操作符分组定义为算术、位、比较、逻辑和关系运算符。
allowSamePrecedence <boolean> - 指定是否允许混合运算符具有相同的优先级。默认为 true。 -
no-trailing-spaces：
<object>禁用行尾空白。
"skipBlankLines"：<boolean> (默认false) 禁止在空行使用空白符
"ignoreComments"：<boolean> (默认false) 禁止在注释块中使用空白符 -
object-curly-newline：
<string|object>强制花括号{}内使用换行符的一致性（即{后，和}前）。该规则同时适用于对象字面量和解构赋值。
如果值为字符串，"always"要求花括号内有换行符，"never"则禁止有换行符
如果传递对象，参数有：
"multiline": true 如果在属性内部(比如属性值为函数/数组/对象)或属性之间有换行符，就要求换行
"minProperties" <int> 如果属性的数量大于等于这个数值，则要求换行。如果consistent选项为true，则该项将不起作用。
"consistent": true (默认)前后两个花括号的换行符保持一致，比如{后有换行符，}前也必须换行，否则就都不换行。
也可以为对象字面量("ObjectExpression") 、解构赋值("ObjectPattern") 和命名的导入("ImportDeclaration")导出("ExportDeclaration") 指定不同的选项。 -
object-property-newline：
<object>对象内属性是否强制放在单独的行上
默认是每个属性都需要单独成行的，可以保证更好的可读性及差异对比的优势。如果实在要禁止它可以设置：
object-property-newline: ["error", { "allowAllPropertiesOnSameLine": true }] -
object-curly-spacing：
<string, object>强制在花括号{}中使用一致的空格。该规则有两个参数。
参数一："never"(默认) 不允许花括号中有空格，"always"要求花括号内有空格 (除了 {})
参数二是对象：和参数一有固定配置才能生效，具体组合如下：
"never", { "arraysInObjects": true } 要求以数组元素开始或结尾的对象的花括号中有空格
"always", { "arraysInObjects": false } 禁止以数组元素开始或结尾的对象的{}中有空格
"never", { "objectsInObjects": true } 要求以对象元素开始或结尾的对象的{}中有空格
"always", { "objectsInObjects": false } 禁止以对象元素开始或结尾的对象的{}中有空格 -
object-property-newline：
<object>对象内属性是否强制放在单独的行上
默认是每个属性都需要单独成行的，可以保证更好的可读性及差异对比的优势。如果实在要禁止它可以设置：
object-property-newline: ["error", { "allowAllPropertiesOnSameLine": true }] -
prefer-object-spread：
<无参数，直接开启该规则就好>禁止Object.assign的第一个参数使用对象字面量，如{}, { foo: 'bar' }，用扩展运算符或者变量代替。如：Object.assign(...foo,)
Object.assign(foo, { ...baz }) -
quote-props：
<string, object>要求对象字面量属性名使用引号。该规则有两个参数。
参数一：
"always" (默认) 对象的属性名都使用引号
"as-needed" 当没有严格要求时，禁止对象属性名使用引号
"consistent" 要求对象属性名使用一致的引号，要么全部用引号，要么都不用
"consistent-as-needed" 如果有属性名要求使用引号，则所有的属性名称都要使用引号；否则，禁止所有的属性名使用引号
参数二是对象，和参数一有固定配置才能生效，具体组合如下：
"as-needed" | "consistent-as-needed", { "keywords": true } 如果关键字作为对象属性名称，要求使用引号
"as-needed", { "unnecessary": true } (默认) 如果没有严格要求，禁止对象属性名使用引号，改成 false 就是允许使用引号
"as-needed", { "numbers": true } 当数字作为对象属性名时，要求使用引号 -
quotes：
<string, object>强制使用一致的单/双引号或反勾号(用于字符串模版的 `)。该规则有两个参数。
参数一：
"double" (默认) 要求尽可能地使用双引号
"single" (个人习惯这个) 要求尽可能地使用单引号
"backtick" 要求尽可能地使用反勾号
参数二对象，可选值有：
"avoidEscape": true 允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号，否则需要转义
"allowTemplateLiterals": true 允许字符串使用反勾号 -
semi：
<string, object>强制是否一致使用分号。该规则有两个参数。
参数一：
"always" (默认) 要求在语句末尾使用分号
"never" (个人习惯) 禁止在语句末尾使用分号 (除了消除以 [、(、/、+ 或 - 开始的语句的歧义)
参数二对象，和参数一有固定搭配，具体组合如下：
"always", { "omitLastInOneLineBlock": true } 忽略花括号在同一行（内容也就在同一行了）的语句块中的最后一个分号，如：if (foo) { bar(); baz() }
"never", { "beforeStatementContinuationChars":<"any"|"always"|"never">} 如果下一句以 [、(、/、+ 或 - 开头，忽略句末分号，反正默认的"any"即可，光写第一个参数 "never" 足矣。 -
space-before-blocks：
<string|object>强制在语句块之前使用一致的空格。
若值是字符串，"always" (默认) 要求块语句({前)总是有一个前置空格 ；"never" 则是禁止{前有空格。
若传入对象，即可针对functions(函数块)、keywords(关键字)和classes(类)分别进行设置。值除了 "always"、"never" 还可以是 "ignore"。
比如：{ "functions": "never", "keywords": "always", classes: "always" } -
space-before-function-paren：
<string|object>强制在function的左括号之前使用一致的空格。
若值是字符串，"always" (默认) 要求在参数的 ( 前面有一个空格；"never" 则是禁止在参数的 ( 前面有空格。
若传入对象，即可针对anonymous(匿名函数表达式function () {})、
named(具名函数表达式function foo () {})、asyncArrow (异步的箭头函数表达式async () => {})分别进行设置。值除了 "always"、"never" 还可以是 "ignore"。
这是我的配置：
'space-before-function-paren': ['error', { anonymous: 'never', named: 'never', asyncArrow: 'always' }], // 在具名函数/和匿名函数名(function)后面不要留空格 -
class-methods-use-this：
<object>强制类(Class)的方法使用this，否则就必须定义为为静态方法(static fun() {})。 -
no-else-return：
<object>禁止 if 语句中有 return 的情况下，if 之后有 else 块。
allowElseIf：<boolean> (默认true) 允许在 if 块中有 return 的情况，if 后跟 else if 块。 -
no-implicit-globals：
<无参，直接开启即可(error 或 warn)>禁止在顶级作用域下使用 var 和命名的 function 声明。 -
no-return-await：
<无参，直接开启即可(error 或 warn)>禁用不必要的 return await。 -
no-useless-return：
<无参，直接开启即可(error 或 warn)>禁止多余的 return。
