定制团队的eslint rules(一)

此文转载自：https://blog.csdn.net/alnorthword/article/details/111780681#commentBox

定制团队eslint

前言

我们都知道，javascript 是一门动态弱类型语言。现在平台、环境等各种因素，很复杂，造成团队之间的风格，各种各样，有时候也会出现不可避免的错误，造成的排查力度大，团队维护难，团队合作差等等。然而ESLint的出现，帮我们团队解决了代码统一，风格统一等的问题，让我们能在编译中发现代码错误的工具，在团队协作中，避免低级 Bug，产出风格统一的代码。从而提高团队的凝集力。对外让人感觉很正规的印象。

ESLint

介绍

ESLint是一个开源的项目，由Nicholas C. Zakas（《JavaScript高级程序设计》作者）于2013年六月创建。它的目标是为JavaScript提供一个完全可配置的实用lint工具。

作用

在官网上是这样说的：“ESLint查找并修复JavaScript代码中的问题”

  • 发现问题

ESLint静态分析您的代码以快速发现问题。ESLint内置于大多数文本编辑器中，您可以将ESLint作为持续集成管道的一部分运行。

  • 自动修复

ESLint发现的许多问题都可以自动修复。ESLint修复程序可识别语法，因此您不会遇到传统的查找和替换算法引入的错误。

  • 定制

预处理代码，使用自定义解析器，并编写与ESLint内置规则一起使用的自己的规则。您可以自定义ESLint，使其完全按照项目所需的方式工作。

配置方式

配置方式有两种，一种在目标文件中使用注释语法嵌入配置信息，这种方式只针对当前文件生效。第二种是全局的，针对整个项目空间或者项目中起作用。所以一般的大厂或者正规的前端团队，都会定制属于自己公司或团队的一些规则配置。

  1. 第一种方式，作用域当前文件，eg:
// 忽略 no-undef 检查
/* eslint-disable no-undef */
js code

// 忽略 no-new 检查
/* eslint-disable no-new */
js code

// 设置检查
/*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/
js code
  • 第二种方式，作用全局，文件格式，eg:
  • JavaScript - use .eslintrc.js 文件导出一个包含配置信息的对象。
  • JSON - 使用 .eslintrc.json 定义配置信息，JSON 文件中支持 JavaScript 注释。
  • package.json - 在 package.json 文件中增加一个 eslintConfig 字段，在该字段中定义配置信息。
  • .eslintrc
  • 多个配置 优先级. eg: .eslintrc.js > .eslintrc.yaml > .eslintrc.yml .eslintrc.json > .eslintrc > package.json

配置参数[主要针对第二种方式]

我们在项目中，都会看到这样或那样的配置文件，比如.eslintrc.js，.eslintrc.yaml， .eslintrc.yml， .eslintrc.json， .eslintrc等，还有的写入到package.json里等等，无论哪一种方式，都是针对项目的一些配置，为了使其统一。其实配置里面是什么样的参数或者key呢？eg:

module.exports = {
  env: {
    node: true
  },
  globals: {
    var1: "writable",
    ....
  },
  extends: [
    ...
  ],
  rules: {
    ...
  },
  parserOptions: {
    ...
  }
}
  • env：你的脚本将要运行在什么环境中,可以是brower、node、es6、mocha等等各种环境,eg:
module.exports = {
  env: {
    node: true,
    browser: true,
    commonjs: true,
    es6: true,
    ...
  },
  ...
}

Tips：在第一种方式中可以这样使用。eg:

/* eslint-env node, mocha */
js code
  • globals: 未在当前文件中定义的全局变量时，会命中 no-undef 规则，通过 globals 配置指定的全局变量无视 no-undef 规则。eg:
module.exports = {
  ...
  globals: {
    var1: "writable",
    var2: "readonly",
    ....
  },
  ...
}
  • extends: 扩展,也就是可以在以后的基础规则上进行扩展。eg:
