用vscode开发vue应用

228

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

clipboard.png

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

从安装开始

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

clipboard.png

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

npm install -g @vue/cli

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

vue create hello-world

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

clipboard.png

安装完毕:

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

用lint格式化

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

clipboard.png

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

clipboard.png

所有的单引号被变成双引号了,原本行尾没有的分号被加上了分号。这是为什么呢?因为我们虽然引入了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文件:

clipboard.png

因为我们在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,把几个工具综合用好,才能真正达到我们的错误随时可见,保存自动修改,更正既往错误的目的。希望每个前端工程师写出的代码都如出一人之手,漂亮简洁干净。

我们的目标始终如一:0错误0警告


关于如何在vscode中进行规范化的Vue应用开发,我做了一个教程,感兴趣的同学可以到这里学习: https://segmentfault.com/ls/1...


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

33 条评论
前端开发 · 5月3日

webstorm默秒全O(∩_∩)O

+2 回复

0

还是WebStorm省心,插件什么的都配置好了,做到了开箱即用。最喜欢的特性就是代码能到处点:智能跳转。😘

Johnny_Miller · 5月4日
0

@Johnny_Miller 好吧,第一句话就得罪人了,我没想到前端界Microsoft党和Jetbrains党结怨这么深。用vscode的主要原因是因为我同时又要开发Javascript,又要开发Java,还有php等等,最近又在搞flutter,如果用Jetbrains系列的话,我8G的小电脑承担不了同时开启Webstorm, IDEA, Android Studio的内存开销。Webstorm用来重构确实不错,改一个变量名到处都改了。

张京 作者 · 5月4日
糊里糊涂 · 5月2日

博主,直接传到github或者gitee个现场的例子啊,我们照着博文对比。

回复

0

感谢提醒,这里: https://github.com/fengerzh/v...

张京 作者 · 5月2日
0

@张京 感谢提供

糊里糊涂 · 5月2日
莫弹弹 · 5月2日

博主为什么非要把整个.vscode文件夹添加进库呢,可以只添加.vscode/xxx.js 一个文件,在.gitignore 里面写上
!.vscode/xxx.js 就好啦

回复

0

主要是因为我看到.vscode下除了settings.js以外没有别的文件,这个下面还会产生别的文件吗?

张京 作者 · 5月3日
莫弹弹 · 5月3日

我也不知道.vscode 文件夹下会不会产生其他文件,只是单纯技术角度回复哦

回复

Yujiaao · 5月3日

.vscode 还是不建议放到 git 里的, 因为有时设置编译环境, .vscode 下会在配置文件里出现平台相关的绝对路径, 不同开发人员的配置不一样的, 大家相互覆盖会非常不开心的.

回复

0

vscode开发组建议把.vscode包含在git里,因为同一开发小组应该共享所有设置,而且.vscode里并不会包含绝对路径。 https://stackoverflow.com/que...

张京 作者 · 5月4日
0

能统一自然是好的, 我以前碰到的项目里经常会有类似的设置:

python/.vscode/settings.json

{
    "python.pythonPath": "/usr/local/bin/python",
    "python.linting.pylintEnabled": true
}

这种情况下, 共享配置, 大家又不统一开发环境时, 没法正常工作的.

Yujiaao · 5月4日
2

@Yujiaao 我觉得这主要还是一个管理的问题。像您说的这种情况,应该要求大家把python.pythonPath这样的设置放在每个用户自己的设置文件里,而不应该污染项目下面的settings.json。我做项目管理通常会这么干:因为我们有git嘛,所以我直接就把.vscode下面的这种不合适的设置删掉了,删掉以后可能有些人的项目就跑不起来了,跑不起来的话我们再解决就好了,总之是不应该把不合适的设置放在里面。

张京 作者 · 5月4日
xiaopohair · 5月6日

我倒是觉得直接用 vue ui吧。

回复

天降植物 · 5月9日

看到最后,我选择webstrom

回复

木流水 · 5月10日

这边的 保存自动修复 无法修复template下的代码吧

回复

0

可以修复template下的代码,特别是在html标签里属性顺序不对的那种错误,修复起来也很爽。

张京 作者 · 5月10日
Fundebug · 5月13日

0错误0警告应该是每个程序员最低限度的要求了

