月归档:二月 2017

在 WebStorm/PhpStorm 中开启对 Vue.js 的完美支持

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 --

发表在 前端开发 | 标签为 , , | 2 条评论