如今用VSCode开发Vue.js应用几乎已是前端的标配了，但不少时候咱们看到的代码混乱不堪，做为一个前端工程师，单引号双引号乱用，一段有分号一段没有分号，有的地方有逗号有的地方没有逗号，空格回车都对不齐，还说本身作事认真，这不是开玩笑的事情。javascript

咱们今天从头开始，完整地讲述一下一个重度代码洁癖患者该如何用vscode开发vue，以及如何把一个已经能够宣判死刑的全身各类格式错误几万条的项目整容成标准美女。html

从安装开始

为了准确起见，咱们把vscode里全部插件所有禁用，把用户设置清空，以让它尽量恢复成原始的样子：前端

做为代码洁癖患者，对于系统的版本要求必定也是最苛刻的，无论何时，都让咱们把全部的系统能升级的都升级到最高版本：vue

npm install -g @vue/cli

而后，咱们开始建立项目：java

vue create hello-world

在这里，必定要选择第一项：babel + eslint，这两个是必不可少的。我见到有些人嫌eslint麻烦，竟然在项目创建好以后手工把eslint关掉的，简直无语。react

安装完毕：git

咱们先不急着执行，执行代码是最容易的事情，咱们先打开代码看一下：vue-cli

好吧，至少咱们须要先安装vetur插件。这几乎已经肯定是开发vue项目的标配了，即便我不说，vscode也会强烈建议你安装它。npm

装上vetur之后多少有点人样了。接下来咱们来试一试能不能自动格式化，这部分才是洁癖患者的最爱。胡乱加几个空格，而后保存试试看：json

不能格式化，连个提示都没有！

用lint格式化

就算vscode里的vetur不能帮咱们自动格式化，好在package.json命令里还有一个lint命令，咱们看看lint命令能不能帮咱们自动格式化：

lint竟然说没有错误！明明就是多了不少空格的错误好吧，为何？

这是由于缺省的vue-cli没有为咱们安装@vue/prettier插件，咱们先来手工安装一下：

yarn add -D @vue/eslint-config-prettier

而后在package.json或者.eslintrc.js或者其它什么你设置eslint的地方，给它加上：

"extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],

特别是最后这一个@vue/prettier，很是重要。而后再执行yarn lint。多余的空格被自动干掉了，可是咱们发现有一些地方同时也被篡改了：

全部的单引号被变成双引号了，本来行尾没有的分号被加上了分号。这是为何呢？由于咱们虽然引入了prettier，可是尚未对prettier作设置，咱们在项目的根目录下建立一个.prettierrc.js文件，而后在其中加入：

module.exports = {
  semi: false,
  singleQuote: true
}

再次执行yarn lint，如今咱们看到lint已经可以起做用了。它不但能把咱们多余插入的空格删掉，而且能按照规则把双引号变成单引号，把行尾多余的分号删掉。固然，关于行尾加不加分号这是一个哲学命题，你能够根据你我的的喜爱自行决定。在这里，咱们权且按照vue-cli的标配执行。

到这一步很关键，假设你拿到一个烂的再也不烂的vue项目，里面有几千个.vue文件，几万个各类格式错误，也都能经过yarn lint这一行命令把它们所有修正过来！

在vscode里格式化

事情尚未完，咱们注意到虽然yarn lint命令能在编写完代码以后帮咱们格式化，可是既然咱们是用vscode进行开发，咱们固然但愿能在vscode里直接看到对于错误的标注。

这时候咱们须要在vscode里再安装一个插件eslint。

你觉得安装上eslint插件就好了吗？不行的。由于eslint并不知道咱们的.vue文件里面包含了js语法，因此还须要打开咱们的vscode设置文件。

注意：这里必定要设置到 项目的设置里，而不要只是设置到你本身我的的设置里，不然你团队的小伙伴随便一改又乱掉了。正确的方法是在你项目的文件夹下有一个 .vscode文件夹，而 vue最讨厌的地方是它竟然会把这个文件夹放到 .gitignore里，这个错误你必需要纠正过来，也就是说从 .gitignore文件里把 .vscode删掉。切切。

在你项目的settings.json里文件里添加如下代码：

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
}

这时候全部错误都被标注出来了，注意看左侧，必定要让这个settings.json文件是绿色的，而不能是灰色的，若是是灰色的，请检查你的.gitignore文件：

由于咱们在settings.json文件里设置了autoFixOnSave，因此无论多么乱的格式，只要一按Ctrl+S保存，自动就帮咱们把代码格式整理好了，是否是很方便呢？

和Prettier的冲突

有些时候咱们的vscode里插件装的比较多，譬如还安装了prettier插件，由于咱们不仅开发vue项目，可能还有其它类型的js项目特别是传统js项目，须要用到prettier进行美化，而prettier的一些功能是会和eslint相冲突的，好比说咱们在全局设置了prettier的formatOnSave，这个功能就会和eslint的autoFixOnSave打架，为了不这个矛盾，咱们一般还会在本项目的settings.json文件里再多加几个选项，相似于这样：

"editor.tabSize": 2,
  "editor.formatOnSave": false,
  "prettier.semi": false,
  "prettier.singleQuote": true

有了这些设置，基本上prettier就不会和eslint打架了。

小结

以上就是用vscode开发vue程序的标配，并不像网上有些文章说的那么简单，不是只须要配一个eslint就能解决的事情，这里还用到了vetur，eslint和prettier，把几个工具综合用好，才能真正达到咱们的错误随时可见，保存自动修改，更正既往错误的目的。但愿每一个前端工程师写出的代码都如出一人之手，漂亮简洁干净。

咱们的目标始终如一：0错误0警告。

关于如何在vscode中进行规范化的Vue应用开发，我作了一个教程，感兴趣的同窗能够到这里学习： https://segmentfault.com/ls/1...