让 WebStorm / PHPStorm 支持 Vue

众所周知 Jetbrains 系列的产品强大且好用. 但是对Vue的支持是出了名的不好
在编写Vue项目的时候, 往往只能使用Atom等编辑器
我这种 Jetbrains 粉表示不服, 一定有办法使用的.

1. .vue 文件支持:

  1. 安装Vue插件

在设置中选择plugin(插件), 选择 Browse repositories, 左上角搜索Vue


让 WebStorm / PHPStorm 支持 Vue_第1张图片
安装Vue插件
  1. 设置文件支持

在设置中, 将 *.vue 添加进入Vue.js Template 中. 若提示冲突, 点击移除原来的即可


让 WebStorm / PHPStorm 支持 Vue_第2张图片
给Vue template添加文件支持

2. Js支持

  1. 设置JS版本为ECMA 6

在设置中搜索JavaScript, 将JS版本选择为ECMAScript 6


让 WebStorm / PHPStorm 支持 Vue_第3张图片
设置ES6
  1. 设置JS可以不打分号

在设置中搜索Unterminated statement, 将 Unterminated statement 的勾去掉


让 WebStorm / PHPStorm 支持 Vue_第4张图片
设置分号

3.####防止node_modules使IDEA卡死
在IDEA开启的时候, 右下角全局设置
转到file types

右下角添加node_modules
添加node_modules

3. HTML支持Vue的 ":src" 等参数绑定 和 Vue Compoment

同一个窗口下的
三个选项去除


让 WebStorm / PHPStorm 支持 Vue_第5张图片
允许Vue component 和 Vue 参数绑定

3. SCSS/LESS 支持

正常使用


IDEA是无法是别的
要用这样的模式


4. Jade 支持

目前没有完美的方法.
但是谁能阻止程序员的黑科技呢?