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

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中的配置:

image.png

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

  • 第一个红框内的是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)总结(干货)

image.png

  • 不勾选formate on save时:

ctrl+s,走的是settings.json("source.fixAll.eslint": true)中配置的规是的时代则,即执行eslint校验。

  • 勾选formate on save时: ctrl+s时,走的的默认格式化文档中的规则。右键:使用...格式化文档,可以查看和选择格式化文档。

image.png

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自身的

分类:
前端
标签: