如何優雅地使用 VSCode 來編輯 vue 文件？

注：本文首發在 個人我的博客

最近有個項目使用了 Vue.js ，原本一直使用的是 PHPStorm 來進行開發，但是遇到了不少問題。

後來，果斷放棄收費的 PHPStorm ，改用 vscode (Visual Stdio Code).
固然 vscode 對 vue 也不是原生支持的，今天來扒一扒如何配置 vscode 以便優雅地編輯 vue 文件

先來扒一扒使用 PHPStorm 遇到的問題：

1. vue文件雖然能夠經過插件來解決高亮問題，可是 <script> 標籤中的 ES6 代碼的識別總是出問題，箭頭函數有的時候能正確識別，有的時候會報錯

2. 沒法正確識別 vue 文件中的 jsx 語法

3. 沒法正確識別和高亮 vue 文件 <style> 標籤中使用的 less 語法

4. vue文件中 <template> 部分使用了大量的自定義標籤（自定義組件）和自定義屬性，會報一堆 warning

5. 常常性卡死

6. webpack實時編譯的錯誤不能直接展現在代碼編輯器內，還得本身到控制檯中查看

如何安裝 vscode

很簡單，傳送門：官網下載安裝

第一步，要支持 vue 文件的基本語法高亮

這裏，我試過好3個插件： vue, VueHelper 和 vetur ，最終選擇使用 vetur 。

安裝插件： Ctrl + P 而後輸入 ext install vetur 而後回車點安裝便可。

p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便，安裝完成後還不用重啓整個程序，只要從新加載下工做區窗口就能夠了。

安裝完 vetur 後還須要加上這樣一段配置下：

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

這時能夠打開一個vue文件試試，注意下右下角狀態欄是否正確識別爲 vue 類型：

若是被識別爲 text 或 html ，則記得要點擊切換下。

第二步，要支持 vue 文件的 ESLint

可能還有人會問爲何要 ESLint ？沒有 lint 的代碼雖然也可能能夠正確運行，可是 lint 做爲編譯前的一道檢測成本更小，並且更快。此外， ESLint 還有不少規範是幫助咱們寫出更加優雅而不容易出錯的代碼的。

jshint 原本也是個不錯的選擇，可是 ESLint 對 jsx 的支持讓我仍是選擇了 ESLint.

安裝插件： Ctrl + P 而後輸入 ext install eslint 而後回車點安裝便可。

ESLint 不是安裝後就能夠用的，還須要一些環境和配置：

首先，須要全局的 ESLint , 若是沒有安裝可使用 npm install -g eslint 來安裝。

其次，vue文件是類 HTML 的文件，爲了支持對 vue 文件的 ESLint ，須要 eslint-plugin-html 這個插件。可使用 npm install -g eslint-plugin-html 來安裝

接着，安裝了 HTML 插件後，還須要在 vscode 中配置下 ESLint：

"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": ["html"]
    },

最後，別忘了在項目根目錄下建立 .eslintrc.json , 若是還沒建立，還可使用下面快捷命令來建立：

這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了。

要是不當心少個括號之類的均可以有對應的報錯:

多餘 import 也都能報錯:

仍是蠻智能的。

第三步，配置構建任務

vue 項目的構建我選擇用 webpack ，不過，並非直接使用命令行下的 webpack 而是使用了 webpack 的 API 寫的 node 腳本。 腳本主要有兩個，一個是 build/bin/build.js 另外一個是 build/bin/watch.js 分別是單次構建和實時構建。

因而乎，對應 vscode 中的 tasks 也是有兩個： build 和 watch ，簡單配置以下：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    // use `Ctrl+P` and type `task` + SPACE + <taskName> to run a task
    "version": "0.1.0",
    "tasks": [
        {
            "taskName": "build",
            "echoCommand": true,
            "command": "node",
            "args": [
                "build/bin/build.js"
            ],
            "suppressTaskName": true,
            "isBuildCommand": true
        },
        {
            "taskName": "watch",
            "echoCommand": true,
            "command": "node",
            "args": [
                "build/bin/watch.js"
            ],
            "suppressTaskName": true,
            "isBackground": true
        }
    ]
}

這樣配置好後，按 Ctrl + Shift + B 便可開始單次構建。 不過單次構建比較慢（要10秒+），通常我都用實時構建：Ctrl + P 而後輸入 task watch <回車> 便可開始實時構建。實時構建除了第一次比較慢，其餘時候仍是很是快的，通常1秒內就能夠構建好。

最後，webpack 構建錯誤提示

webpack 構建失敗後通常都會有錯誤提示，會顯示在輸出窗口中：

爲啥是彩色的？ 由於裝了 Output Colorizer 這個插件。

固然，這樣仍是不夠方便 -- 實時構建是後臺運行的，「輸出」窗口通常也都是在後臺，每次保存完文件還得點開豈不麻煩。

要是能作到像 ESLint 同樣直接把錯誤標到編輯器上面就行了。真的能夠嗎？翻了下 vscode 的文檔，發現有神奇的 problemMatcher -- 能夠對任務輸出進行解析，解析出的問題會顯示在「問題」窗口中，若是還有文件名行號和列號，則會在源代碼編輯窗口中對應的位置標出來。

先放個最終效果：

在這個文件的第32行，import 了一個不存在的模塊，這樣的錯誤在 ESLint 中固然是檢查不出來的，然而在 webpack 的實時構建中會報錯：

這個事情的困難在於兩點：

1. 如何經過 problemMatcher 把這個錯誤給抓出來？

2. 如何找到錯誤對應的行號？（若是可能的話，還有列號）

webpack的錯誤輸出格式並非徹底統一的，並且有些尚未行號 -- 一方面多是 webpack 的 bug ，另外一方面 vue 文件在構建的時候會拆成 template, script 和 style 三個方面進行構建，報錯的行號可能對不上。

最終個人解決方案是對 webpack 的錯誤從新格式化輸出，而後匹配：

首先，從新格式化輸出須要 format-webpack-stats-errors-warnings 這個包（偶新寫的）

npm install --save-dev format-webpack-stats-errors-warnings

而後，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 構建完成的回調函數中增長這個格式化後的輸出：

更多使用介紹見 github

最後，在 .vscode/tasks.json 中，每一個任務下添加 problemWatcher:

// ...
{
    "taskName": "build",
    // ...
    // build 任務的:
    "problemMatcher": {
        "owner": "webpack",
        "fileLocation": [
            "relative",
            "${workspaceRoot}"
        ],
        "pattern": {
            "regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
            "severity": 1,
            "file": 2,
            "line": 3,
            "column": 4,
            "endLine": 5,
            "endColumn": 6,
            "message": 7
        }
    }
}

{
    "taskName": "watch",
    // ...
    // watch 任務的：
    "problemMatcher": {
        "owner": "webpack",
        "fileLocation": [
            "relative",
            "${workspaceRoot}"
        ],
        "pattern": {
            "regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
            "severity": 1,
            "file": 2,
            "line": 3,
            "column": 4,
            "endLine": 5,
            "endColumn": 6,
            "message": 7
        },
        "watching": {
            "activeOnStart": true,
            "beginsPattern": "^\\s*Webpack begin run",
            "endsPattern": "^\\s*Build complete at"
        }
    }
    // ...
}
// ...

注：在 watch 任務中，爲了匹配什麼時候開始和什麼時候結束，我在 webpack 構建的 run 和 watch 時增長了一個 console.log('Webpack begin run') 的打印，而在構建完成後增長了一個 console.log("Build complete at ..") 的打印。

OK，終於基本搞定了 vscode ，能夠愉快地開發 vue 應用了。