回复

SegmentFault · 5月13日

可以把讲堂的连接补充到这篇文章里面 :)

回复

0

感谢提醒,已添加。

张京 作者 · 5月13日
太陽と向日葵 · 5月16日

我看好多人开发的时候,都把eslint关掉了,他们嫌麻烦

回复

0

此所谓上梁不正下梁歪。技术经理自身技术水平就低,不懂得如何正确配置eslint,他带出来的兵自然也好不到哪里去,反而嫌麻烦。如果在一个优秀的技术经理手下,你会学到很多东西,当然,不止是eslint,还有unit test如何做好,jsdoc怎么做,babel如何配置,webpack如何配置,如何优化等等。况且eslint也不是什么新鲜事物,早在C/C++时代就有,国外的软件巨头都要求做严格的静态检查,为什么你看国外的开源软件代码都非常规范,非常漂亮,非常优雅?跟代码检查工具的使用有很大的关系。静态代码检查方面的工具很多,Parasoft C++ Test一套要卖到几十万人民币,也都是干代码规范用的。lint工具为什么会火,是因为免费和开源而已,相比于C++ Test,lint工具的检查项根本不值一提,每个函数都要求有严格的注释,每个函数的每个参数都要求有说明,每个函数不能超过50行代码等等,这些lint都不要求的。除了eslint,各行各业都有lint,java lint, phplint, markdown lint, 无所不能lint。eslint只是雕虫小技,但是如果连这个都搞不好,技术水平高不到哪里去。所以作为初学者,一定要从一开始就严格要求自己,从最基础的做起,只有把基础打牢,大厦才不会歪斜。

张京 作者 · 5月16日
0

@张京 同意您的观点,我之前用的时候没有关掉它,可能刚开始用的时候觉得有些费事,但是坚持下来会养成很好的代码书写习惯,而且通过警告也可以解决一些问题

太陽と向日葵 · 5月16日
0

@太陽と向日葵 是的,从大厂的规则还能学到不少东西。我记得我的ES6就是从Airbnb的eslint规则学来的。当时只是一个很偶然的机会,对一个传统js项目使用airbnb规则进行eslint,然后它告诉我:不可以用var,只能用let和const,并且哪里只能用let,哪里只能用const,都有严格要求;然后airbnb告诉你不能用function,必须全部采用箭头函数,然后才了解这个神奇的箭头,箭头函数如果只有一句return,则直接括号返回等等。就是通过解决所有airbnb eslint规则检查出来的错误,很快地掌握了es6,不但学到了新语法,并且还规范了代码,一举两得的事情。

张京 作者 · 5月16日
流光 · 5月16日

我喜欢用phpstorm,自带全套支持

回复

崩崩 · 5月21日

很棒的文章! 顺便给vscode爱好者提供一个仓库, 可以下载绝版的vsc哦~
地址: https://github.com/ddzy/fe-ne...

回复

xiaopohair · 5月23日

看了视频的第二讲,html tag 的 > 为啥单独占了一行呢?

回复

0

这是prettier当前的格式。关于这个>到底应不应该单独占一行,在prettier社区也有争议,可以看一下这个长贴: https://github.com/prettier/p...

张京 作者 · 5月23日
stardew · 7月24日

您好,我想问一下您有没有遇到prettier与eslint不兼容的function/无空格/(){}问题?
github中的issue看了些,基本是建议eslint中space-before-function-paren never/ignore掉,但是以前的代码习惯有空格,忽略的话空格又检测不出来。

回复

0

Prettier有强烈的倾向性,他们自己的官网也是这么说的。对于vue项目,我们一般都是禁用prettier的auto save功能,打开eslint的auto fix。否则你两个插件打架,没法解决的。

张京 作者 · 7月24日
wolfan · 9月3日

vscode有没有插件可以向webstorm 一样创建一个VUE文件时自动充填好相应的代码?

回复

0

安装vetur之后,只要输入一个<号,就能自动创建所有的template, scripts和style框架。如果你想要自定义自己的模板,也可以。

张京 作者 · 9月3日
0

@张京 原来还能这么用啊。那main.js之类的。。。

如果一键新建一个pages立就把index.vue,main.js 之类都建好就开森了。

wolfan · 9月3日
载入中...