vscode Vue開發環境配置

目前 vscode 的 vue 開發環境還不能做到開箱即用，本文提供一個比較可行的配置，主要關注點是 eslint 和 vetur 兩個插件衝突的問題。

首先，Vetur基本上是必不可少的插件了，但是 Vetur 對於前端三劍客(主要是 HTML、JS)的補全做得不是很好。

我之後又安裝了一個VueHelper來解決這個問題，不過現在我不推薦使用VueHelper了，我覺得Vue 2 Snippets會更加好。原因如下:

• 補全指令更多。
• 指令還支持 vue 和 jade，而前者僅僅支持 js、ts、html。

vscode 前端開發需要使用的插件

我列了一組插件列表，截止到 2020 年 5 月 15 號，我覺得這些插件值得你安裝。

插件	作用
Auto Rename Tag	自動同步修改前後標籤名
Code Runner	支持代碼部分運行，快速測試
Easy Sass	一鍵 Sass 轉 Css，對於剛上手 Sass/Scss 的新人可能有用
ES6 Mocha Snippets	提供 Mocha 測試框架的自動補全
ESLint	不用我說，請寫規範的 JS
HTML CSS Support	提供在 HTML 中寫 CSS 的自動補全
jQuery Code Snippets	jQuery 的自動補全
Live Server	類似雨 debug for chrome，但是更加方便，雖然無法單步調試
Node.js Modules Intellisense	vscode 默認情況下連 Node 的模版都補全不了，用這個吧
Prettier - Code formatter	最好用的代碼格式化工具，幾乎支持了前端各種主流語言
Vetur	Vue 開發必備
Vue 2 Snippets	提供很多方便的 Vue 補全指令
web-extension	補全 Chrome 插件的 API，開發 Chrome 插件可以考慮
Webpack Snippets	Webpack 語法的自動補全

ESLint 配置

回到正題，我們先從 eslint 開始。

爲了讓 eslint 在.vue文件上起作用，還需要配置 validate:

"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],

eslint 的報錯比較煩人，有時候也不知道怎麼修復，這種情況下，可以嘗試開啓自動修復。

"editor.codeActionsOnSave": {
    // 自動修復eslint
    "source.fixAll.eslint": true
},

editor.codeActionsOnSave是在代碼保存的時候會觸發的事件，"source.fixAll.eslint": true代表了執行了 eslint 的自動修復。

爲了方便，我們乾脆設置一個自動保存，這樣就可以自動保存，不用快捷鍵保存了，並且從而引發自動修復。

"files.autoSave": "afterDelay",

afterDelay代表每間隔一小段時間之後保存。

更加方便的是，我們可以設置在保存和粘貼代碼的時候就做一次格式化。

"editor.formatOnSave": true,
"editor.formatOnPaste": true,

自動保存，保存的時候格式化且能自動修復 eslint。

Vetur 配置

先專門爲.vue文件配置一個格式化:

"[vue]": {
    // 默認格式化工具
    "editor.defaultFormatter": "octref.vetur",
    // 在什麼時候格式化, Save-保存 Paste-粘貼
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
},

方括號就是針對這們語言的全局編輯器設置。我們可以需要把ectref.vetur作爲默認的格式化工具。

解決 Vetur 和 ESLint 不兼容的問題

要是按照上面的配置，估計會有不少報錯，因爲其實 Vetur 和 ESLint 的一些規範並不兼容。vetur 的格式化並不符合 eslint 的要求。

經測試，格式化是在自動修復的事件之後的，那麼在 eslint 修復之後，vetur 才執行格式化，又變回不符合 eslint 的格式。

原因是他默認使用的格式化工具是Prettier，我一開始也覺得這很神奇，Prettier 的默認配置並不完全遵守 ESLint 的默認規範。

我一開始嘗試調整 Prettier 的配置，但是我還是太天真了，的確可以解決部分 eslint 的報錯，但是還是有一些小地方不行，比如函數名和參數列表之間的空格。

網上給出的方案是使用vscode-typescript，vscode 默認的 ts 格式化組件。

"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typescript",

vscode-typescript 當然也不滿足 eslint，但是還好可以通過配置來解決。

//不使用句末的分號
"javascript.format.semicolons": "remove",
//函數與參數列表之間添加一個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
        // 一行的大小
        "printWidth": 80,
        // 是否使用單引號
        "singleQuote": false,
        // 對HTML屬性排序
        "sortAttributes": true
    },
},

我設置了一些語言的默認配置，大部分配置其實使用 prettier 是沒問題的，但是 prettier 也不符合 ESLint 的 HTML 規範，所以我把 HTML 部分替換成了 prettyhtml。

Emmet 配置

emmet 這樣效率神器要是缺席，實在說不過去。

"emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
},

我們讓 html 的 emmet 作用於 vue-html 和 vue 就好了。

---

現在可以快樂的開始寫 Vue 了。