用vscode开发vue应用

此刻用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里的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配置文件。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!