当然 vscode 对 vue 也不是原生支持的,今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件
先来扒一扒使用 PHPStorm 遇到的问题:
vue文件虽然可以通过插件来解决高亮问题,但是
无法正确识别 vue 文件中的 jsx 语法
无法正确识别和高亮 vue 文件
vue文件中 部分使用了大量的自定义标签(自定义组件)和自定义属性,会报一堆 warning
经常性卡死
webpack实时编译的错误不能直接展示在代码编辑器内,还得自己到控制台中查看
如何安装 vscode
很简单,传送门:官网下载安装
第一步,要支持 vue 文件的基本语法高亮
这里,我试过好3个插件: vue, VueHelper 和 vetur ,最终选择使用 vetur 。
安装插件: Ctrl + P 然后输入 ext install vetur 然后回车点安装即可。
p.s: vscode 的插件安装比 PHPStorm 的插件安装更快捷方便,安装完成后还不用重启整个程序,只要重新加载下工作区窗口就可以了。
安装完 vetur 后还需要加上这样一段配置下:
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
这时可以打开一个vue文件试试,注意下右下角状态栏是否正确识别为 vue 类型:
如果被识别为 text 或 html ,则记得要点击切换下。
第二步,要支持 vue 文件的 ESLint
可能还有人会问为什么要 ESLint ?没有 lint 的代码虽然也可能可以正确运行,但是 lint 作为编译前的一道检测成本更小,而且更快。此外, ESLint 还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。
jshint 本来也是个不错的选择,但是 ESLint 对 jsx 的支持让我还是选择了 ESLint.