最近有個項目使用了?Vue.js?，本來一直使用的是 PHPStorm 來進行開發，可是遇到了很多問題。

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

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

vue文件雖然可以通過插件來解決高亮問題，但是?<script>?標簽中的 ES6 代碼的識別老是出問題，箭頭函數有的時候能正確識別，有的時候會報錯

無法正確識別 vue 文件中的 jsx 語法

無法正確識別和高亮 vue 文件?<style>?標簽中使用的 less 語法

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

經常性卡死

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 的實時構建中會報錯：

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

如何通過?problemMatcher?把這個錯誤給抓出來？

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

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 應用了。

?

?

文章來源：https://segmentfault.com/a/1190000008749631

轉載于:https://www.cnblogs.com/hfxm/p/8391414.html

總結

以上是生活随笔為你收集整理的如何优雅地使用 VSCode 来编辑 vue 文件？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。