ESLint
ESLint 是一个开源的 Javascript 代码检测工具,通过将 js 代码解析成抽象语法树(AST),分析并给与代码质量(如一些方法的使用方式不对)和代码风格(缩进,引号等等)两方面的提示。这样就可以在编码过程中发现问题,而不是在代码的执行过程中。
ESLint
与vscode-ESLint
插件的区别
ESLint 是一个 npm 包,安装之后,我们可以通过相应的命令来分细或是修复不规范代码
vscode-ESLint 是 vscode 插件,会在写代码的过程中直接标注格式错误
- 安装:
yarn add eslint -D
- 创建一个 eslint 配置文件:
.eslintrc
(json 形式) 或者.eslintrc.js
(个人觉得后者更灵活)
// .eslintrc.js
module.exports = {
// rules: 代码规则
rules: {
semi: 'error' // 行尾必须有分号
}
}
- 创建一个
test.js
js var a = 123
- 检测一下
npx eslint test.js
$ npx eslint test.js 1:12 error Missing semicolon semi // 少了个分号
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the --fix option.
eslint 分析出代码有问题, 那么如何修复呢,对于本例,我们当然可以直接加上分号,但是对于动辄几百上千行的代码,显然十分麻烦,eslint 提供了的一件修复的命令
- 修复:
npx eslint test.js --fix
var a = 123; // 分号自动加上了
那文件多的时候不还是得一个个文件操作,方法总比困难多,后面讲到。
每次都需要手动敲命令检测和修复显然是不显示的,所以各个编辑器都有对应的插件来将 eslint 集成到编辑器。以 vscode 为例 安装: 应用商店搜索安装 eslint 安装完我们会发现代码出现报错了:
![9aa4cd0b88822da06fb189ce5ed9e34d.png](https://i-blog.csdnimg.cn/blog_migrate/4d1e27d3891a557abcf53744819dde5a.png)
不用命令去检测了,直接会报错,接下来的问题是怎么一键修复了。
我们知道,vscode 自带代码格式化 js 的功能,另外也可以安装格式化的插件,其中以 prettier 和 beautify 最常见。
安装 prettier 后,执行 shift + alt + f
格式化之前的代码,但是会发现并没有什么变化,因为 preitter 也要配置规则
![7403474d5c712571a5c477dc3b8314b8.png](https://i-blog.csdnimg.cn/blog_migrate/b689774e457a47481d449fe390ae8d3f.png)
再格式化一下,就得到了分号。
那么问题来了假如说这个人根据习惯,在编辑器上设置行尾不要分号,但是做的某个项目中的.eslintrc.js 配置的规范是要分号,那该怎么办呢。临时改编辑器配置行是行,如果要同时进行多个项目开发,但是大家的规则不一样呢,这个时候,我们可以配置局部方案:
新建一个 prettier.config.js
(同样也支持 json 形式),在里面写入
module.exports = {
semi: true // 行尾添加分号
}
再去格式化,发现即使把编辑器的规则设定为不需要分号,也会加上。所以这样在项目中有的配置,就不会用编辑器的,也就不会被项目外部所影响。
prettier.config.js
解决了格式化配置冲突的问题
但是我们还要再看一种情况:
.eslintrc.js
配置rules.semi: never // 不要分号
prettier.config.js
配置semi: true // 需要分好
再执行格式化,结果是分号加上了,但是代码上提示错误
![35b2b3a5bef32d6e4b71d84fe879febf.png](https://i-blog.csdnimg.cn/blog_migrate/634cdec71e5ffede34c8bf73b2eb6905.png)
此时格式化的规则与 eslint 校验规则冲突了,这种情况肯定是不好的,最好是能够让他们能够”协同“,共用一套规则。
那么最好是让 eslint 能直接使用 prettier 的规则,不巧真的可以:
yarn add -D prettier eslint-plugin-prettier eslint-config-prettier
停一下,我们先来看看这几个插件- prettier (npm) prettier 是格式化的 npm 包,与 vscode-prettier 插件的区别类似于 eslint 与 vscode-eslint 插件的区别。prettier 包含一些命令,我们可以使用它们去检测和格式化代码:
如 npx prettier --write .
可以进行全局代码格式化,而 vscode-prettier 是我们在编辑器层面可以用来进行检测和格式化的工具
eslint-plugin-prettier
它是将 eslint 与 prettier 集成的工具,通过它我们就可以实现,eslint 用 prettier 的规则来检测代码,现在,我们需要改一下 eslint 配置:
js // .eslintrc.js module.exports = { + plugins: ["prettier"], // 引入`eslint-plugin-prettier`插件 rules: { - semi: true, + "prettier/prettier": "error" // 使用 prettier 规则 }, };
然后我们就只需要在.prettierrc.js
中配置规则就可以了:
js // .prettierrc.js module.exports = { semi: true, endOfLine: 'auto' }
现在执行下格式化操作:npx prettier --write .
or shift + alt + f
![855daf1271984d90eb7d770f2700956e.png](https://i-blog.csdnimg.cn/blog_migrate/bf6e9b4db4ba84bd1f2a19c9d65789bc.png)
没有分号,eslint 会提示错误,执行格式化后,eslint 错误消失,两者公用一个规则,问题解决
然而 eslint 中本身是可以配置规则的呀,那么,假如出现这种情况,不是打架了么:
```js // .eslintrc.js module.exports = { plugins: ['prettier'], rules: { 'prettier/prettier': 'error', semi: false // 不要分号 } }
// .prettierrc.js module.exports = { semi: true, // 要分号 endOfLine: 'auto' } ```
我们来格式化一下
![8d970c092c5a8f8cf3a5debb3e45bbe5.png](https://i-blog.csdnimg.cn/blog_migrate/707506ea4dfe9efd16c9f78b1b8632c6.png)
没错,eslint 跟 prettier 说:不是想要的,你做的再多也没用 !
那么,eslint-config-prettier
要上场了
eslint-config-prettier
这个插件就是关闭与 prettier 不一样规则的,当然它也会关掉所有不必要的规则(比如一些已经过时的规则)
js module.exports = { plugins: ["prettier"], + extends: ["prettier"], // 使用 eslint-config-prettier 拓展 rules: { "prettier/prettier": "error", semi: false } };
运行下:npx eslint --print-config path/to/main.js | npx eslint-config-prettier-check
$ npx eslint --print-config test.js | npx eslint-config-prettier-check
The following rules are unnecessary or might conflict with Prettier:
·semi
提示 eslint 的 semi 规则与 prettier 相冲,手动解决
那么至此 eslint+prettier+vscode-prettier 的简单搭配就完成了,配上完整代码:
// .eslintrc.js
module.exports = {
plugins: ['prettier'], // 使用 plugin 插件
extends: ['prettier'], // 使用 eslint-config-prettier 解决与 prettier 冲突的配置
rules: {
'prettier/prettier': 'error' // 使用 prettier 插件提供的规则校验
}
}
// .prettierrc.js
module.exports = {
// 配置规范
semi: false,
endOfLine: 'auto'
}