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


Posted in Javascript onMay 06, 2019

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

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

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

从安装开始

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

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

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

npm install -g @vue/cli

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

vue create hello-world

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

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

安装完毕:

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

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

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

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

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

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

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

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

用lint格式化

就算vscode里的vetur不能帮我们自动格式化,好在package.json命令里还有一个lint命令,我们看看lint命令能不能帮我们自动格式化:

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

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

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

所有的单引号被变成双引号了,原本行尾没有的分号被加上了分号。这是为什么呢?因为我们虽然引入了prettier,但是还没有对prettier做设置,我们在项目的根目录下创建一个.prettierrc.js文件,然后在其中加入:

module.exports = {
 semi: false,
 singleQuote: true
}

再次执行yarn lint,现在我们看到lint已经能够起作用了。它不但能把我们多余插入的空格删掉,并且能按照规则把双引号变成单引号,把行尾多余的分号删掉。当然,关于行尾加不加分号这是一个哲学命题,你可以根据你个人的喜好自行决定。在这里,我们权且按照vue-cli的标配执行。

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

到这一步很关键,假设你拿到一个烂的不再烂的vue项目,里面有几千个.vue文件,几万个各种格式错误,也都能通过yarn lint这一行命令把它们全部修正过来!

在vscode里格式化

事情还没有完,我们注意到虽然yarn lint命令能在编写完代码之后帮我们格式化,但是既然我们是用vscode进行开发,我们当然希望能在vscode里直接看到对于错误的标注。

这时候我们需要在vscode里再安装一个插件eslint。

你以为安装上eslint插件就行了吗?不行的。因为eslint并不知道我们的.vue文件里面包含了js语法,所以还需要打开我们的vscode设置文件。

注意:这里一定要设置到项目的设置里,而不要只是设置到你自己个人的设置里,否则你团队的小伙伴随便一改又乱掉了。正确的方法是在你项目的文件夹下有一个.vscode文件夹,而vue最讨厌的地方是它居然会把这个文件夹放到.gitignore里,这个错误你必须要纠正过来,也就是说从.gitignore文件里把.vscode删掉。切切。

在你项目的settings.json里文件里添加以下代码:

{
 "eslint.autoFixOnSave": true,
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
}

这时候所有错误都被标注出来了,注意看左侧,一定要让这个settings.json文件是绿色的,而不能是灰色的,如果是灰色的,请检查你的.gitignore文件:

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

因为我们在settings.json文件里设置了autoFixOnSave,所以不管多么乱的格式,只要一按Ctrl+S保存,自动就帮我们把代码格式整理好了,是不是很方便呢?

和Prettier的冲突

有些时候我们的vscode里插件装的比较多,譬如还安装了prettier插件,因为我们不只开发vue项目,可能还有其它类型的js项目特别是传统js项目,需要用到prettier进行美化,而prettier的一些功能是会和eslint相冲突的,比如说我们在全局设置了prettierformatOnSave,这个功能就会和eslintautoFixOnSave打架,为了避免这个矛盾,我们通常还会在本项目的settings.json文件里再多加几个选项,类似于这样:

"editor.tabSize": 2,
 "editor.formatOnSave": false,
 "prettier.semi": false,
 "prettier.singleQuote": true

有了这些设置,基本上prettier就不会和eslint打架了。

小结

以上就是用vscode开发vue程序的标配,并不像网上有些文章说的那么简单,不是只需要配一个eslint就能解决的事情,这里还用到了vetureslintprettier,把几个工具综合用好,才能真正达到我们的错误随时可见,保存自动修改,更正既往错误的目的。希望每个前端工程师写出的代码都如出一人之手,漂亮简洁干净。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
使用DataTable插件实现异步加载数据
Nov 19 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
微信小程序合法域名配置方法
May 06 #Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 #Javascript
微信小程序上线发布流程图文详解
May 06 #Javascript
ES6的解构赋值实例详解
May 06 #Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
Vue动态组件和异步组件原理详解
May 06 #Javascript
微信小程序按钮点击跳转页面详解
May 06 #Javascript
You might like
php Memcache 中实现消息队列
2009/11/24 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JavaScript实现列表分页功能特效
2015/05/15 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python实现接口并发测试脚本
2019/06/25 Python
原生python实现knn分类算法
2019/10/24 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
简单的Python人脸识别系统
2020/07/14 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
会计岗位职责范本
2014/03/07 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
家长建议怎么写
2014/05/15 职场文书
节约能源标语
2014/06/17 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
英文导游词
2015/02/13 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
goland设置颜色和字体的操作
2021/05/05 Golang
详解Java实践之适配器模式
2021/06/18 Java/Android
Python日志模块logging用法
2022/06/05 Python