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中右击某个文件会出现菜单栏,上面有默认格式化的选项,以及指定格式化的插件选项:

image

后面那个以...格式化代码选项是在你的vscode里有两个及以上格式化插件时才会出现,当点击这个选项时,会有选项供你选择以某个方式格式当前文件:

image

但是只格式化某个文件很明显不符合项目代码规范,所以我们需要配置全局的格式化插件,这里以.vue文件为例,先打开vscode的settings.json文件:

image

在里面加入这个选项,表示vue文件的默认格式化插件使用prettier。其实其他类型的文件同理,只不过把[vue]换成了[js][html][css]这样。

这时候再右键点击.vue文件选择以...格式化代码选项,prettier插件就会成为默认值了:

image

2.2 如何配置prettier的配置文件。

prettier支持.js,.json,.yml等类型的文件,具体可以见官方文档。

以json为例,就是一个json格式的文件,直接在项目根目录创建一个名为:.prettierrc.json的文件即可。

{
	...
}

不像eslint,prettier的配置文件中只有规则,无需其他配置。

比如这里我希望格式化时删掉所有句尾不必要的分号,可以这么配置:

image

右击选择格式化文档,就可以了。

image

所有的prettier可配置项见官方文档

3. eslint如何进行校验

eslint的配置文件也支持.js,.json,yml格式。

3.1 已有eslint配置文件的项目。

在已有eslint配置文件的项目中,只需要在配置文件的"rules"选项中,按照官方文档的各种配置按需求配置即可。

image

3.2 没有eslint配置,希望加上eslint校验。

如果一个项目没有用过eslint,也没有eslint配置文件。就需要在项目中执行如下命令:

npx eslint --init

npx就是执行node_module文件夹中指定包的指定命令。项目中没有npx或eslint包执行这个命令会自动安装的。当两个包安装成功以后,就会来到初始化eslint的选项:

(1)校验等级。自己按需求选即可

image

(2)什么样的模块化。一般第一个

image

(3)哪个框架

image

(4)是否用到了ts

image

(5)运行在浏览器还是node环境

image

(6)格式化文件的类型

image

(7)需要安装包

image

在选择结束以后可能会需要安装某个包。选yes就会自动安装,否则暂不安装,有时候选yes会安装失败,这时候需要你把这个包名称复制下来使用npm或者yarn命令手动安装。

步骤走完结束以后就会在项目根目录创建一个.eslint开头的配置文件,将你需要配置的规则在rules选项中设置即可。

4.prettier 与eslint冲突问题

有时候格式化使用的规则与eslint校验规则冲突就可能出现格式化以后eslint报错的问题。就以下面的配置及代码为例:

image

这里针对的是js语句结尾是否需要分号的规则。

可以看到,prettier规则规定会在格式化时删除语句结尾的分号。但是eslint对分号的规则是在语句结尾应该一直有分号,否则就会报error

此时尚未格式化但是已经保存的vue文件中所有的语句结尾都是有分号的,且文件无报错,一片和谐。但是如果此时按下Shift+Alt+F或者右键选择格式化文档,所有的分号会被prettier删掉:

image

保存文件以后,可以看到没有分号的位置全部都有错误提示,且当前文件的文件名也变成了红色,提示这个文件有格式错误。

鼠标移到报错位置可以看到具体报错:

image

知道了冲突的原因就容易改了,可以将prettier和eslint的配置统一即可。

5.文件保存自动格式化问题

有时候文件在保存时自动格式化了,再加上prettier与eslint的规则配置冲突,就会导致无法通过编译的情况,这里是因为vscode配置了保存自动格式化,就是settings.json的如下配置:

image

将这个选项关闭即可手动控制是否格式化代码了。

posted @ 2022-07-12 15:52  俄罗斯方块  阅读(1781)  评论(0编辑  收藏  举报