VS Code 快速使用指南
最近團隊為了保持較好的前端開發規範，鼓勵大家使用同一款編輯器，我們選擇了vscode, 因為團隊大部分人都在用，而且用起來很爽。為了讓沒有用vscode的同學快速瞭解它，我收集了網上一些資料加上自己的一點日常使用經驗寫了這篇介紹文章。
vscode 使用介紹
Visual Studio Code （簡稱 VS Code）是由微軟研發的一款免費、開源的跨平臺文字（程式碼）編輯器。
我們將從一下幾個部分來認識vscode
- 基本配置
- 整合
- 版本控制
- 程式碼除錯
1 基本配置
- 直接官網下載 ofollow,noindex">code.visualstudio.com/
- 首選項 ， 如下圖，通過首選項，我們可以設定vscode 的基本配置 以及快捷鍵、使用者自定義主題等。
如下圖，基本配置實際上是一個json檔案，裡面有自帶的預設配置，除此之外，我們每安裝一個外掛，都會生成一個新的json,我們通過在右側輸入自定義的json配置，就可以覆蓋預設的配置項
- 快捷鍵 ，點選首選項下的快捷鍵可以檢視和修改所有的快捷鍵配置
2 整合
vscode 集成了大量第三方外掛，通過第三方外掛可以大大提高我們的開發效率
常用外掛推薦
- vuetr vue 格式化外掛
- vscode-fileheader 自動儲存檔案建立人及修改人
- Auto Close Tag 自動關閉html標籤
- Dark Dark - 貓哥基於預設 Dark 主題修改的增強主題
- EditorConfig for VS Code - 用於支援 .editorconfig 配置規範
- ESLint - 用於支援 JavaScript 實時語法校驗
- Git History - 可檢視檔案的 git log 並進行對比
- HTML Snippets - 能修復預設 HTML Emmet 的一些問題
- Material Icon Theme - 左側檔案導航欄 Icon 主題
- Settings Syncs - 用於同步 VS Code 的配置到個人 gist 倉庫
更多外掛支援 可以看這篇文章 《強大的 VS Code》 https://juejin.im/post/5b123ace6fb9a01e6f560a4b
就列這麼多 大家可以自己摸索...
3 版本控制
vscode 集成了git 切換至 Git 面板，點選左側被修改的檔案，即可進行版本對比。
4 程式碼除錯
Visual Studio Code 的關鍵特性之一就是它對除錯的支援。在除錯中如同chrome 瀏覽器的debug 一樣，對於前端來說，能夠非常方便進行nodeJS 程式碼除錯 ,同時除錯支援替他語言，
我們可以安裝外掛支援如python 等語言的除錯
更多資訊 參考官網 code.visualstudio.com/docs/editor…
除錯配置檔案 launch.json
如果我們預設通過vscode 來除錯程式碼，會生成一個launch.json 配置檔案， 詳細細節可以檢視官方文件 code.visualstudio.com/docs/editor… 我們這裡只說說我們一般會常用的地方。
lunch.json 配置項
- 必選欄位
type：偵錯程式型別。這裡是 node(內建的偵錯程式)，如果裝了 Go 和 PHP 的擴充套件後對應的 type 分別為 go 和 php request：請求的型別，目前只支援 launch 和 attach。launch 就是以 debug 模式啟動除錯，attach 就是附加到已經啟動的程序開啟 debug 模式並除錯，跟上一篇提到的用 node -e "process._debugProcess(PID)" 作用一樣 name：下拉選單顯示的名字 複製程式碼
- 可選欄位
program：可執行檔案或者偵錯程式要執行的檔案 (launch) args：要傳遞給除錯程式的引數 (launch) env：環境變數 (launch) cwd：當前執行目錄 (launch) address：ip 地址 (launch & attach) port：埠號 (launch & attach) skipFiles：想要忽略的檔案，陣列型別 (launch & attach) processId：程序 PID (attach) 複製程式碼
同時目錄變數有
${workspaceRoot}：當前開啟工程的路徑
${file}：當前開啟檔案的路徑
${fileBasename}：當前開啟檔案的名字，包含字尾名
${fileDirname}：當前開啟檔案所在的資料夾的路徑
${fileExtname}：當前開啟檔案的字尾名
${cwd}：當前執行目錄
複製程式碼
通常一個預設的launch.json 預設配置如下
{
"version": "0.2.1",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "啟動程式",
"program": "${workspaceFolder}/index.js"
}
]
}
複製程式碼
這個配置會直接執行index.js 我們專案目錄下的index.js 檔案。
除錯技巧
-
條件斷點
1 表示式：當表示式計算結果為 true 時中斷 ,如這裡可以判斷 ctx.body.aaa = '1' ,當為滿足這個條件時，才會斷點
2 命中次數 同樣當表示式計算結果為 true進入斷點，支援運算子 <, <=, ==, >, >=, %。
-
skipFiles 在除錯時檔案要跳過的一組 glob 模式
我們在單步除錯時一般會進入到node_modules目錄，但是我們一般往往只想除錯我們的專案程式碼，所以這個時候可以通過配置 skipFiles 來進行過濾 詳細官方文件參考 ping-uninteresting-code-node-chrome" rel="nofollow,noindex">code.visualstudio.com/docs/nodejs…
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/lib/**/*.js"
]
"skipFiles": [
"<node_internals>/**/*.js"
]
複製程式碼
-
自動重啟
通過新增配置可以實現修改程式碼儲存後會自動重啟除錯，需要結合 nodemon 一起使用。 首先安裝nodemon
npm i nodemon -g
{
"version": "0.2.1",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "debug-app",
"runtimeExecutable": "nodemon",要使用的執行時。一個絕對路徑或路徑上可用的執行時名稱。如果省略，則假定為“節點”。
"program": "${workspaceRoot}/app.js",
"restart": true,
"console": "integratedTerminal",
"skipFiles": [
"${workspaceRoot}/node_modules/**/*.js",
"<node_internals>/**/*.js"
]
}
]
}
複製程式碼
引數說明
- runtimeExecutable：用什麼命令執行 app.js，這裡設定為 nodemon，預設是 node
- restart：設定為 true，修改程式碼儲存後會自動重啟除錯
- console：當點選停止按鈕或者修改程式碼儲存後自動重啟除錯，而 nodemon 是仍然在執行的，通過設定為 console 為 integratedTerminal 可以解決這個問題。此時 VS Code 終端將會列印 nodemon 的 log，可以在終端右側下拉選單選擇返回第一個終端，然後執行 curl localhost:3000 除錯