js代码规范之Eslint安装与配置详解
什么是 ESLint
js中文正则表达式
ESLint（中⽂站点）是⼀个开源的 JavaScript 代码检查⼯具，使⽤ Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 ⽉创建。ESLint 的初衷是为了让程序员可以创建⾃⼰的检测规则，使其可以在编码的过程中发现问题⽽不是在执⾏的过程中。ESLint 的所有规则都被设计成可插⼊的，为了⽅便使⽤，ESLint 内置了⼀些规则，在这基础上也可以增加⾃定义规则。
⼀、Eslint安装
1.全局安装
如果你想使 ESLint 适⽤于你所有的项⽬，建议全局安装 ESLint
$ npm install -g eslint
初始化配置⽂件
$ eslint --init
2.局部安装
$ npm install eslint --save-dev
初始化配置⽂件
$ ./node_modules/.bin/eslint --init
3.webpack中配置eslint
需要安装eslint-loader解析.eslint⽂件
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: solve('eslint'),
},
loader: solve('eslint-loader'),
},
],
include: paths.appSrc, //也可以⽤exclude排除不需要检查的⽬录或者⽤.eslintignore
},
⼆、ESlint配置
1.配置⽂件类型与优先级顺序
.
eslintrc.js - 使⽤ .eslintrc.js 然后输出⼀个配置对象
.eslintrc.yaml - 使⽤ .eslintrc.yaml 或 .l 去定义配置的结构。
.l
.eslintrc.json - 使⽤ .eslintrc.json 去定义配置的结构，ESLint 的 JSON ⽂件允许 JavaScript 风格的注释
.eslintrc（已弃⽤）
package.json - 在 package.json ⾥创建⼀个 eslintConfig属性，在那⾥定义你的配置
2.plugin属性
ESLint ⽀持使⽤第三⽅插件（以eslint-plugin-开头的npm包），在使⽤插件之前，必须使⽤ npm 安装。如eslint-plugin-react、eslint-plugin-vue等
"plugins": [
"react"
],
"extends": [
"eslint:recommended"
],
"rules": {
"no-set-state": "off"
}
}
⼀个配置⽂件可以被基础配置中的已启⽤的规则继承。可以使⽤以下规则继承：（1）"eslint:recommended"
继承Eslint中推荐的（打钩的）规则项
"extends": "eslint:recommended",
"rules": {
}
}
（2）使⽤别⼈写好的规则包（以eslint-config-开头的npm包），如ports = {
"extends": "standard",
"rules": {
}
}
（3）使⽤Eslint插件中命名的配置
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-set-state": "off"
}
}
（4）使⽤"eslint:all"，继承Eslint中所有的核⼼规则项
"extends": "eslint:all",
"rules": {
// override default options
"comma-dangle": ["error", "always"],
"indent": ["error", 2],
"no-cond-assign": ["error", "always"],
// disable now, but enable in the future
"one-var": "off", // ["error", "never"]
// disable
"init-declarations": "off",
"no-console": "off",
"no-inline-comments": "off",
}
}
4.rules属性(根据⾃⼰的需要进⾏配置)
（1）Eslint部分核⼼规则
"rules": {
/**
**这些规则与 JavaScript 代码中可能的错误或逻辑错误有关
**/
"for-direction":"error",//强制 “for” 循环中更新⼦句的计数器朝着正确的⽅向移动
"getter-return":"error",//强制在 getter 属性中出现⼀个 return 语句
"no-await-in-loop":"error",//禁⽌在循环中出现 await
"no-compare-neg-zer":"error",//禁⽌与 -0 进⾏⽐较
"no-cond-assign":[//禁⽌在条件语句中出现赋值操作符
"error",
"always"
],
"no-console":[//禁⽤ console
"error"
//      { "allow": ["warn", "error"] }
],
"no-constant-condition":"error",//禁⽌在条件中使⽤常量表达式
"no-control-regex":"error",//禁⽌在正则表达式中使⽤控制字符
"no-debugger":"error",//禁⽤ debugger
"no-dupe-args":"error",//禁⽌在 function 定义中出现重复的参数
"no-dupe-keys":"error",//禁⽌在对象字⾯量中出现重复的键
"no-duplicate-case":"error",//禁⽌重复 case 标签
"no-empty":"error",//禁⽌空块语句
"no-empty-character-class":"error",//禁⽌在正则表达式中出现空字符集
"no-ex-assign":"error",//禁⽌对 catch ⼦句中的异常重新赋值
"no-extra-boolean-cast":"error",//禁⽌不必要的布尔类型转换
"no-extra-parens":"error",//禁⽌冗余的括号
"no-extra-semi":"error",//禁⽤不必要的分号
"no-func-assign":"error",//禁⽌对 function 声明重新赋值
"no-inner-declarations":"error",//禁⽌在嵌套的语句块中出现变量或 function 声明
"no-invalid-regexp":"error",//禁⽌在 RegExp 构造函数中出现⽆效的正则表达式
"no-irregular-whitespace":"error",//禁⽌不规则的空⽩
"no-obj-calls":"error",//禁⽌将全局对象当作函数进⾏调⽤
"no-prototype-builtins":"error",//禁⽌直接使⽤ Object.prototypes 的内置属性
"no-regex-spaces":"error",//禁⽌正则表达式字⾯量中出现多个空格
"no-sparse-arrays": "error",//禁⽤稀疏数组
"no-template-curly-in-string":"error",//禁⽌在常规字符串中出现模板字⾯量占位符语法
"no-unexpected-multiline":"error",//禁⽌使⽤令⼈困惑的多⾏表达式
"no-unreachable":"error",//禁⽌在 return、throw、continue 和 break 语句后出现不可达代码    "no-unsafe-finally":"error",//禁⽌在 finally 语句块中出现控制流语句
"no-unsafe-negation":"error",//禁⽌对关系运算符的左操作数使⽤否定操作符
"use-isnan":"error",//要求调⽤ isNaN()检查 NaN
"valid-jsdoc":"error",//强制使⽤有效的 JSDoc 注释
"valid-typeof":"error",//强制 typeof 表达式与有效的字符串进⾏⽐较
/**
**最佳实践
**/
"accessor-pairs":"error",//强制getter/setter成对出现在对象中
"array-callback-return":"error",//强制数组⽅法的回调函数中有 return 语句
"block-scoped-var":"error",//把 var 语句看作是在块级作⽤域范围之内
"class-methods-use-this":"error",//强制类⽅法使⽤ this
"complexity":"error"//限制圈复杂度
.....
}
（2）eslint-plugin-vue中的规则
'rules': {
/* for vue */
// 禁⽌重复的⼆级键名
/
/ @off 没必要限制
'vue/no-dupe-keys': 'off',
// 禁⽌出现语法错误
'vue/no-parsing-error': 'error',
// 禁⽌覆盖保留字
'vue/no-reservered-keys': 'error',
// 组件的 data 属性的值必须是⼀个函数
// @off 没必要限制
'vue/no-shared-component-data': 'off',
// 禁⽌ <template> 使⽤ key 属性
// @off 太严格了
'vue/no-template-key': 'off',
// render 函数必须有返回值
'vue/require-render-return': 'error',
// prop 的默认值必须匹配它的类型
// @off 太严格了
'vue/require-valid-default-prop': 'off',
// 计算属性必须有返回值
'vue/return-in-computed-property': 'error',    // template 的根节点必须合法
'vue/valid-template-root': 'error',
// v-bind 指令必须合法
'vue/valid-v-bind': 'error',
/
/ v-cloak 指令必须合法
'vue/valid-v-cloak': 'error',
// v-else-if 指令必须合法
'vue/valid-v-else-if': 'error',
// v-else 指令必须合法
'vue/valid-v-else': 'error',
// v-for 指令必须合法
'vue/valid-v-for': 'error',
// v-html 指令必须合法
'vue/valid-v-html': 'error',
// v-if 指令必须合法
'vue/valid-v-if': 'error',
// v-model 指令必须合法
'vue/valid-v-model': 'error',
// v-on 指令必须合法
'vue/valid-v-on': 'error',
// v-once 指令必须合法
'vue/valid-v-once': 'error',
// v-pre 指令必须合法
'vue/valid-v-pre': 'error',
// v-show 指令必须合法
'vue/valid-v-show': 'error',
/
/ v-text 指令必须合法
'vue/valid-v-text': 'error',
//
// 最佳实践
//
// @fixable html 的结束标签必须符合规定
// @off 有的标签不必严格符合规定，如 <br> 或 <br/> 都应该是合法的    'vue/html-end-tags': 'off',
// 计算属性禁⽌包含异步⽅法
'vue/no-async-in-computed-properties': 'error',
// 禁⽌出现难以理解的 v-if 和 v-for
'vue/no-confusing-v-for-v-if': 'error',
/
/ 禁⽌出现重复的属性
'vue/no-duplicate-attributes': 'error',
// 禁⽌在计算属性中对属性修改
// @off 太严格了
'vue/no-side-effects-in-computed-properties': 'off',
// 禁⽌在 <textarea> 中出现 {{message}}
'vue/no-textarea-mustache': 'error',
// 组件的属性必须为⼀定的顺序
'vue/order-in-components': 'error',
// <component> 必须有 v-bind:is
'vue/require-component-is': 'error',
/
/ prop 必须有类型限制
// @off 没必要限制
'vue/require-prop-types': 'off',
// v-for 指令的元素必须有 v-bind:key
'vue/require-v-for-key': 'error',
//
// 风格问题
//
// @fixable 限制⾃定义组件的属性风格
// @off 没必要限制
'vue/attribute-hyphenation': 'off',
/
/ html 属性值必须⽤双引号括起来
'vue/html-quotes': 'error',
// @fixable 没有内容时，组件必须⾃闭和
// @off 没必要限制
'vue/html-self-closing': 'off',
// 限制每⾏允许的最多属性数量
// @off 没必要限制
'vue/max-attributes-per-line': 'off',
// @fixable 限制组件的 name 属性的值的风格
// @off 没必要限制
'vue/name-property-casing': 'off',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。