VS Code 快速使用指南

前言

最近團隊為了保持較好的前端開發規範，鼓勵大家使用同一款編輯器，我們選擇了vscode, 因為團隊大部分人都在用，而且用起來很爽。為了讓沒有用vscode的同學快速瞭解它，我收集了網上一些資料加上自己的一點日常使用經驗寫了這篇介紹文章。

vscode 使用介紹

Visual Studio Code （簡稱 VS Code）是由微軟研發的一款免費、開源的跨平臺文字（程式碼）編輯器。

我們將從一下幾個部分來認識vscode

基本配置
整合
版本控制
程式碼除錯

1 基本配置

直接官網下載 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 倉庫

就列這麼多大家可以自己摸索...

3 版本控制

vscode 整合了git 切換至 Git 皮膚，我們可以直接通過圖形操作介面執行git命令，如：點選左側被修改的檔案，即可進行版本對比。同時

對於習慣命令操作得當同學，也可以直接在終端中執行git 命令或者ctrl + P 直接快速選擇命令

4 程式碼除錯

Visual Studio Code 的關鍵特性之一就是它對除錯的支援。在除錯中如同chrome 瀏覽器的debug 一樣，vscode 預設支援nodeJs 程式碼除錯，我們可以安裝第三方外掛來除錯其他語言的程式碼。對於前端來說，能夠非常方便進行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 來進行過濾詳細官方文件參考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 除錯

總結

以上差不多就是我們能夠常用到的vscode 的地方，我個人覺得在使用過程中好的地方主要是兩點即 1、第三方外掛的使用可以極大地豐富我們的使用功能 2、除錯功能用起來真的很爽。 vscode是一個十分強大的IDE工具以上列出來的只是冰山一角之一角。有興趣的可以直接看文件code.visualstudio.com/docs，可以發掘出更多有意思的東西。