网站建设中数据库,自己的做网站,平台推广方案模板,网站开发er图现在用 VSCode 开发 Vue.js 应用几乎已经是前端的标配了#xff0c;但很多时候我们看到的代码混乱不堪#xff0c;作为一个前端工程师#xff0c;单引号双引号乱用#xff0c;一段有分号一段没有分号#xff0c;有的地方有逗号有的地方没有逗号#xff0c;空格回车都对不…现在用 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
