现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪。

 

作为一个前端工程师，单引号双引号乱用，一段有分号一段没有分号，有的地方有逗号有的地方没有逗号，空格回车都对不齐，还说自己做事认真，这不是开玩笑的事情。

 

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

 

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我并在后台私信我：前端，即可免费获取

 

从安装开始

 

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

 

作为代码洁癖患者，对于系统的版本要求一定也是最苛刻的，不管什么时候，都让我们把所有的系统能升级的都升级到最高版本：

 

npm install -g @vue/cli

 

然后，我们开始创建项目：

 

vue create hello-world

 

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

 

安装完毕：

 

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

 

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

 

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

 

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

 

用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。多余的空格被自动干掉了，但是我们发现有一些地方同时也被篡改了：

 

所有的单引号被变成双引号了，原本行尾没有的分号被加上了分号。