安裝插件： Ctrl + P 然后輸入 ext install vetur 然后回車(chē)點(diǎn)安裝即可。

p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便，安裝完成后還不用重啟整個(gè)程序，只要重新加載下工作區(qū)窗口就可以了。

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

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

這時(shí)可以打開(kāi)一個(gè)vue文件試試，注意下右下角狀態(tài)欄是否正確識(shí)別為 vue 類(lèi)型：

如果被識(shí)別為 text 或 html ，則記得要點(diǎn)擊切換下。

可能還有人會(huì)問(wèn)為什么要 ESLint ？沒(méi)有 lint 的代碼雖然也可能可以正確運(yùn)行，但是 lint 作為編譯前的一道檢測(cè)成本更小，而且更快。此外， ESLint 還有很多規(guī)范是幫助我們寫(xiě)出更加優(yōu)雅而不容易出錯(cuò)的代碼的。

jshint 本來(lái)也是個(gè)不錯(cuò)的選擇，但是 ESLint 對(duì) jsx 的支持讓我還是選擇了 ESLint.

安裝插件： Ctrl + P 然后輸入 ext install eslint 然后回車(chē)點(diǎn)安裝即可。

ESLint 不是安裝后就可以用的，還需要一些環(huán)境和配置：

首先，需要全局的 ESLint , 如果沒(méi)有安裝可以使用 npm install -g eslint 來(lái)安裝。

其次，vue文件是類(lèi) HTML 的文件，為了支持對(duì) vue 文件的 ESLint ，需要 eslint-plugin-html 這個(gè)插件。可以使用 npm install -g eslint-plugin-html 來(lái)安裝

接著，安裝了 HTML 插件后，還需要在 vscode 中配置下 ESLint：

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

最后，別忘了在項(xiàng)目根目錄下創(chuàng)建 .eslintrc.json , 如果還沒(méi)創(chuàng)建，還可以使用下面快捷命令來(lái)創(chuàng)建：

這樣一來(lái) vue 中寫(xiě)的 js 代碼也能正確地被 lint 了。

要是不小心少個(gè)括號(hào)之類(lèi)的都可以有對(duì)應(yīng)的報(bào)錯(cuò):

多余 import 也都能報(bào)錯(cuò):

還是蠻智能的。

vue 項(xiàng)目的構(gòu)建我選擇用 webpack ，不過(guò)，并不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 寫(xiě)的 node 腳本。 腳本主要有兩個(gè)，一個(gè)是 build/bin/build.js 另一個(gè)是 build/bin/watch.js 分別是單次構(gòu)建和實(shí)時(shí)構(gòu)建。

于是乎，對(duì)應(yīng) vscode 中的 tasks 也是有兩個(gè)： build 和 watch ，簡(jiǎn)單配置如下：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    // use `Ctrl+P` and type `task` + SPACE +  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 即可開(kāi)始單次構(gòu)建。 不過(guò)單次構(gòu)建比較慢（要10秒+），一般我都用實(shí)時(shí)構(gòu)建：Ctrl + P 然后輸入 task watch <回車(chē)> 即可開(kāi)始實(shí)時(shí)構(gòu)建。實(shí)時(shí)構(gòu)建除了第一次比較慢，其他時(shí)候還是非常快的，一般1秒內(nèi)就可以構(gòu)建好。

webpack 構(gòu)建失敗后一般都會(huì)有錯(cuò)誤提示，會(huì)顯示在輸出窗口中：

為啥是彩色的？ 因?yàn)檠b了 Output Colorizer 這個(gè)插件。

當(dāng)然，這樣還是不夠方便 -- 實(shí)時(shí)構(gòu)建是后臺(tái)運(yùn)行的，“輸出”窗口一般也都是在后臺(tái)，每次保存完文件還得點(diǎn)開(kāi)豈不麻煩。

要是能做到像 ESLint 一樣直接把錯(cuò)誤標(biāo)到編輯器上面就好了。真的可以嗎？翻了下 vscode 的文檔，發(fā)現(xiàn)有神奇的 problemMatcher -- 可以對(duì)任務(wù)輸出進(jìn)行解析，解析出的問(wèn)題會(huì)顯示在“問(wèn)題”窗口中，如果還有文件名行號(hào)和列號(hào)，則會(huì)在源代碼編輯窗口中對(duì)應(yīng)的位置標(biāo)出來(lái)。

先放個(gè)最終效果：

在這個(gè)文件的第32行，import 了一個(gè)不存在的模塊，這樣的錯(cuò)誤在 ESLint 中當(dāng)然是檢查不出來(lái)的，然而在 webpack 的實(shí)時(shí)構(gòu)建中會(huì)報(bào)錯(cuò)：

這個(gè)事情的困難在于兩點(diǎn)：

如何通過(guò) problemMatcher 把這個(gè)錯(cuò)誤給抓出來(lái)？

如何找到錯(cuò)誤對(duì)應(yīng)的行號(hào)？（如果可能的話(huà)，還有列號(hào)）

webpack的錯(cuò)誤輸出格式并不是完全統(tǒng)一的，而且有些還沒(méi)有行號(hào) -- 一方面可能是 webpack 的 bug ，另一方面 vue 文件在構(gòu)建的時(shí)候會(huì)拆成 template, script 和 style 三個(gè)方面進(jìn)行構(gòu)建，報(bào)錯(cuò)的行號(hào)可能對(duì)不上。

最終我的解決方案是對(duì) webpack 的錯(cuò)誤重新格式化輸出，然后匹配：

首先，重新格式化輸出需要 format-webpack-stats-errors-warnings 這個(gè)包（偶新寫(xiě)的）

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

然后，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 構(gòu)建完成的回調(diào)函數(shù)中增加這個(gè)格式化后的輸出：

更多使用介紹見(jiàn) github

最后，在 .vscode/tasks.json 中，每個(gè)任務(wù)下添加 problemWatcher:

// ...
{
    "taskName": "build",
    // ...
    // build 任務(wù)的:
    "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 任務(wù)的：
    "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 任務(wù)中，為了匹配何時(shí)開(kāi)始和何時(shí)結(jié)束，我在 webpack 構(gòu)建的 run 和 watch 時(shí)增加了一個(gè) console.log("Webpack begin run") 的打印，而在構(gòu)建完成后增加了一個(gè) console.log("Build complete at ..") 的打印。

OK，終于基本搞定了 vscode ，可以愉快地開(kāi)發(fā) vue 應(yīng)用了。