vscode之代码格式化的prettier、eslint、vetur以及vscode的settings.json配置文件

小飞侠呀

2021年09月06日 16:24

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，是用来自动检测代码中的不规范，在编写保存的时候就可以直接通过设定的规范来提示出现的错误（例如：代码中出现红色波浪线等）
1. eslint能帮助修复一些简单的语法规范问题，例如：单引号、分号、缩进等。
2. 只能处理js文件
3. 配置：eslint校验不通过时代码不能提交，利用预提交钩子。package.json ---> pre-commit
4. 配置：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也不推荐使用自己的格式化工具