现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程师,单引号双引号乱用,一段有分号一段没有分号,有的地方有逗号有的地方没有逗号,空格回车都对不齐,还说自己做事认真,这不是开玩笑的事情。
我们今天从头开始,完整地讲述一下一个重度代码洁癖患者该如何用<代码> vscode 代码>开发<代码> vue> 代码,以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标准美女。
为了准确起见,我们把<代码> vscode> 代码里所有插件全部禁用,把用户设置清空,以让它尽可能恢复成原始的样子:
作为代码洁癖患者,对于系统的版本要求一定也是最苛刻的,不管什么时候,都让我们把所有的系统能升级的都升级到最高版本:
npm安装- g @vue/cli
然后,我们开始创建项目:
vue创建hello world
在这里,一定要选择第一项:<代码>巴别塔+ eslint> 代码,这两个是必不可少的。我见到有些人嫌<代码> eslint 代码>麻烦,居然在项目建立好之后手工把<代码> eslint 代码>关掉的,简直无语。
安装完毕:
我们先不急着执行,执行代码是最容易的事情,我们先打开代码看一下:
好吧,至少我们需要先安装vetur插件。这几乎已经确定是开发<代码> vue> 代码项目的标配了,即使我不说,<代码> vscode> 代码也会强烈建议你安装它。
装上<代码> vetur> 代码以后多少有点人样了。接下来我们来试一试能不能自动格式化,这部分才是洁癖患者的最爱。胡乱加几个空格,然后保存试试看:
不能格式化,连个提示都没有。
就算<代码> vscode 代码>里的<代码> vetur> 代码不能帮我们自动格式化,好在<代码> package.json 代码>命令里还有一个<代码>线头代码>命令,我们看看<代码>线头代码>命令能不能帮我们自动格式化:
<代码>线头代码>居然说没有错误!明明就是多了很多空格的错误好吧,为什么?
这是因为缺省的<代码> vue-cli> 代码没有为我们安装<代码> @vue/漂亮/<代码>插件,我们先来手工安装一下:
纱添加- d @vue/eslint-config-prettier
然后在<代码> package.json> 代码或者<代码> .eslintrc.js> 代码或者其它什么你设置<代码> eslint> 代码的地方,给它加上:
“扩展”:( “插件:vue/至关重要”, “eslint:推荐”, “@vue/漂亮” ),
特别是最后这一个<代码> @vue/漂亮> 代码,非常重要。然后再执行<代码>纱线头> 代码。多余的空格被自动干掉了,但是我们发现有一些地方同时也被篡改了:
所有的单引号被变成双引号了,原本行尾没有的分号被加上了分号。这是为什么呢?因为我们虽然引入了<代码>漂亮> 代码,但是还没有对<代码> 代码>做漂亮设置,我们在项目的根目录下创建一个<代码> .prettierrc.js 代码>文件,然后在其中加入:
模块。出口={ 半:假的, singleQuote:真 }用vscode开发vue应用的方法步骤