Vetur+ESlint+VSCode 实现自动格式化
1.在VSCode中安装以下两个插件：
- ESlint : 负责js代码格式化控制
- Vetur ：负责Vue单文件的语法高亮和相关提示
不的不说这玩意刚开始用的时候，是真的恶心，因为各种提示加报错，但是如果你会用了，用习惯了就会爱上它的，因为你的代码会变得非常完美。
2.配置.eslintrc.js
这是保证eslint能项目启到提示报错和自动格式化的关键文件，里面配置了我们的项目的语法规范。 在用Vue-cli创建项目的时候，选择使用了ESlint的话基本上配置都差不多，对于我们来说，主要配置的是这几个部分需要注意：
- 第一个extends属性：这个属性是继承使用一些相关依赖的配置文件，如果你是使用vue-cli创建的项目的话，一般会帮你设置好：
extends: [
// 检测vue的
"plugin:vue/essential",
// ESlint标准的检测
"@vue/standard",
// TypeScript的检测
"@vue/typescript/recommended"
]
- 第二个ruls是关键所在。它告诉了ESlint如何去规范我们的JS代码，如果在VSCode设置使用eslint来格式化文档，在
Ctrl + s的时候，代码会自动格式化成满足ESlint规则的格式。
// off :代表关闭检测
// warn : 视为一个警告
// error: 视为一个错误
// 下面对常用的做一个注释，其余均可以在ESlint官方文档中查到
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-unused-vars": "off",
"no-extra-semi": "error",
// 是否检测分号，是否需要分号
semi: ["error", "always"],
// 每行代码允许的最大缩进字符 ，2
"indent": ["error", 2],
// 函数括号前后是否需要空格
"space-before-function-paren": ["error", "always"],
"no-redeclare": "off",
"no-empty": "off",
"no-undef": "off",
// 是否检测引号，是单引号还会双引号
quotes: ["error", "single"],
"no-case-declarations": "off",
"vue/no-use-v-if-with-v-for": "off",
"vue/no-unused-components": "off"
}
具体使用规则请参照文档：ruls规则
这里顺带讲一个小技巧，如果你安装了ESlint并配置如上文件，如果出现某错误提示，但你不想用这个错误提示，可以这样：
- 鼠标放在提示代码位置：
- 然后在.eslintrc.js中设置或者更改它：
3.配置VSCode的setting.json保存时自动格式化
其实现在的VSCode非常的智能化，只要安装了插件马上会根据插件调整VSCode的配置。 上面也提到了Vetur+ESLint的方案来说，Vetur更多是负责语法高亮，ESLint才是提示和格式化的核心，所以我们在配置seetting.json的时候，其实只要设置一个就可以了：
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
这样的VSCode就会自动以ESLint的规则去格式化我们的代码了。 注意点：因为你安装了Vetur，加上还有VSCode也有自己的格式化方式，切记三者只能存一，不然会产生冲突。如果你设置一下属性，记得将其改成false：
// 这是VSCode的默认格式化方式，将其设置为false
"editor.formatOnSave": false,
// 可以将这相关属性删掉
"vetur.format.defaultFormatterOptions"
其实只要配置好了.eslintrc.js，在VSCode使用eslint去格式化，项目就可以完美的提示和格式化了。
顺带在一个小事情，有的小伙伴在刚接触使用TypeScript开发的时候会碰到如下问题：
此时内心特别无奈，我特么明明配置路径的映射，为什么报错找不到模块呢？？？
其实这不是你的锅，这个锅可以甩给VSCode，我猜你在用VSCode打开这个项目的时候，不是添加在工作区里，就有几个项目是在一个编译器窗口打开的，像这样：
问题的原因：因为VSCode要判断你这种路径在不在，是需要检测你的tsconfig.js文件的，但是当你在工作区种打开项目，还有多个多项目同时打开的时候，VSCode是不会去检测你的tsconfig.js文件的，所以导致vscode识别不了你的路径
解决办法，用打开文件的形式，去单独打开一个项目，也就是一个VSCode窗体，就跑一个项目。这样可以检测到tsconfig.js文件了。
