1.作用
首先要知道这三个插件都是干什么用的。prettier与eslint规则要统一,例如:分号、单引号这些
(1)vetur
是开发vue项目基本必装的一个插件,主要的功能是:
- 语法高亮
- 格式化
- 调试,以及错误检查
- 全局组件的定义提示等等
(2)prettier(代码格式化插件)
是一个用来格式化代码(例如:缩进等问题)的插件,不仅仅可用于vue,还可以用于前端大部分场景:如js,html,css,scss,json,reactjs等等。这些类型的文件都可以用prettier插件来格式化。
(3)eslint(代码校验插件)
eslint是一个JavaScript代码检测工具,说白点就是约定代码的格式是什么样的,应该是以什么格式什么规范来编写:
-
通过npm 命令安装的eslint是用来手动检查代码中的不规范,需要手动输入eslint命令来检查代码中的不规范
-
在vscode插件市场安装的eslint,是用来自动检测代码中的不规范,在编写保存的时候就可以直接通过设定的规范来提示出现的错误(例如:代码中出现红色波浪线等)
- eslint能帮助修复一些简单的语法规范问题,例如:单引号、分号、缩进等。
- 只能处理js文件
- 配置:eslint校验不通过时代码不能提交,利用预提交钩子。package.json ---> pre-commit
- 配置:eslint校验不通过时在控制台报错。
// vue.config.js 在控制台报错设置
devServer: {
overlay: {
warnings: false,
errors: true
}
}
复制代码
(4)setting.json (对所有项目生效)
(1)、设置代码在保存的时候自动格式化
{
"editor.formatOnSave": true
}
复制代码
(2)、设置 .js .ts .jsx .tsx .less .css .json
格式的文件都采用 prettier-vscode
插件进行格式化
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript|react]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript|react]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
复制代码
(3)、可以实现 ctrl+s 保存时对js代码进行格式化,默认走的是eslint的校验
也可自己定义ctrl+s时的格式化文档,步骤:右键---"使用...格式化文档"。例如:eslint、prettier
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
复制代码
优先级:项目内的配置文件 > setting.json
2.settings.json与.prettierrc配置文件的关系
首先要知道的是当前格式化的文件都会首先遵循当前项目目录(或者更上一级目录下)的.prettier配置文件的配置。
配置了prettier的vue项目中,在这个项目中生效的是这个项目根目录下的.prettierrc文件。在settings.json文件中的配置是不起作用的。.prettier文件的格式如下:
{
"printWidth": 120,
"semi": false,
"singleQuote": true
}
复制代码
我经常遇到的一个情况就是:右键点击了格式化以后格式化成了自己想要的规范,但是右键一保存就又变成了另一个规范,终于找到原因了:右键格式时使用的插件与settings.json文件中的配置不一致导致的。例如我要格式化一个vue文件,在这个vue项目的根目录下没有.prettierrc配置文件,所以这里格式化时采用的prettier配置就是settings.json文件中的prettier配置。
先看我的VSCODE配置了如下配置
- 文件保存时自动格式化
- vue的默认格式化的插件:vetur
- prettier插件有自己的插件配置
- vetur插件有自己的插件配置
- 项目根目录没有自己的.prettierrc文件 先看settings.json中的配置:
上面主要看三个红框里面的内容:
- 第一个红框内的是vue文件保存时采用的格式化方案,这里默认的是vetur插件
- 第二个红框内的是prettier插件的公共规则
- 第三个红框内的是使用vetur格式化文件时,采用的prettier规范,如果这个prettier不填就默认采用第二个红框内的公共规则
现在看格式化代码时,在右击当前项目会出现“以...格式化文件”的选项,:
可以看到如果我直接点击格式化文件,采用的就是prettier插件的配置(settings.json第二个红框中的配置),这里我的prettier中的semi配置用的是true(表示格式化时自动j加上语句结尾的分号),而vetur中配置的prettier插件的semi(第三个红框)用的是false(自动去除结尾的分号)。
(1)当我不使用默认vetur而使用prettier来格式化时就会自动加上分号:
(2)此时文件尚未保存,当我保存时:
因为setting.json中设置了保存时默认采用vetur插件(vetur插件配置的 "semi": false规则。),这就导致了格式化以后再保存会自动修改样式的问题。
(3)总结(干货)
- 不勾选formate on save时:
ctrl+s,走的是settings.json("source.fixAll.eslint": true)中配置的规是的时代则,即执行eslint校验。
- 勾选formate on save时: ctrl+s时,走的的默认格式化文档中的规则。右键:使用...格式化文档,可以查看和选择格式化文档。
3.eslint与vetur和prettier插件的关系
eslint又分为:
- 通过npm安装的eslint插件,这个需要使用特定eslint的命令(如eslint ./src)来手动找到所有的不规范。所有的规则见官网
- 还有就是vscode通过侧边栏的插件市场
来安装的vscode的eslint插件,这个插件可以不需要执行特定的命令就可以显示代码的不规范。具体使用方法见官网
注意:
- 同prettier插件一样,eslint插件默认会首先遵循离当前文件最近的.eslintrc.js/.json文件中的配置,这也是vscode中在项目中的首先采用的配置。如果这个文件的同级或者更上几级的目录中没有.eslintrc的配置文件,此时运行eslint命令或者使用插件才会使用settings.json中的配置
- 可以使用eslint的eslint.options中配置来配置eslint规则的生效文件。配置了这个属性即可实现vscode的eslint插件按照该文件指定的规范来提示
- eslint也有格式化代码的功能,但是多个格式化的工具容易冲突,且eslint也不推荐使用自己的格式化工具
4、追问:为什么要在vscode的eslint插件setting.json和.eslingrc.js中配两次 这两处什么关系?
setting.json:是vscode对eslint插件的一些配置。
.eslintrc:是对代码规范的配置。
目标不一样。vscode的所有配置都针对于插件或者vscode自身的