在 WebStorm/PhpStorm 中開啓對 Vue.js 的完美支持

 版權聲明：本文爲SteinKuo做者的原創文章，未經 Steinkuo容許不得轉載 https://blog.csdn.net/gh254172840/article/details/79114966 最近的一個先後端分離項目開始使用 Vue.js 進行開發，就順便優化了一下 PhpStorm 下的開發體驗（PhpStorm 版本爲 2017.1）。

注：在最新的 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" type="text/scss" scoped>   @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 方法了。

模塊跳轉、語法分析等功能均正常使用：