module.exports = {
  ...
  extends: {
    // npm 包
    'plugin:vue/essential',
    '@vue/standard',
    // 配置文件的绝对路径或相对路径指定
    "./node_modules/coding-standard/eslintDefaults.js",
    "./cicada-eslint-config.js"
    ...
  },
  ...
}
  • 一个指定基础配置来源的字符串
  • 一个指定基础配置来源的字符串的数组

往往大多数情况在集成的基础上并不满足我们的项目使用要求，往往需要在进行一些额外的配置。比如rules 参数指定的规则可按如下几种方式进行扩展，eg:

  • 启用基础配置中没有规则

  • 继承基础配置中的规则，改变其错误级别，但不改变其附加选项

  • 基础配置: “cicada”: [“error”, “allow-null”]
  • 扩展配置: “cicada”: “warn”
  • 最终有效配置：“cicada”: [“warn”, “allow-null”]

  • 共享配置包，一类导出 ESLint 配置对象的 npm 包，比如 eslint-config-standard、eslint-config-airbnb 等。共享配置包需要安装才能使用，配置时可省略报名中的 eslint-config- 前缀。

  • eslint:recommended： 启用 ESLint 内置规则集 的一个子集。

  • 覆盖基础配置中的规则

  • 基础配置：“quotes”: [“error”, “single”, “avoid-escape”]
  • 扩展配置：“quotes”: [“error”, “single”]
  • 最终有效配置: “quotes”: [“error”, “single”]

还有更多组合和复杂的配置，这里不在一一说明啦！

  • plugin: 插件. 第三方定制的规则集合,插件名中的 eslint-plugin- 前缀可以省略。eg:
module.exports = {
  ...
  plugins: {
    '@typescript-eslint',
    ...
  },
  ...
}
  • parserOptions: 语法分析器选项，默认使用的语法分析器支持如下几个选项：ecmaVersion、sourceType、ecmaFeatures。eg：
module.exports = {
  ...
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2019,
    sourceType: 'module',
    ...
  },
  ...
}

Rules 说明

