eslint与prettier以及vetur的关系,以及它们都是在vscode里面如何起作用的。
1.三者都是干什么的
(1)eslint
eslint它是一个代码检测工具,用来检测你代码中的不规范,可以统一项目项目的代码规范。
如果你的代码不符合规范要求,就会直接在文件中出现不同程度的提示信息。具体是:
error
:错误,报错文件名在vscode里会直接变红,直到错误改掉。warning
:警告,报警告的文件会在vscode里变成警告的黄色。off
:这个规则不进行校验,即关闭这个校验。
(2)prettier
prettier它是一个代码格式化工具,以某种规则来格式化你的代码。
(3)vetur
这是vue项目中必装的一个vscode插件了,它的功能具体有:代码高亮、错误检查、格式化、debugger以及一些vue文件的定制功能。
不过虽然vetur同时有错误检查以及格式化,但是代码检测在项目中还是通常用eslint;而格式化工具则是用prettier。vetur则更多的是用到了它的代码高亮等功能
2.vscode中如何指定代码格式化使用的插件(使用prettier)以及如何设置prettier的配置文件
2.1 如何使用prettier为编辑器的默认格式化插件
vscode中右击某个文件会出现菜单栏,上面有默认格式化的选项,以及指定格式化的插件选项:
后面那个以...格式化代码
选项是在你的vscode里有两个及以上格式化插件时才会出现,当点击这个选项时,会有选项供你选择以某个方式格式当前文件:
但是只格式化某个文件很明显不符合项目代码规范,所以我们需要配置全局的格式化插件,这里以.vue
文件为例,先打开vscode的settings.json文件:
在里面加入这个选项,表示vue文件的默认格式化插件使用prettier
。其实其他类型的文件同理,只不过把[vue]
换成了[js]
、[html]
、[css]
这样。
这时候再右键点击.vue
文件选择以...格式化代码
选项,prettier
插件就会成为默认值了:
2.2 如何配置prettier的配置文件。
prettier支持.js
,.json
,.yml
等类型的文件,具体可以见官方文档。
以json为例,就是一个json格式的文件,直接在项目根目录创建一个名为:.prettierrc.json
的文件即可。
{
...
}
不像eslint,prettier的配置文件中只有规则,无需其他配置。
比如这里我希望格式化时删掉所有句尾不必要的分号,可以这么配置:
右击选择格式化文档,就可以了。
所有的prettier可配置项见官方文档
3. eslint如何进行校验
eslint的配置文件也支持.js
,.json
,yml
格式。
3.1 已有eslint配置文件的项目。
在已有eslint配置文件的项目中,只需要在配置文件的"rules"
选项中,按照官方文档的各种配置按需求配置即可。
3.2 没有eslint配置,希望加上eslint校验。
如果一个项目没有用过eslint,也没有eslint配置文件。就需要在项目中执行如下命令:
npx eslint --init
npx就是执行node_module
文件夹中指定包的指定命令。项目中没有npx或eslint包执行这个命令会自动安装的。当两个包安装成功以后,就会来到初始化eslint的选项:
(1)校验等级。自己按需求选即可
(2)什么样的模块化。一般第一个
(3)哪个框架
(4)是否用到了ts
(5)运行在浏览器还是node环境
(6)格式化文件的类型
(7)需要安装包
在选择结束以后可能会需要安装某个包。选yes就会自动安装,否则暂不安装,有时候选yes会安装失败,这时候需要你把这个包名称复制下来使用npm
或者yarn
命令手动安装。
步骤走完结束以后就会在项目根目录创建一个.eslint
开头的配置文件,将你需要配置的规则在rules
选项中设置即可。
4.prettier 与eslint冲突问题
有时候格式化使用的规则与eslint校验规则冲突就可能出现格式化以后eslint报错的问题。就以下面的配置及代码为例:
这里针对的是js语句结尾是否需要分号的规则。
可以看到,prettier规则规定会在格式化时删除语句结尾的分号。但是eslint对分号的规则是在语句结尾应该一直有分号,否则就会报error
。
此时尚未格式化但是已经保存的vue文件中所有的语句结尾都是有分号的,且文件无报错,一片和谐。但是如果此时按下Shift+Alt+F
或者右键选择格式化文档,所有的分号会被prettier删掉:
保存文件以后,可以看到没有分号的位置全部都有错误提示,且当前文件的文件名也变成了红色,提示这个文件有格式错误。
鼠标移到报错位置可以看到具体报错:
知道了冲突的原因就容易改了,可以将prettier和eslint的配置统一即可。
5.文件保存自动格式化问题
有时候文件在保存时自动格式化了,再加上prettier与eslint的规则配置冲突,就会导致无法通过编译的情况,这里是因为vscode配置了保存自动格式化,就是settings.json的如下配置:
将这个选项关闭即可手动控制是否格式化代码了。