用vscode开发vue应用的方法步骤

2020-06-16 06:39:47易采站长站整理

现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程师,单引号双引号乱用,一段有分号一段没有分号,有的地方有逗号有的地方没有逗号,空格回车都对不齐,还说自己做事认真,这不是开玩笑的事情。

我们今天从头开始,完整地讲述一下一个重度代码洁癖患者该如何用

vscode
开发
vue
,以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标准美女。

从安装开始

为了准确起见,我们把

vscode
里所有插件全部禁用,把用户设置清空,以让它尽可能恢复成原始的样子:

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


npm install -g @vue/cli

然后,我们开始创建项目:


vue create hello-world

在这里,一定要选择第一项:

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

安装完毕:

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

好吧,至少我们需要先安装vetur插件。这几乎已经确定是开发

vue
项目的标配了,即使我不说,
vscode
也会强烈建议你安装它。

装上

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

不能格式化,连个提示都没有!

用lint格式化

就算

vscode
里的