字段值说明
no-alert0禁止使用alert confirm prompt
no-array-constructor2禁止使用数组构造器
no-bitwise0禁止使用按位运算符
no-caller1禁止使用arguments.caller或arguments.callee
no-catch-shadow2禁止catch子句参数与外部作用域变量同名
no-class-assign2禁止给类赋值
no-cond-assign2禁止在条件表达式中使用赋值语句
no-console2禁止使用console
no-const-assign2禁止修改const声明的变量
no-constant-condition2禁止在条件中使用常量表达式 if(true) if(1)
no-continue0禁止使用continue
no-control-regex2禁止在正则表达式中使用控制字符
no-debugger2禁止使用debugger
no-delete-var2不能对var声明的变量使用delete操作符
no-div-regex1不能使用看起来像除法的正则表达式/=foo/
no-dupe-keys2在创建对象字面量时不允许键重复 {a:1,a:1}
no-dupe-args2函数参数不能重复
no-duplicate-case2switch中的case标签不能重复
no-else-return2如果if语句里面有return,后面不能跟else语句
no-empty2块语句中的内容不能为空
no-empty-character-class2正则表达式中的[]内容不能为空
no-empty-label2禁止使用空label
no-eq-null2禁止对null使用==或!=运算符
no-eval1禁止使用eval
no-ex-assign2禁止给catch语句中的异常参数赋值
no-extend-native2禁止扩展native对象
no-extra-bind2禁止不必要的函数绑定
no-extra-boolean-cast2禁止不必要的bool转换
no-extra-parens2禁止非必要的括号
no-extra-semi2禁止多余的冒号
no-fallthrough1禁止switch穿透
no-floating-decimal2禁止省略浮点数中的0 .5 3.
no-func-assign2禁止重复的函数声明
no-implicit-coercion1禁止隐式转换
no-implied-eval2禁止使用隐式eval
no-inline-comments0禁止行内备注
no-inner-declarations[2, “functions”]禁止在块语句中使用声明（变量或函数）
no-invalid-regexp2禁止无效的正则表达式
no-invalid-this2禁止无效的this，只能用在构造器，类，对象字面量
no-irregular-whitespace2不能有不规则的空格
no-iterator2禁止使用__iterator__ 属性
no-label-var2label名不能与var声明的变量名相同
no-labels2禁止标签声明
no-lone-blocks2禁止不必要的嵌套块
no-lonely-if2禁止else语句内只有if语句
no-loop-func1禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
no-mixed-requires[0, false]声明时不能混用声明类型
no-mixed-spaces-and-tabs[2, false]禁止混用tab和空格
linebreak-style[0, “windows”]换行风格
no-multi-spaces0不能用多余的空格
no-multi-str2字符串不能用换行
no-multiple-empty-lines[1, {"max3}]
no-native-reassign2不能重写native对象
no-negated-in-lhs2in 操作符的左边不能有!
no-nested-ternary0禁止使用嵌套的三目运算
no-new1禁止在使用new构造一个实例后不赋值
no-new-func1禁止使用new Function
no-new-object2禁止使用new Object()
no-new-require2禁止使用new require
no-new-wrappers2禁止使用new创建包装实例，new String new Boolean new Number
no-obj-calls2不能调用内置的全局对象，比如Math() JSON()
no-octal2禁止使用八进制数字
no-octal-escape2禁止使用八进制转义序列
no-param-reassign2禁止给参数重新赋值
no-path-concat0node中不能使用__dirname或__filename做路径拼接
no-plusplus0禁止使用++，–
no-process-env0禁止使用process.env
no-process-exit0禁止使用process.exit()
no-proto2禁止使用__proto__属性
no-redeclare2禁止重复声明变量
no-regex-spaces2禁止在正则表达式字面量中使用多个空格 /foo bar/
no-restricted-modules0如果禁用了指定模块，使用就会报错
no-return-assign1return 语句中不能有赋值表达式
no-script-url0禁止使用javascript:void(0)
no-self-compare2不能比较自身
no-sequences0禁止使用逗号运算符
no-shadow2外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
no-shadow-restricted-names2严格模式中规定的限制标识符不能作为声明时的变量名使用
no-spaced-func2函数调用时 函数名与()之间不能有空格
no-sparse-arrays2禁止稀疏数组， [1,2]
no-sync0nodejs 禁止同步方法
no-ternary0禁止使用三目运算符
no-trailing-spaces1一行结束后面不要有空格
no-this-before-super0在调用super()之前不能使用this或super
no-throw-literal2禁止抛出字面量错误 throw “error”;
no-undef2不能有未定义的变量
no-undef-init2变量初始化时不能直接给它赋值为undefined
no-undefined2不能使用undefined
no-unexpected-multiline2避免多行表达式
no-underscore-dangle1标识符不能以_开头或结尾
no-unneeded-ternary2禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
no-unreachable2不能有无法执行的代码
no-unused-expressions2禁止无用的表达式
no-unused-vars[2, {“vars”: “all”, “args”: “after-used”}]不能有声明后未被使用的变量或参数
no-use-before-define2未定义前不能使用
no-useless-call2禁止不必要的call和apply
no-void2禁用void操作符
no-var0禁用var，用let和const代替
no-warning-comments[1, { “terms”: [“todo”, “fixme”, “xxx”], “location”: “start” }]不能有警告备注
no-with2禁用with
array-bracket-spacing[2, “never”]是否允许非空数组里面有多余的空格
arrow-parens0箭头函数用小括号括起来
arrow-spacing0=>的前/后括号
accessor-pairs0在对象中使用getter/setter
block-scoped-var0块语句中使用var
brace-style[1, “1tbs”]大括号风格
callback-return1避免多次调用回调什么的
camelcase2强制驼峰法命名
comma-dangle[2, “never”]对象字面量项尾不能有逗号
comma-spacing0逗号前后的空格
comma-style[2, “last”]逗号风格，换行时在行首还是行尾
complexity[0, 11]循环复杂度
computed-property-spacing[0, “never”]是否允许计算后的键名什么的
consistent-return0return 后面是否允许省略
consistent-this[2, “that”]this别名
constructor-super0非派生类不能调用super，派生类必须调用super
curly[2, “all”]必须使用 if(){} 中的{}
default-case2switch语句最后必须有default
dot-location0对象访问符的位置，换行的时候在行首还是行尾
dot-notation[0, { “allowKeywords”: true }]避免不必要的方括号
eol-last0文件以单一的换行符结束
eqeqeq0必须使用全等
func-names0函数表达式必须有名字
func-style[0, “declaration”]函数风格，规定只能使用函数声明/函数表达式
generator-star-spacing0生成器函数*的前后空格
guard-for-in0for in循环要用if语句过滤
handle-callback-err0nodejs 处理错误
id-length0变量名长度
indent[2, 2]缩进风格
init-declarations0声明时必须赋初值
key-spacing[0, { “beforeColon”: false, “afterColon”: true }]对象字面量中冒号的前后空格
lines-around-comment0行前/行后备注
max-depth[0, 4]嵌套块深度
max-len[0, 80, 4]字符串最大长度
max-nested-callbacks[0, 2]回调嵌套深度
max-params[0, 3]函数最多只能有3个参数
max-statements[0, 10]函数内最多有几个声明
new-cap2函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
new-parens2new时必须加小括号
newline-after-var2变量声明后是否需要空一行
object-curly-spacing[0, “never”]大括号内是否允许不必要的空格
object-shorthand0强制对象字面量缩写语法
one-var1连续声明
operator-assignment[0, “always”]赋值运算符 += -=什么的
operator-linebreak[2, “after”]换行时运算符在行尾还是行首
padded-blocks0块语句内行首行尾是否要空行
prefer-const0首选const
prefer-spread0首选展开运算
prefer-reflect0首选Reflect的方法
quotes[1, “single”]引号类型 `` “” ‘’
quote-props[2, “always”]对象字面量中的属性名是否强制双引号
radix2parseInt必须指定第二个参数
id-match0命名检测
require-yield0生成器函数必须有yield
semi[2, “always”]语句强制分号结尾
semi-spacing[0, {“before”: false, “after”: true}]分号前后空格
sort-vars0变量声明时排序
space-after-keywords[0, “always”]关键字后面是否要空一格
space-before-blocks[0, “always”]不以新行开始的块{前面要不要有空格
space-before-function-paren[0, “always”]函数定义时括号前面要不要有空格
space-in-parens[0, “never”]小括号里面要不要有空格
space-infix-ops0中缀操作符周围要不要有空格
space-return-throw-case2return throw case后面要不要加空格
space-unary-ops[0, { “words”: true, “nonwords”: false }]一元运算符的前/后要不要加空格
spaced-comment0注释风格要不要有空格什么的
strict2使用严格模式
use-isnan2禁止比较时使用NaN，只能用isNaN()
valid-jsdoc0jsdoc规则
valid-typeof2必须使用合法的typeof的值
vars-on-top2var必须放在作用域顶部
wrap-iife[2, “inside”]立即执行函数表达式的小括号风格
wrap-regex0正则表达式字面量用小括号包起来
yoda[2, “never”]禁止尤达条件

Tips

error level数值表示说明
off0关闭规则
warn1开启规则, 使用警告 程序不会退出
error2开启规则, 使用错误 程序退出

更多的规则可以参考官网的rules。

结尾语

写到这里，eslint的一些东西了解的也差不多啦，在前端的领域中，其实挺复杂的，所以我不建议大家去记，只要大家会配置就行啦，再说那么api 怎么也记不过来，高端的程师，借用各种api 文档，写出自己的一些配置。这篇文章只是在定制前端规则的介绍，一些基础的部分，去了解，让大家有个好的印象，下文张，偏向代码，直接定制我的cicada(禅思)的eslint 的配置。
定制团队的eslint rules(二):更新中…

   

更多内容详见微信公众号：Python测试和开发

Python测试和开发

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/phyger/p/14202454.html