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

1.作用

项目中常用eslint来约定代码的规范，但是格式化代码又需要用到prettier和vetur，很长一段时间都不太懂这三个的作用的相互之间的关系是什么，只知道开发vue项目需要安装vetur插件，格式化代码要用到prettier插件。所以花了一段时间专门来弄懂这三者的关系。

首先要知道这三个插件都是干什么用的。

（1）vetur

是开发vue项目基本必装的一个插件，主要的功能是：

• 语法高亮
• 格式化
• 调试，以及错误检查
• 全局组件的定义提示等等

（2）prettier

是一个用来格式化代码的插件，不仅仅可用于vue，还可以用于前端大部分场景：如js,html,css,scss,json,reactjs等等。这些类型的文件都可以用prettier插件来格式化。

（3）eslint

eslint是一个JavaScript代码检测工具，说白点就是约定代码的格式是什么样的，应该是以什么格式什么规范来编写：

• 通过npm 命令安装的eslint是用来手动检查代码中的不规范，需要手动输入eslint命令来检查代码中的不规范
• 在vscode插件市场安装的eslint，是用来自动检测代码中的不规范，在编写保存的时候就可以直接通过设定的规范来提示出现的错误

 2.settings.json与.prettierrc配置文件的关系

首先要知道的是当前格式化的文件都会首先遵循当前项目目录（或者更上一级目录下）的.prettier配置文件的配置。如果都没有配置这个文件，就会

配置了prettier的vue项目中，在这个项目中生效的是这个项目根目录下的.prettierrc文件。在settings.json文件中的配置是不起作用的。.prettier文件的格式如下：

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true
}

 其中配置了使用prettier自动格式化时使用的规范。在右键自动格式化代码或者保存时自动格式化代码时采用的就是这个配置文件中的配置来自动格式化vue项目中的代码。

　　我经常遇到的一个情况就是：右键点击了格式化以后格式化成了自己想要的规范，但是右键一保存就又变成了另一个规范，我搜了一下是因为eslint和prettier的配置冲突导致的，跟着配置了半天没什么用，最后只有删除prettier插件这个暴力办法处理了。经过这次系统了解以后才发现是格式时使用的插件与settings.json文件中的配置不一致导致的。例如我要格式化一个vue文件，在这个vue项目的根目录下没有.prettierrc配置文件，所以这里格式化时采用的prettier配置就是settings.json文件中的prettier配置。

　　先看我的VSCODE配置了如下配置，这里先不看eslint的规范：

• 文件自动保存（在窗口切换时），还有其他自动保存的方案
• 文件保存时自动格式化
• vue的默认格式化的插件：vetur
• prettier插件有自己的插件配置
• vetur插件有自己的插件配置
• 项目根目录没有自己的.prettierrc文件

先看settings.json中的配置：

上面主要看三个红框里面的内容：

• 第一个红框内的是vue文件保存时采用的格式化方案，这里默认的是vetur插件
• 第二个红框内的是prettier插件的公共规则
• 第三个红框内的是使用vetur格式化文件时，采用的prettier规范，如果这个prettier不填就默认采用第二个红框内的公共规则

 现在看格式化代码时，在右击当前项目会出现“以...格式化文件”的选项，：

可以看到如果我直接点击格式化文件，采用的就是prettier插件的配置（settings.json第二个红框中的配置），这里我的prettier中的semi配置用的是true（表示格式化时自动j加上语句结尾的分号），而vetur中配置的prettier插件的semi（第二个红框）用的是false（自动去除结尾的分号）。当我不使用默认vetur而使用prettier来格式化时就会自动加上分号：

此时文件尚未保存，当我保存时：

 此时采用的又是vetur插件配置的"semi": false规则。这就导致了格式化以后再保存会自动修改样式的问题。

总之，这里主要的原因就是当前项目中没有配置.prettierrc文件，且格式化时采用的插件规范（prettier）与保存时采用的格式化方案（vetur）冲突导致的。所以最主要的解决方法就是有一个公共的.prettierrc配置文件。这样settings.json文件中的配置就会被覆盖了。

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也不推荐使用自己的格式化工具