如何优雅地使用 VSCode 来编辑 vue 文件?

转载 (原文地址) 柠-檬℃ 教程 Vue 579阅读 2018-07-15 22:18:39 举报

最近有个项目使用了 Vue.js ,本来一直使用的是 PHPStorm 来进行开发,可是遇到了很多问题。

后来,果断放弃收费的 PHPStorm ,改用 vscode (Visual Stdio Code).
当然 vscode 对 vue 也不是原生支持的,今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件

先来扒一扒使用 PHPStorm 遇到的问题:

vue文件虽然可以通过插件来解决高亮问题,但是 <script> 标签中的 ES6 代码的识别老是出问题,箭头函数有的时候能正确识别,有的时候会报错
无法正确识别 vue 文件中的 jsx 语法
无法正确识别和高亮 vue 文件 <style> 标签中使用的 less 语法
vue文件中 <template> 部分使用了大量的自定义标签(自定义组件)和自定义属性,会报一堆 warning
经常性卡死
webpack实时编译的错误不能直接展示在代码编辑器内,还得自己到控制台中查看
如何安装 vscode

很简单,传送门:官网下载安装

第一步,要支持 vue 文件的基本语法高亮

这里,我试过好3个插件: vue, VueHelper 和 vetur ,最终选择使用 vetur 。

安装插件: Ctrl + P 然后输入 ext install vetur 然后回车点安装即可。

p.s: vscode 的插件安装比 PHPStorm 的插件安装更快捷方便,安装完成后还不用重启整个程序,只要重新加载下工作区窗口就可以了。

安装完 vetur 后还需要在文件=>首选项=>设置里面用户设置加上这样一段配置:

这时可以打开一个vue文件试试,注意下右下角状态栏是否正确识别为 vue 类型:

如果被识别为 text 或 html ,则记得要点击切换下。

第二步,要支持 vue 文件的 ESLint

可能还有人会问为什么要 ESLint ?没有 lint 的代码虽然也可能可以正确运行,但是 lint 作为编译前的一道检测成本更小,而且更快。此外, ESLint 还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。

jshint 本来也是个不错的选择,但是 ESLint 对 jsx 的支持让我还是选择了 ESLint.

安装插件: Ctrl + P 然后输入 ext install eslint 然后回车点安装即可。

ESLint 不是安装后就可以用的,还需要一些环境和配置:

首先,需要全局的 ESLint , 如果没有安装可以使用 npm install -g eslint 来安装。

其次,vue文件是类 HTML 的文件,为了支持对 vue 文件的 ESLint ,需要 eslint-plugin-html 这个插件。可以使用 npm install -g eslint-plugin-html 来安装

接着,安装了 HTML 插件后,还需要在 vscode 中配置下 ESLint:

最后,别忘了在项目根目录下创建 .eslintrc.json , 如果还没创建,还可以使用下面快捷命令来创建:

这样一来 vue 中写的 js 代码也能正确地被 lint 了。

要是不小心少个括号之类的都可以有对应的报错:

多余 import 也都能报错:

还是蛮智能的。

。。。

评论 ( 8 )
最新评论
柠-檬℃ 7F 2018-11-14 11:22:12 8F

都可以,经常使用的包可以自动,或者经常去github看看包的版本状态,需不需要进行替换,如果替换,可以手动输入版本号,npm install

lawrence 6F 2018-11-05 04:52:46 7F

包版本你一般是手动输入,还是自动生成?

柠-檬℃ 5F 2018-10-31 15:33:32 6F

package.json你可以手动输入然后再npm install下来,也可以跟我前面说的npm install XX包 --save 这样下载包,然后package.json会自动添加包信息的

lawrence 4F 2018-10-23 01:14:20 5F

初始化的时候选择了eslint,npm init后,依赖不是要手动输入么?

你用什么生成package.json配置的?

柠-檬℃ 3F 2018-10-22 09:09:13 4F

项目初始化的时候选择了eslint会自动部署到项目中吧!本地的话,eslint只是一个编码包!不是一个工具,安装不到本地吧!本地我还真不知道怎么安装。项目部署的时候安装上,或者后期需要用的时候,直接npm install XXX --save安装到项目中就好了,不需要就卸载!大部分写代码的时候我们是不希望用eslint的,团队开发多用这个,统一代码编码格式!

lawrence 2F 2018-10-19 20:42:05 3F

为什么不安装在本地?

柠-檬℃ 1F 2018-10-19 17:27:38 2F

也可以不安装,安装了,就是全局的,也可以注释掉eslint的规则

lawrence 2018-10-01 12:54:17 1F

eslint必须全局安装么?