让 WebStorm / PHPStorm 支持 Vue

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

1. .vue 文件支持:

1. 安装Vue插件

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

安装Vue插件

2. 设置文件支持

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

给Vue template添加文件支持

2. Js支持

1. 设置JS版本为ECMA 6

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

设置ES6

2. 设置JS可以不打分号

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

设置分号

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

右下角添加node_modules 添加node_modules

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

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

允许Vue component 和 Vue 参数绑定

3. SCSS/LESS 支持

正常使用

<style lang='less'>...</style>

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

<style lang="less" rel="stylesheet/less" type="text/css">...</style>

4. Jade 支持

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

<template lang='pub' src='./你的Jade模板.pug'>

这样就能够在IDEA上愉快的使用Vue了~
整理不易, 转载请注明出处