版權聲明：本文為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 方法了。
模塊跳轉、語法分析等功能均正常使用：
--------------------- 作者：SteinKuo 來源：CSDN 原文：https://blog.csdn.net/gh254172840/article/details/79114966 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！