1. github鐨剉ue欏圭洰鎬庝箞鍦╲scode榪愯
鎵撳紑config/index.js騫舵壘鍒癲evtool灞炴с
鐢ㄦ湰鍦癵it瀹㈡埛絝灝唙ue欏圭洰浠巊ithub鍏嬮殕鍒版湰鍦幫紝鐢╲scode鎵撳紑錛屽畬鎴愮紪杈戙傚湪vscode閲屾柊鎵撳紑涓闂蜂憨涔庝釜鍛戒護琛岀粓絝鑰愯厞錛屽湪緇堢紿楀彛閲屼嬌鐢╲ue瀵瑰簲鐨勮剼鎵嬫灦鍛戒護鍚鍔ㄩ」鐩銆
閫氳繃蹇鎹鋒柟寮忔墦寮VisualStudioCode宸ヨ殏鎮夊叿錛岀劧鍚庢柊寤洪潤鎬侀〉闈銆傚壋寤轟竴涓闈欐侀〉闈table.html錛屽苟娣誨姞欏甸潰浠ｇ爜錛岀劧鍚庝繚瀛橈紝浣跨敤嫻忚堝櫒鏌ョ湅銆傜偣鍑籉ile鑿滃崟錛岄夋嫨OpenFolder錛屽皢欏圭洰瀵煎叆鍒癡isualStudioCode銆
2. 如何優雅地使用 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 ..") 的列印。
3. 鐢╲scode寮鍙憊ue錛屾湁寰堝氭姤綰錛屽疄闄呬笂娌℃湁閿欒錛屽彲浠ユｅ父鍚鍔錛
榪欑嶆儏鍐甸氬父鏄鍥犱負VSCode鐨勬彃浠舵垨鑰呴厤緗涓嶆ｇ『錛屽艱嚧瀵筕ue欏圭洰鐨勮娉曟鏌ユ湁璇銆傝峰皾璇曚互涓嬫ラゆ潵瑙ｅ喅榪欎釜闂棰橈細
紜淇濅綘宸茬粡瀹夎呬簡Vetur鎻掍歡銆傝繖鏄涓涓寰堝彈嬈㈣繋鐨刅ue寮鍙戞彃浠訛紝鍙浠ユ敮鎸乂ue璇娉曢珮浜銆佹櫤鑳芥彁紺恆佷唬鐮佽ˉ鍏ㄧ瓑鍔熻兘銆傚湪VSCode涓錛岀偣鍑誨乏渚х殑鎻掍歡鍥炬爣錛屾悳鑰呴傜儲鈥淰etur鈥濓紝鐒跺悗瀹夎呭畠銆
濡傛灉浣犲凡緇忓畨瑁呬簡鍏朵粬鐨刅ue鎻掍歡錛岃峰皾璇曠佺敤瀹冧滑錛屼互閬垮厤鎻掍歡涔嬮棿鐨勫啿紿併
紜淇濅綘鐨勯」鐩涓鍖呭惈涓涓.eslintrc.js鎴栬.eslintrc.json鏂囦歡錛岀敤浜庨厤緗瓻SLint鐨勮勫垯銆傚湪榪欎釜鏂囦歡涓錛屼綘鍙浠ユ坊鍔犱互涓嬪唴瀹規潵閰嶇疆Vue鐨勮勫垯錛
mole.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-console': process.env.NODE_ENV === 'proction' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'proction' ? 'warn' : 'off',
},
};
紜淇濅綘鐨勯」鐩涓鏈変竴涓.vscode鏂囧潶榪熶歡澶癸紝鍏朵腑鍖呭惈涓涓猻ettings.json鏂囦歡銆傚傛灉娌℃湁錛岃峰壋寤轟竴涓銆傚湪settings.json鏂囦歡涓錛屾坊鍔犱互涓嬪唴瀹癸紝浠ヤ究璁￢SCode浣跨敤Vetur鍜孍SLint鎻掍歡錛
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"vetur.validation.template": true,
"vetur.validation.script": true,
"vetur.validation.style": true
}
淇濆瓨鎵鏈夋洿鏀癸紝鐒跺悗閲嶅惎VSCode銆
緇忚繃浠ヤ笂姝ラわ紝VSCode搴旇ヨ兘姝ｇ『璇嗗埆Vue欏圭洰棣栦俊閮戜腑鐨勮娉曪紝綰㈢嚎闂棰樹篃搴旇ュ緱鍒拌В鍐熾傚傛灉闂棰樹粛鐒跺瓨鍦錛岃鋒鏌ヤ綘鐨勯」鐩渚濊禆鏄鍚︽ｇ『瀹夎咃紝浠ュ強閰嶇疆鏂囦歡鏄鍚﹁劇疆姝ｇ『銆
4. vue VSCode 寮鍙戣劇疆錛坔tml鑷鍔ㄨˉ鍏ㄣ乪slint淇濆瓨鏃舵牸寮忓寲銆乿etur 鏍煎紡鍖杊tml錛
File -> Preference -> Setting ->鎼滅儲setting.json -> Edit in settings.json
settings.json
鏂規硶1錛欶ile -> Preference -> Setting ->鎼滅儲setting.json -> Edit in settings.json
settings.json
Setting.json
鏂規硶2錛欶ile -> Preference -> 鎼滅儲妗嗚緭鍏ワ細琛岃宖iles.autoSave
涔嬪悗鑳界湅鍒 files.autoSave 鐨勫彲閫夐」鏈
off : 鍏抽棴鑷鍔ㄤ繚瀛橈紙榛樿わ級
afterDelay: 寤惰繜xx鏃墮棿鍚庝繚瀛橈紝鍙鍦 "files.autoSaveDelay" 涓閰嶇疆寤惰繜鏃墮棿錛
onFocusChange: 緙栬緫鍣ㄥけ鍘葷劍鐐規椂鑷鍔ㄤ繚瀛橈紱
onWindowChange: 紿楀彛澶卞幓鐒︾偣鏃(緙栬緫鍣ㄧ獥鍙ｇ殑鍒囨崲錛屾岄潰紿楀彛鐨勫垏鎹)鑷鍔ㄤ繚瀛橈紱
瀹夎 ESLint https://cn.eslint.org/
vscode 涓瀹夎 ESLint 鎻掍歡
鐒跺悗閰嶇疆 vscode 鐨 setting.json
File -> Preference -> User Snippers
vue.json鏂囦歡錛岀劧鍚庢坊鍔犱笅闈㈡ā鏉
鐒跺悗鏂板緩.vue鏂囦歡 錛屽啓涓媣ue鐒跺悗Tap閿灝辮兘鐢熸垚浠涔堢殑閫楃熸ā鏉褲
濡傛灉娌℃湁鐢熸垚妯℃澘鍙鏄澶氫簡涓絀烘牸鎴栬呯敓鎴愮殑鏄痸ue鏍囩劇殑璇濓紝鎴戜滑榪樺緱璁劇疆涓涓嬶紝鎵撳紑settings.json錛屾坊鍔犱笅闈㈢殑璁劇疆
濡傛灉浣犵殑Setting.json鏂囦歡灞卞甫鍏嗘湁 "files.associations" 璁劇疆鐨勮瘽錛岃峰垹闄わ紝鍥犱負浠栦細鍜屼笂闈 emmet.syntaxProfiles 鍐茬獊銆
files.associations 鍜 emmet.syntaxProfiles 閮芥槸璁劇疆html 鏍囩劇殑琛ュ叏錛屽傛灉鏄瑕佺敤.vue妯℃澘琛ュ叏鍔熻兘鐨勮瘽錛宧tml鏍囩捐ˉ鍏ㄦ垜浠灝辯敤 emmet.syntaxProfiles 鏉ヨ劇疆銆
vue 鐨勫紑鍙戜腑 vscode 鍙瑁呯敤浜庡紑鍙戣勮寖鐨勬彃浠舵湁
Prettier 錛氳勮寖js
ESLint: 瑙勮寖js
Vuter: 瑙勮寖 .vue 鏂囦歡涓 template
stylus: 瑙勮寖 stylus
娉ㄦ剰錛氫互涓嬮厤緗鏄鍩轟簬鎺ヤ笅鏉ヤ粙緇嶇殑鎻掍歡璁劇疆鐨勶紝濡傛灉娌℃湁瀹夎呮彃浠舵槸涓嶄細鐢熸晥鐨勩
鎴栬咃細
鍏朵腑錛
4.濡傛灉浣跨敤浜唖tylus錛岄偅涔坴scode瀹夎卻tylus鎻掍歡錛岃繘琛岃劇疆錛屼笉閫傜敤鍐掑彿鍙屽紩鍙峰ぇ鎷鍙
鏍圭洰褰曚笅鍒涘緩eslint瑙勫垯鏂囦歡 .eslintrc.js
錛堜笅闈browsers 澶氫簡s 姝ｇ『鐨勪負 browser 錛
5. vsCode涓緙栧啓vue欏圭洰鏃訛紝webpack閰嶇疆鐨刟lias鍒鍚嶆棤鏁
1銆乿sCode宸ュ叿閰嶇疆錛坰ettings.json鏂囦歡閰嶇疆鎵鏈夐」鐩鍙鐢錛
瑙ｅ喅鏂規堜竴錛
鍦ㄦ彃浠跺競鍦轟腑瀹夎匬ath Intellisense鎻掍歡騫跺惎鐢ㄣ傛牴鎹浠ヤ笅鎻愮ず淇℃伅錛屼慨鏀箆sCode閰嶇疆鏂囦歡settings.json鏂囦歡錛
瑙ｅ喅鏂規堜簩錛
鍦ㄦ彃浠跺瓭鍨嬬盡甯傚満涓瀹夎匬ath Autocomplete鎻掍歡騫跺惎鐢ㄣ傛牴鎹浠ヤ笅鎻愮ず淇℃伅錛屼慨鏀箆sCode閰嶇疆鏂囦歡settings.json鏂囦歡錛
2銆侀」鐩閰嶇疆
濡傞」鐩闇瑕佸崟鐙閰嶇疆錛屽彲鏍規嵁浠ヤ笅鎻愮ず淇℃伅銆傚湪欏圭洰鏍圭洰褰曚腑娣誨姞jsconfig.json鎴杢sconfig.json鏂囦歡錛
鍏蜂綋閰嶇疆濡備笅錛
{
"compilerOptions": {
// 欏圭洰鏍硅礬寰
"baseUrl": "./",
// 鍒鍚嶆槧灝勮礬寰
"paths":{
"@/*": ["宸ф媿src/*"],
"store/*": ["src/store/moles/*"]
}
},
// 緙栬瘧鏃舵帓闄や互涓嬬洰褰曟枃浠朵嬌鐢ㄩ厤緗瑙勫垯
"exclude": [
"node_moles",
"dist"
],
// 緙栬瘧鏃跺寘縐熷矓鍚浠ヤ笅鐩褰曟枃浠朵嬌鐢ㄩ厤緗瑙勫垯
"include": [
"./src/**/*.vue"
]
}
緇撹錛歷sCode宸ュ叿閰嶇疆鍒鍚嶆椂鎺ㄨ崘浣跨敤絎浜岀嶆柟妗堬紙鍥犱負絎涓縐嶄笉澶濂界敤錛