vscode实现自动格式化功能-配置vue+vetur+eslint+prettier

1、vetur

vetur的插件主要作用和特性：
语法高亮
片段
Emmet
整理/错误检查
格式设定
智能感知
调试
组件数据：流行的Vue框架和您自己的自定义组件的自动完成和悬停信息
实验插值功能：自动完成，悬停信息和Vue模板中的类型检查
VTI：CLI上的表面模板类型检查错误
全局组件：支持定义全局组件。

2、eslint

是一个开源的 JavaScript 的 linting 工具，使用 espree 将 JavaScript 代码解析成抽象语法树 (AST)，然后通过AST 来分析我们代码，从而给予我们两种提示：
代码质量问题：使用方式有可能有问题(problematic patterns)
代码风格问题：风格不符合一定规则 (doesn’t adhere to certain style guidelines)
ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，哦，所以我们可以知道，ESLint 就是一个工具，而且是一个用来检查代码的工具。

代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。

ESLint 这样的工具可以让程序员在编码的过程中发现问题，而不是在执行的过程中发现问题。

eslint配置`

{
  "editor.fontSize": 20,
  "files.autoSave": "off",
  "eslint.autoFixOnSave": true,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "michelemelluso.code-beautifier"
  },
  //eslint 代码自动检查相关配置
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  "eslint.validate": [
    "javascriptreact",
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    },
    "html",
    {
      "language": "html",
      "autoFix": true
    }
  ]
  }
} 

注：在写vue的时候很多人会选择prettier+eslint来规范代码格式

这时候有些人就很奇怪，我明明在setting.json里配置了prettier的格式化规范，怎么就不生效呢

其实用vscode做vue开发的时候都会安装一个Vetur的插件来对.vue格式的文件进行处理，Vetur自带了格式化，规范就是使用prettier

如果你有装prettier插件，并且在设置或setting.json里配置了prettier的话是无效的

3、prettier