JetBrains 家的 PhpStorm(WebStorm) 是我近几年来一直使用的 IDE,它改变了我从 Dreamweaver 4.03 时期起就对 IDE 的各种偏见。虽然相比现代编辑器,它们在新技术的跟进不如编辑器完全依靠插件的方式(但也往往导致插件质量不高)快捷,但在开发大中型项目时 IDE 还是有其独到的优势。
最近的一个前后端分离项目开始使用 Vue.js 进行开发,就顺便优化了一下 PhpStorm 下的开发体验(PhpStorm 版本为 2016.3)。
注:在最新的 2017.1 版本中,PhpStorm(WebStorm)已经对 Vue.js 进行了原生支持,所以不需要装第三方插件了。
安装 Vue.js 插件
PhpStorm 目前的版本还没有对 Vue.js 进行原生支持,所以需要先安装 Vue.js 插件(安装方式:「Preferences」 =>「Plugins」 => 「Browse repositories…」 => 搜索「Vue.js」)。
设置 *.vue 文件中的代码高亮
安装 Vue.js 插件后只是对 *.vue
文件有了基本的支持,但是其对需要编译的语法支持有限。
改善 HTML 属性高亮
PhpStorm 自带的 Inspections 会帮你检查很多常见的代码错误,但是 Vue.js 中的一些语法无法被正确解析,建议关闭。注意每次
- 进入「Preferences」 =>「Editor」 => 「Inspections」;
- 关闭「HTML」下的「Unknown HTML tag」;
- 关闭「HTML」下的「Unknown HTML tag attribute」,也可以不关闭但是手动在右侧的「Custom HTML tags」添加下面的属性白名单;
- 然后进入「File」 =>「Default Settings...」,重复上面的步骤,以后新开的项目都会默认使用这个配置了。
属性白名单(只包含了简写方式,不过仍旧不完整,只能寄望 Vue.js 插件能升级支持模糊匹配来原生支持了):
@click, @click.stop, @click.prevent, @input, @change, @focus, @blur, @keyup, @submit, @submit.prevent, :disabled, :class, :style, :value, :readonly, :disabled, :title, :for, :tab-index, :name, :id, :checked, slot, scoped
切换至 ES6 规范
在项目中开启 ES6(「Preferences」 =>「Languages & Frameworks」 => 「JavaScript」 => 切换「JavaScript language version」至「ECMAScript 6」)。
开启 SCSS 支持
将 <style> 标签按下面的方法设置,然后就可以使用嵌套和引入模块了。
<style lang="scss" rel="stylesheet/scss">
@import "../layout/main";
.header {
.logo {
margin: 0 auto;
}
}
</style>
其它
Airbnb 语法规范兼容
在上面修改「Inspections」处,找到「JavaScript」=>「General」,关闭「Unneeded last comma in array literal」和「Unneeded last comma in object literal」可以支持关于 comma-dangle 的规范要求。
引入 Vue.js 库
在项目中(建议在全局)加入 Vue.js 库:
- 进入「Preferences」 =>「Languages & Frameworks」 => 「JavaScript」=>「Libraries」;
- 点击「Add...」;
- 在弹出的窗口中设置名称、版本等,「Visibility」建议设置为全局「Global」,最主要的一点是下面的源文件区域,下载一份未压缩的 vue.js(例如:https://github.com/vuejs/vue/blob/master/dist/vue.js)放进去;
- 保存后勾上新加的 Vue.js 库。
这样即便你还没在项目目录安装 node_modules
也可以正确高亮代码中的 Vue.js 方法了。
完整效果如下,模块跳转、语法分析等功能均正常使用:
-- EOF --
你好,我在mac下使用webstorm打开vue.js项目 在style标签中的内容报错,css正常显示,但是遇到postcss,stylus语法就出现错误提示。我是一名新手,您能帮我解答一下吗?
参考 SCSS 部分,增加
rel="stylesheet/scss"
应该就可以了。