用VS Code开发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
设置文件。
注意:这里一定要设置到项目的设置里,而不要只是设置到你自己个人的设置里,否则你团队的小伙伴随便一改又乱掉了。正确的方法是在你项目的文件夹下有一个
.vscode
文件夹,而vue
最讨厌的地方是它居然会把这个文件夹放到.gitignore
里,这个错误你必须要纠正过来,也就是说从.gitignore
文件里把.vscode
删掉。切切。
在你项目的settings.json
里文件里添加以下代码:
{ "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], }
这时候所有错误都被标注出来了,注意看左侧,一定要让这个settings.json
文件是绿色的,而不能是灰色的,如果是灰色的,请检查你的.gitignore
文件:
因为我们在settings.json
文件里设置了autoFixOnSave
,所以不管多么乱的格式,只要一按Ctrl+S
保存,自动就帮我们把代码格式整理好了,是不是很方便呢?
和Prettier的冲突
有些时候我们的vscode
里插件装的比较多,譬如还安装了prettier插件,因为我们不只开发vue
项目,可能还有其它类型的js
项目特别是传统js
项目,需要用到prettier
进行美化,而prettier
的一些功能是会和eslint
相冲突的,比如说我们在全局设置了prettier
的formatOnSave
,这个功能就会和eslint
的autoFixOnSave
打架,为了避免这个矛盾,我们通常还会在本项目的settings.json
文件里再多加几个选项,类似于这样:
"editor.tabSize": 2, "editor.formatOnSave": false, "prettier.semi": false, "prettier.singleQuote": true
有了这些设置,基本上prettier
就不会和eslint
打架了。
小结
以上就是用vscode
开发vue
程序的标配,并不像网上有些文章说的那么简单,不是只需要配一个eslint
就能解决的事情,这里还用到了vetur
,eslint
和prettier
,把几个工具综合用好,才能真正达到我们的错误随时可见,保存自动修改,更正既往错误的目的。希望每个前端工程师写出的代码都如出一人之手,漂亮简洁干净。
我们的目标始终如一:0错误0警告
。
摘要: 0错误0警告应该是每个程序员最基本的要求。
- 原文:用vscode开发vue应用
- 作者:张京
Fundebug经授权转载,版权归原作者所有。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Python爬虫入门教程 30-100 高考派大学数据抓取 scrapy
1. 高考派大学数据----写在前面 终于写到了scrapy爬虫框架了,这个框架可以说是python爬虫框架里面出镜率最高的一个了,我们接下来重点研究一下它的使用规则。 安装过程自己百度一下,就能找到3种以上的安装手法,哪一个都可以安装上可以参考 https://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/install.html 官方说明进行安装。 2. 高考派大学数据----创建scrapy项目 通用使用下面的命令,创建即可 scrapy startproject mySpider 完成之后,你的项目的目录结构为 每个文件对应的意思为 scrapy.cfg 项目的配置文件 mySpider/ 根目录 mySpider/items.py 项目的目标文件,规范数据格式,用来定义解析对象对应的属性或字
- 下一篇
Hollis原创|不了解这12个语法糖,别说你会Java
GitHub 2.5k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 2.5k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 2.5k Star 的Java工程师成神之路 ,真的确定不来了解一下吗? 本文从 Java 编译原理角度,深入字节码及 class 文件,抽丝剥茧,了解 Java 中的语法糖原理及用法,帮助大家在学会如何使用 Java。 语法糖 语法糖(Syntactic Sugar),也称糖衣语法,是由英国计算机学家 Peter.J.Landin 发明的一个术语,指在计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。简而言之,语法糖让程序更加简洁,有更高的可读性。 有意思的是,在编程领域,除了语法糖,还有语法盐和语法糖精的说法,篇幅有限这里不做扩展了
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,CentOS8安装Elasticsearch6.8.6
- 设置Eclipse缩进为4个空格,增强代码规范
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2更换Tomcat为Jetty,小型站点的福音