ESLint配置（⼀）：eslint默认及⾃定义规则介绍，上传⾃⼰的eslint-conf。。。ESLint 配置
⼀、eslint 安装
1、全局安装
npm i -g eslint
全局安装的好处是，在任何项⽬我们都可以使⽤eslint的全局命令进⾏代码规则操作，但是这对我们的意义并不⼤，后续会详细介绍；
全局安装之后，要求相关的eslint插件页必须全局安装，这对多⼈开发项⽬来说会⽐项⽬安装更加繁琐。所以，我们这⾥采⽤在项⽬上安装eslint：
2、项⽬安装
重启sqlserver服务
npm i -D eslint
3、编辑器安装，后续⽂章会有介绍
⼆、eslint 定义规则
1、创建 .eslintrc.js ⽂件
可以使⽤ ./node_modules/.bin/eslint --init 创建⽂件
.eslintrc.* ⽂件⽀持 .js .yaml .yal .json等格式的配置⽂件，这⾥使⽤ .js⽂件
在 package.json ⾥创建⼀个 eslintConfig 属性，在那⾥，同样可以定义你的配置
如果 .eslintrc.js 和 package.json⾥的 eslintConfig 同时存在，则只读取 .eslintrc.js⽂件
2、eslint 选项说明
"root":true
默认情况下，ESLint 会在所有⽗级⽬录⾥寻配置⽂件，⼀直到根⽬录。如果发现配置⽂件中有 “root”: true，它就会停⽌在⽗级⽬录中寻。
"parserOptions":{
"parser":"babel-eslint",// 解析器，默认使⽤Espree
"ecmaVersion":6,// ⽀持es6语法，但并不意味着同时⽀持新的 ES6 全局变量或类型（⽐如 Set 等新类型）
"sourceType":"module",// 指定来源的类型，"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
// 使⽤的额外的语⾔特性
"ecmaFeatures":{
"jsx":true,// 启⽤ JSX
"globalReturn":true,// 允许在全局作⽤域下使⽤ return 语句
"impliedStrict":true,// 启⽤全局 strict mode (如果 ecmaVersion 是 5 或更⾼)
"experimentalObjectRestSpread":true,// 启⽤实验性的 object rest/spread properties ⽀持。(重要：这是⼀个实验性的功能，在未来可能会有明显改变。建议你写的规则不要依赖该功能，除⾮当它发⽣改变时你愿意承担维护成本。)
}开源代码审核
}
解析器选项可以在 parserOptions 属性设置。设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语⾔选项默认都是 false。
如上：
"env":{
es6:true,// 启⽤ ES6 语法⽀持以及新的 ES6 全局变量或类型
node:true,// Node.js 全局变量和 Node.js 作⽤域
browser:true,// 浏览器全局变量
jquery:true// jQuery 全局变量
c++递归函数流程图}
"globals":{
template:false,// false 不允许被重写
_util:false
}
当访问当前源⽂件内未定义的变量时，no-undef 规则将发出警告。如果你想在⼀个源⽂件⾥使⽤全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。如上：
"plugins":[jquery下载文件插件
"html"// 此插件⽤来识别.html 和 .vue⽂件中的js代码
]
ESLint ⽀持使⽤第三⽅插件。在使⽤插件之前，你必须使⽤ npm 安装它。如：npm i -D eslint-plugin-html。在配置⽂件⾥配置插件时，可以使⽤ plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。如上：
"extends":"eslint:recommended"
"rules":{
'indent':[2,4],// 强制使⽤⼀致的缩进
'eqeqeq':[2,'always'],// 要求使⽤ === 和 !==
'semi':[2,'never'],// 要求或禁⽌使⽤分号代替 ASI
'quotes':[2,'single']// 强制使⽤⼀致的反勾号、双引号或单引号
}
ESLint 附带有⼤量的规则。你可以在rules选项中设置，设置的规则将覆盖上⾯继承的默认规则。要改变⼀个规则设置，你必须将规则 ID 设置为下列值之⼀：jetbrains注册
“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使⽤警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使⽤错误级别的错误：error (当被触发的时候，程序会退出)
三、eslint 代码检测和修复
这⾥讲的是使⽤ eslint 命令⾏来操作，后续会讲到如何⽤编辑器提升代码效率
1、代码检测
项⽬根⽬录运⾏ eslint，检测指定⽂件，⽀持 glob 模式
./node_modules/.bin/eslint index.js
forget about和forget的区别
检测index.js⽂件，如下，有⼀个错误：多余的分号（基于semi规则）。并告诉我们此规则可以通过 --fix 命令修复。
指定⽂件后缀名
./node_modules/.bin/eslint --ext .js,.html src
⽬前，告诉 ESLint 哪个⽂件扩展名要检测的唯⼀⽅法是使⽤ --ext 命令⾏选项指定⼀个逗号分隔的扩展名列表。注意，该标记只在与⽬录⼀起使⽤时有效，如果使⽤⽂件名或 glob 模式，它将会被忽略。
2、代码修复
项⽬根⽬录运⾏：
./node_modules/.bin/eslint index.js --fix
四、eslint更多配置⽅式
完整的 配置层次结构，从最⾼优先级最低的优先级，如下：
1、⾏内配置
/*eslint-disable*/、/*eslint-enable*/
/*global*/
/*eslint*/
/*eslint-env*/
2、命令⾏选项
--global
--rule
--env
-
c、--config
3、项⽬级配置
与要检测的⽂件在同⼀⽬录下的 .eslintrc.\* 或 package.json ⽂件
继续在⽗级⽬录寻 .eslintrc 或 package.json⽂件，直到根⽬录（包括根⽬录）或直到发现⼀个有"root": true的配置。
4、如果不是（1）到（3）中的任何⼀种情况，退回到~/.eslintrc中⾃定义的默认配置。
五、.eslintignore 忽略⽂件
1、定义及作⽤
在项⽬根⽬录创建⼀个 .eslintignore ⽂件告诉 ESLint 去忽略特定的⽂件和⽬录。
2、忽略规则
.eslintignore ⽂件是⼀个纯⽂本⽂件，其中的每⼀⾏都是⼀个 glob 模式表明哪些路径应该忽略检测。如：
/dist/
/*.js
eslint总是忽略 /node_modules/\* 和 /bower_components/\* 中的⽂件
3、⽤eslint命令检查忽略⽂件
./node_modules/.bin/eslint index.js
六、创建⾃⼰的规则风格⽂件
1、命名
eslint-config-*// 如：eslint-config-vui
2、上传
参照：
3、下载
npm i -D eslint-config-vui
4、使⽤
在继承规则 extends 属性中定义⾃⼰上传的规则名，可以忽略 eslint-config- 字符，如下：
extends:['vui']
5、eslint-config-vui 规则源码地址（记得给星哦）
七、使⽤编辑器插件标识错误以及⾃动修复代码
为什么使⽤编辑器插件：上述讲到的使⽤ eslint 命令来检测和修复代码的操作显然⾮常繁琐，我们需要能够⾃动修复代码的⼯具，相关编辑器都提供了 eslint 插件。
参考：
⼋、使⽤构建⼯具检测代码
为什么：以上⽅式，包括后续讲到的使⽤编辑器修复代码，都只是⾃我书写代码的规范意识⽽已，在多⼈开发时如何强制性的要求提交的代码是符合我们⾃定的规范呢？这就需要在构建⼯具做相应的配置。
参考：
系列⽂章
ESLint配置（⼀）：eslint默认及⾃定义规则介绍，上传⾃⼰的eslint-config-*风格⽂件

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