Visual Studio Code 使用筆記

yongxue發表於2020-08-12

簡介

接下來我將分享一下 Visual Studio Code 的常用配置和使用技巧。VSCode 文件地址

選擇主題

如果需要更換主題,可以透過 File > Preferences > Color Theme 或者使用 Ctrl + K Ctrl + T 快捷鍵開啟主題選單來選擇主題。

使用者和工作區配置

VSCode 提供了兩種不同的配置範圍:

  • 使用者配置 -全域性應用於你開啟的任何 VSCode 例項的配置。
  • 工作區配置 -儲存在工作區中的配置,僅在開啟工作區時適用。

工作區配置將覆蓋使用者配置。工作區配置特定於專案,方便開發人員之間共享。

要開啟使用者和工作區配置透過如下方式:

  • Windows/Linux -File > Preferences > Settings
  • macOS -Code > Preferences > Settings

也可以使用快捷鍵 Ctrl + Shift + P 然後輸入 Preferences: Open Settings 以 UI 或 JSON 檔案形式來開啟配置。

預設情況下我們開啟配置檔案是以 UI 配置的形式開啟的,如果你不想使用 UI 而習慣使用 JSON 檔案形式來配置的話,可以在 settings.json 配置檔案中將 workbench.settings.editor 配置項設定為 json 來修改開啟配置檔案方式,該配置項有兩個引數值 uijson

使用者配置檔案位於以下位置:

  • Windows %APPDATA%\Code\User\settings.json
  • macOS $HOME/Library/Application Support/Code/User/settings.json
  • Linux $HOME/.config/Code/User/settings.json

工作區通常只是在你的專案根資料夾下,工作區配置、除錯配置及任務配置都在專案根目錄下的 .vscode 資料夾中。
.vscode 中有如下幾個檔案,除錯配置檔案 launch.json、任務配置檔案 tasks.json 和工作區配置檔案 settings.json

儲存/自動儲存

預設情況下需要手動來儲存檔案,如使用快捷鍵 Ctrl + S 來儲存檔案。
如果嫌太麻煩的話可配置成自動儲存,開啟 File > Auto Save 配置即可。

如果需要更精細的配置則開啟使用者的 settings.json 配置檔案加入以下配置。

files.autoSave: 配置值如下

  • off 禁用自動儲存。
  • afterDelay 延遲(預設1000 ms)後儲存檔案。
  • onFocusChange 當焦點移出編輯後的檔案時儲存檔案。
  • onWindowChange 當焦點移出 VSCode 視窗時儲存檔案。

files.autoSaveDelay: 延遲儲存檔案的時間配置,當 files.autoSave 的值為 afterDelay 時該值生效,單位為毫秒(預設 1000 ms)。

格式化

VSCode 編輯器有兩個明確的格式化操作:

  • Format Document (Shift + Alt + F) -格式化整個活動檔案。
  • Format Selection (Ctrl + K Ctrl + F) -格式化所選文字。

VSCode 具有 JavaScript,TypeScript,JSON 和 HTML 的預設格式化程式。每種語言都有特定的格式設定選項(例如 html.format.indentInnerHtml ),也可以在使用者或工作區配置中將其調整為自己的偏好。如果安裝了另一個擴充套件程式也可以提供相同語言的格式化配置,也可以禁用預設語言格式化程式,如下。

"html.format.enable": false

除了手動呼叫程式碼格式外,還可以根據使用者動作(例如鍵入、儲存或貼上)來觸發格式化。這些預設情況下處於關閉狀態,但是可以透過以下設定啟用這些行為:

  • editor.formatOnType 鍵入後設定行格式。
  • editor.formatOnSave 儲存時格式化檔案。
  • editor.formatOnPaste 格式化貼上的內容。

以上的配置選項值用 truefalse 來開啟或關閉配置。

縮排

VSCode 可以控制文字的縮排以及是否要使用空格或製表符。VSCode 預設情況是插入空格,每個 Tab 鍵使用 4 個空格。如果想使用其他設定,則可以修改 editor.insertSpaceseditor.tabSize 配置項。

// 是否使用空格
"editor.insertSpaces": true,
// 空格或製表符的大小
"editor.tabSize": 4,

VSCode 會分析開啟的檔案並確定文件中使用的縮排。自動檢測到的縮排將覆蓋預設縮排設定。檢測到的設定顯示在狀態列的右側:
自動檢測縮排

可以單擊狀態列的縮排字樣以顯示可修改縮排命令的下拉選單,允許你更改開啟檔案的預設設定,在製表符和空格之間進行轉換。
縮排命令

檔案編碼支援

可以在 “使用者配置” 或 “工作區配置” 中的 files.encoding 配置項修改檔案編碼,該配置項預設值為 utf8
也可以在狀態列中檢視檔案編碼。
在狀態列中編碼

單擊狀態列中的編碼按鈕,以使用其他編碼重新開啟或儲存活動檔案。
重新開啟或使用其他編碼儲存

然後選擇一種編碼。
選擇編碼

摺疊程式碼

摺疊程式碼在單個檔案有非常多的函式或方法時非常有用。
可以使用以下快捷操作來摺疊程式碼:

  • 摺疊 (Ctrl + Shift + [) 在游標處摺疊最裡面的未摺疊區域。
  • 展開 (Ctrl + Shift + ]) 在游標處展開摺疊區域。
  • 切換摺疊 (Ctrl + K Ctrl + L) 摺疊或展開游標處的區域。
  • 遞迴摺疊 (Ctrl + K Ctrl + [) 在游標處摺疊最裡面的未摺疊區域以及該區域內的所有區域。
  • 遞迴展開 (Ctrl + K Ctrl + ]) 展開游標處的區域以及該區域內的所有區域。
  • 摺疊 X 級 (Ctrl + K Ctrl + 2 第 2 級) 摺疊 X 級的所有區域,除了當前游標位置的區域(級別有 0-8 級)。
  • 摺疊所有塊註釋 (Ctrl + K Ctrl + /) 摺疊以塊註釋標記開頭的所有區域。
  • 全部摺疊 (Ctrl + K Ctrl + 0) 摺疊編輯器中的所有區域。
  • 全部展開 (Ctrl + K Ctrl + J) 在編輯器中展開所有區域。

預設情況下,摺疊區域基於線條的縮排進行評估。當一行的縮排量小於一個或多個後續行時,摺疊區域開始,而當縮排相同或較小的行時,摺疊區域結束。

搜尋替換

VSCode 可以快速查詢當前開啟檔案的文字並替換。按 Ctrl + F 在編輯器中開啟 “查詢小部件”,搜尋結果將在編輯器的概述標尺和小地圖中突出顯示。
如果當前開啟的檔案中有多個匹配結果,則在查詢輸入框處於焦點狀態時,可按 Enter 鍵和 Shift + Enter 鍵導航到下一個或上一個結果。
開啟 “查詢小部件” 後,它將自動在編輯器中將所選文字填充到 “查詢” 輸入框中。如果選擇為空,則會將游標下方的單詞插入到輸入框中。
可以透過設定 editor.find.seedSearchStringFromSelection 為 false 關閉此功能。

預設情況下,查詢操作在編輯器中的整個檔案上執行。但它也可以在選定的文字上執行。可以透過單擊 “查詢” 小部件上的漢堡包圖示來啟用此功能。

漢堡包圖示

如果希望它成為 “查詢小部件” 的預設行為,則可以將 editor.find.autoFindInSelection 設定為 always 或者 multiline

除了查詢和替換為純文字之外,”查詢小部件” 還具有三個高階搜尋選項:

  • Match Case -區分大小寫
  • Match Whole Word -匹配整個單詞
  • Regular Expression -正規表示式

替換輸入框支援保留大小寫,可以透過單擊儲存大小寫(AB)按鈕將其開啟,開啟後替換框的大寫字母都會轉換為小寫後再替換。

Visual Studio Code 使用筆記

你可以透過將文字貼上到 “查詢輸入框” 或 “替換輸入框” 中,可以搜尋替換多行文字。按下 Ctrl + Enter 會在輸入框中插入新的一行。
Multiple Line Support

搜尋長文字時,”查詢小部件” 的預設大小可能太小。可以拖動左窗框以放大 “查詢小部件”,或雙擊左窗框以將其最大化或縮小到其預設大小。
Resize Find Widget

VSCode 還可以快速搜尋當前開啟的資料夾中的所有檔案。按 Ctrl + Shift + F 並輸入關鍵字。搜尋結果被分組到包含關鍵字的檔案中,並標明每個檔案中的匹配項及其位置。展開檔案可以檢視該檔案中的所有匹配預覽。然後,單擊其中一個匹配項,在編輯器中檢視它。
A simple text search across files

也支援在搜尋框中進行正規表示式搜尋。

還可以透過單擊右側搜尋框下方的省略號(或切換搜尋詳細資訊)來配置高階搜尋選項(或按 Ctrl + Shift + J)。這將顯示其他欄位以配置搜尋。

Visual Studio Code 使用筆記

進階搜尋選項

進階搜尋選項

在搜尋框下面的輸入框中,可以輸入包含(files to include)或排除(files to exclude)搜尋的模式。如果你輸入 example,它將匹配工作區中名為 example 的每個資料夾和檔案。如果你輸入 ./example,它將匹配工作區頂層的資料夾 example/。使用 ! 將這些模式從搜尋中排除。!example 將跳過搜尋任何名為 example 的資料夾或檔案。使用 , 來分隔多個模式。路徑必須使用正斜槓。你還可以使用 glob 語法:

  • * 匹配路徑段中的一個或多個字元。
  • ? 匹配路徑段中的一個字元。
  • ** 匹配任意數量的路徑段,包含空
  • {} 分組條件(例如:{**/*.html,**/*.txt} 匹配所有 HTML 檔案和文字檔案)。
  • [] 宣告要匹配的字元範圍(example.[0-9] 匹配 example.0example.1…. example.9

VSCode 預設情況下會排除一些資料夾,以減少你不感興趣的搜尋結果的數量(例如:node_modules)。可以開啟設定在 files.excludesearch.exclude 配置項中更改這些規則,如下:

"files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
},
"search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true
}

搜尋並替換

可以跨檔案搜尋和替換。展開搜尋視窗小部件以顯示 “替換” 文字框。
搜尋並替換

當在 “替換” 文字框中鍵入文字時,我們將看到差異顯示未完成的更改。我們可以從 “替換” 文字框中替換所有檔案,將所有檔案替換為一個檔案或替換單個更改。
搜尋並替換差異檢視

正規表示式搜尋

要使用正規表示式搜尋首先需要啟用 Regular Expression。

Regular Expression

啟用 Regular Expression 後我們就可以愉快的使用正規表示式搜尋了。

除錯

Visual Studio Code 的主要功能之一就是其強大的除錯支援。
VSCode 內建了 Node.js 的除錯。其他語言則以擴充套件的方式支援除錯,在擴充套件中搜尋 Debuggers 並找到對應語言的擴充套件安裝後就可以支援了。

開啟除錯配置檢視,在 VSCode 側面的活動欄中選擇 “Run” 圖示或使用快捷鍵 Ctrl + Shift + D

Debug icon

“Run” 檢視顯示與執行和除錯有關的所有資訊,並在頂部帶有除錯命令和配置設定欄。

如果還未配置執行和除錯(未建立 launch.json),將顯示 “執行開始” 檢視。
初始執行和除錯檢視

在頂層 “Run” 選單包含最常見的執行和除錯命令:

執行和除錯命令

配置

要在 VSCode 中執行或除錯簡單的應用程式,按 F5 鍵,VSCode 會嘗試執行當前處於活動狀態的檔案。
VSCode 將除錯配置 launch.json 檔案儲存在工作區(專案根資料夾)的 .vscode 資料夾中或使用者設定的資料夾中。
建立 launch.json 檔案,需在 VSCode 中開啟專案資料夾(File > Open Folder),然後在執行檢視頂部欄上選擇配置齒輪圖示。
launch 配置

VSCode 將嘗試自動檢測我們的除錯環境,但是如果失敗,則必須手動來選擇它:
除錯環境選擇器

以下是為 Node.js 除錯生成的啟動配置:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${file}"
    }
  ]
}

如果返回 “檔案資源管理器” 檢視(Ctrl + Shift + E),我們將會看到 VSCode 建立了一個 .vscode 資料夾,並將 launch.json 檔案新增到了我們的工作區中。

Visual Studio Code 使用筆記

注意,啟動配置中可用的屬性因偵錯程式而異。我們可以使用 IntelliSense 建議(Ctrl + Space)來查詢特定偵錯程式存在的屬性。懸停幫助也可用於所有屬性。

啟動和附加配置

在 VSCode 中,有兩種核心除錯模式,LaunchAttach,它們處理兩種不同的工作流和開發者群體。

如果我們是瀏覽器工具開發背景,則可能不習慣 “從工具中啟動”,因為我們的瀏覽器例項已經開啟。開啟 DevTools 時,我們只需將 DevTools 附加到開啟的瀏覽器選項卡上。另一方面,如果我們是伺服器或桌面開發背景,則讓我們的編輯器為我們啟動程式是很正常的,並且我們的編輯器會自動將其偵錯程式附加到新啟動的程式。

解釋 launch 和 attach 之間區別的最好方法是將 launch 配置視為在 VSCode 附加到應用之前如何在除錯模式下啟動應用的訣竅,而 attach 配置是如何將 VSCode 的偵錯程式連線到已經執行的應用程式或程式的秘訣。

除錯動作

除錯會話開始後,”除錯工具欄” 將出現在編輯器的頂部。
除錯動作

  • 繼續/暫停 F5
  • 跳過 F10
  • 進入 F11
  • 移出 Shift + F11
  • 重新啟動 Ctrl + Shift + F5
  • 停止 Shift + F5

Launch.json屬性

有許多 launch.json 屬性可幫助支援不同的偵錯程式和除錯方案。我們一旦為 type 屬性指定了值,就可以使用 IntelliSense(Ctrl + Space)檢視可用 type 的列表。

對於每個啟動配置,必須具有以下屬性:

  • type - 用於啟動配置的偵錯程式的型別。每個已安裝的除錯擴充套件都會引入一種型別,例如內建的 node 或者由擴充套件引入的 phpgo
  • request - 配置請求型別。當前,支援 launchattach
  • name - 名稱,用於顯示在 “除錯啟動配置” 下拉選單中。

這是所有啟動配置可用的一些可選屬性:

  • presentation - 使用表示物件中的 ordergrouphidden 屬性,可以在 “除錯配置” 下拉選單和 “除錯” 快速選擇中對配置和化合物進行排序,分組和隱藏。
  • preLaunchTask - 要在除錯會話開始之前啟動任務,將此屬性設定為 task.json(在工作區的 .vscode 資料夾中)指定的任務的名稱。或者,可以將其設定為 ${defaultBuildTask} 以使用預設的構建任務。
  • postDebugTask - 要在除錯會話結束時啟動任務,將此屬性設定為 task.json(在工作區的 .vscode 資料夾中)指定的任務的名稱。
  • internalConsoleOptions - 該屬性控制除錯會話期間 “除錯控制檯” 皮膚的可見性。
  • debugServer - 僅適用於除錯擴充套件作者: 該屬性使我們可以連線到指定的埠,而不必啟動除錯介面卡。
  • serverReadyAction - 如果要在除錯中的程式向除錯控制檯或整合終端輸出特定訊息時在 Web 瀏覽器中開啟 URL。

許多偵錯程式支援以下一些屬性:

  • program - 啟動偵錯程式時要執行的可執行檔案或檔案。
  • args - 傳遞給程式進行除錯的引數。
  • env - 環境變數(值 null 可用於取消定義變數)。
  • cwd - 當前工作目錄,用於查詢依賴關係和其他檔案
  • port - 連線到正在執行的程式時的埠
  • stopOnEntry - 程式啟動時立即中斷
  • console - 使用哪種控制檯,例如 internalConsoleintegratedTerminal 或者 externalTerminal

變數替換

VSCode 將常用的路徑和其他值用作變數,並支援 launch.json 中字串內的變數替換。這意味著我們不必在除錯配置中使用絕對路徑。例如,${workspaceFolder} 給出工作區資料夾的根路徑,${file} 在活動編輯器中開啟的檔案以及 ${env:Name} 環境變數 “名稱”。

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

版本控制

Visual Studio Code 具有整合的原始碼控制,並且包括內建的 Git 支援。透過擴充套件,可以使用許多其他原始碼控制提供程式功能。
Git概述

VSCode 附帶了一個 Git 原始碼管理器(SCM)擴充套件。大多數原始碼管理 UI 和工作流程在其它 SCM 擴充套件中是通用的。

注意:VSCode 利用計算機本地 Git,因此在使用這些功能之前,首先需要安裝 Git。確保至少安裝了 version 2.0.0

左側的 “原始碼管理” 圖示將始終指示我們當前在儲存庫中進行了多少更改的概述。點選它會為我們顯示當前儲存庫更改的詳細資訊:CHANGESSTAGED CHANGESMERGE CHANGES

點選每個專案將向我們詳細顯示每個檔案中的文字更改。注意,對於未進行的更改,右側的編輯器仍可讓我們編輯檔案

我們還可以在 VSCode 的左下角找到儲存庫狀態的指示符:當前分支,髒指示符以及當前分支的上傳和下載提交數。我們可以透過點選狀態指示器並從列表中選擇 Git 引用來檢出儲存庫中的任何分支。

Visual Studio Code 使用筆記

提交

可以透過檔案中的上下文操作或透過點選操作按鈕來執行暫存(git add)和未暫存(git reset)。
階段更改按鈕

如上圖,將修改新增到快取區則點選檔名後面的加號即可,如果需要將快取區的修改放回工作區則點選檔名後面的減號,如果需要丟棄工作區的修改則點選帶拐彎的箭頭即可。

我們可以在更改上方輸入提交訊息,然後按 Ctrl + Enter(macOS:⌘ + Enter)進行更改。如果有任何階段性的更改(新增到快取區的修改),則僅將那些更改提交,否則將提交所有更改。

我們可以在 Git 檢視頂部的 ... “更多操作” 選單中找到更具體的 “提交” 操作。
更多動作按鈕

克隆庫

我們可以使用命令皮膚中的 (Ctrl + Shift + P) Git: Clone 命令克隆一個 Git 儲存庫。執行命令後將被要求提供遠端儲存庫(例如在 GitHub 上)的 URL 和放置本地儲存庫的父級目錄。
然後,我們可以將 URL 貼上到 Git:Clone 提示中。
設定儲存庫URL

分支和標籤

我們可以透過(Ctrl + Shift + PGit: Create Branch 和(Ctrl + Shift + PGit: Checkout to 命令在 VSCode 中新增和切換分支。

遠端

假設我們的儲存庫已連線到某個遠端倉庫,並且簽出的分支也與遠端倉庫的分支關聯,VSCode 為我們提供了 push、pull、sync 操作來同步該分支(sync 操作會先執行 pull 命令,然後執行 push 命令)。

VSCode 可以定期地從遠端伺服器獲取更改。這使得 VSCode 能夠顯示本地儲存庫在遠端儲存庫之前或之後進行了多少更改。從 VSCode 1.19 開始,該特性在預設情況下是禁用的,可以使用 git.autofetch 設定來啟用它。

標識

如果開啟的資料夾是 Git 儲存庫並開始進行更改,則 VSCode 將在裝訂線和概覽標尺中新增有用的註釋。

  • 紅色三角形表示已刪除行的位置
  • 綠色條表示新新增的行
  • 藍色條表示已修改的行

標識

合併衝突

Git合併
合併衝突由 VSCode 識別。突出顯示了差異,並且有內聯操作來接受一個或兩個更改。解決衝突後,暫存有衝突的檔案,以便我們提交那些更改。

檢視差異

我們的 Git 工具支援在 VSCode 中檢視差異。
VSCode中的檔案差異

另差異編輯器中有一個檢查窗格,該窗格以統一的修補程式格式顯示更改。我們可以使用(F7)轉到下一個差異和(Shift + F7)轉到上一個差異。可以使用箭頭鍵瀏覽各行,然後按 Enter 鍵將在 Diff 編輯器中跳回到所選的行中。

終端

在 VSCode 中,我們可以從工作區的底部開啟一個整合終端。這非常方便,因為我們無需切換視窗或更改現有終端的狀態即可執行快速的命令列任務。

開啟終端的方式如下:

  • 使用 Ctrl + ` 快捷鍵開啟終端(如果再次使用該快捷鍵則會隱藏終端,這很方便)。
  • 使用 View > Terminal 選單開啟。
  • Command Palette (Ctrl + Shift + P) 輸入 View: Toggle Integrated Terminal 命令開啟。

管理多個終端

我們可以建立多個開啟到不同位置的終端,並在它們之間輕鬆切換。可以透過點選 TERMINAL 皮膚右上角的加號圖示或使用 Ctrl + Shift + ` 快捷鍵來新增終端例項。該操作將在下拉選單中建立另一個條目,可用於在它們之間進行切換。
多個終端
按下垃圾桶按鈕可刪除終端例項。

如果經常使用多個終端,則可以使用繫結鍵的 focusNextfocusPrevious 在各個終端切換。

終端分割

分割終端可以透過使用 Ctrl + Shift + 5 快捷鍵或透過右鍵點選上下文選單來拆分終端。
終端分割

聚焦拆分的終端窗格時,可以使用以下命令之一移動焦點並調整大小:

Key Command
Alt + Left Focus Previous Pane
Alt + Right Focus Next Pane
unassigned Resize Pane Left
unassigned Resize Pane Right
unassigned Resize Pane Up
unassigned Resize Pane Down

配置

在 Linux 和 macOS 上使用的 Shell 預設為 $SHELL,Windows 10 上使用 PowerShell 和 Windows 早期版本上使用 cmd.exe。
可以透過在使用者配置中設定 terminal.integrated.shell.* 來手動配置覆蓋這些設定。使用 terminal.integrated.shellArgs.* 使用者配置將引數傳遞到終端 Shell。

注意:這些配置在工作區範圍內不會自動生效,必須使用 (Ctrl + Shift + P) Terminal: Manage Workspace Shell Permissions 命令將工作區列入白名單以允許設定我們的 shell、shell args 及其環境。

Windows

對於 Windows,在終端下拉選單中有一個 shell 選擇器,可以在檢測到的幾個 shell 之間進行選擇,包括 Command Prompt,PowerShell,PowerShell Core,Git Bash 和 WSL Bash。可以透過輸入 Terminal: Select Default Shell 命令開啟選擇選單設定預設的 Shell。
也可以透過使用者配置來設定,如:

{
// Command Prompt
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
// PowerShell
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
// Git Bash
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
// Bash on Ubuntu (on Windows)
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe"
}

Shell引數

我們可以在啟動 Shell 程式時將引數傳遞給 Shell 程式。
例如,要啟用執行 bash 作為登入 Shell 程式(執行 .bash_profile),傳入 -l 引數:

{
// Linux
"terminal.integrated.shellArgs.linux": ["-l"]
}

使用變數

shellshellArgsenvcwd 終端設定均支援解析變數:

{
// Open the terminal in the currently opened file's directory
"terminal.integrated.cwd": "${fileDirname}"
}

終端顯示配置

可以使用以下配置來自定義終端的整合字型和行高:

  • terminal.integrated.fontFamily 設定終端字型。
  • terminal.integrated.fontSize 設定終端字型大小。
  • terminal.integrated.fontWeight 終端內用於非粗體文字的字型粗細。
  • terminal.integrated.fontWeightBold 終端內用於粗體文字的字型粗細。
  • terminal.integrated.letterSpacing 控制終端的字母間距,這是一個整數值,代表要在字元之間新增的其他畫素的數量。
  • terminal.integrated.lineHeight 控制終端的行高,該數字乘以終端字型大小即可獲得以畫素為單位的實際行高。

終端繫結快捷鍵

以下是可在整合終端中快速導航的鍵盤快捷鍵:

Key Command
Ctrl + ` Show integrated terminal
Ctrl + Shift + ` Create new terminal
Ctrl + Alt + PageUp Scroll up
Ctrl + Alt + PageDown Scroll down
Shift + PageUp Scroll page up
Shift + PageDown Scroll page down
Ctrl + Home Scroll to top
Ctrl + End Scroll to bottom
unassigned Clear the terminal

其他終端命令可用,並且可以繫結到我們喜歡的鍵盤快捷鍵,例如:

  • workbench.action.terminal.focus: 聚焦終端。這類似於切換,但是如果可見,則將終端聚焦而不是隱藏終端。
  • workbench.action.terminal.focusNext: 重點關注下一個終端例項。
  • workbench.action.terminal.focusPrevious: 重點關注上一個終端例項。
  • workbench.action.terminal.focusAtIndexN: 將終端對準索引 N (N=1-9)
  • workbench.action.terminal.kill: 刪除當前的終端例項。
  • workbench.action.terminal.runSelectedText: 在終端例項中執行選定的文字。
  • workbench.action.terminal.runActiveFile: 在終端例項中執行活動檔案。

複製貼上

  • Linux: Ctrl + Shift + CCtrl + Shift + V
  • macOS: Cmd + CCmd + V
  • Windows: Ctrl + CCtrl + V

執行選中的文字

使用 runSelectedText 命令,先在編輯器中選擇需要執行文字,然後執行命令(Ctrl + Shift + PTerminal: Run Selected Text in Active Terminal
如果在活動編輯器中沒有選擇任何文字的話,則在終端中執行游標所在的那一行。

開啟特定的目錄

預設情況下,終端將在資源管理器中開啟的資料夾中開啟。terminal.integrated.cwd 設定允許指定自定義的路徑:

{
  "terminal.integrated.cwd": "/home/user"
}

在 Windows 上的分割終端在父終端初始目錄中啟動。在 macOS 和 Linux 上,分割終端將繼承父終端的當前工作目錄。可以使用 terminal.integrated.splitCwd 配置項修改繼承方式:

{
  "terminal.integrated.splitCwd": "workspaceRoot"
}

該配置項有三個值:

  • workspaceRoot -開啟一個新的分割終端時將使用工作區根目錄作為工作目錄。在多工作區中,可以選擇要使用的根目錄。
  • initial -開啟一個新的分割終端時將使用父終端初始的工作目錄。
  • inherited -在 macOS 和 Linux 上,新的分割終端將使用父終端的工作目錄。在 Windows 上,該行為與 initial 相同。

快捷鍵編輯

開啟 VSCode 的快捷鍵列表使用 Ctrl + K Ctrl + S,或編輯快捷鍵配置檔案重新繫結快捷鍵。
配置檔案使用 Ctrl + Shift + p 輸入 Preferences: Open Keyboard Shortcuts (JSON) 命令開啟。

配置檔案位置:

  • Windows %APPDATA%\Code\User\keybindings.json
  • macOS $HOME/Library/Application Support/Code/User/keybindings.json
  • Linux $HOME/.config/Code/User/keybindings.json

配置鍵的規則:

  • 一個 key 描述按下的鍵。
  • 一個 command 包含要執行的命令的識別符號。
  • 一個可選的 when 子句,其中包含一個布林表示式,將根據當前上下文進行評估。
// Place your key bindings in this file to override the defaults
[
    { "key": "home",    "command": "cursorHome",    "when": "editorTextFocus" }
]

常用快捷鍵

以下是 VSCode 預設的快捷鍵。

編輯器:

新建視窗             Ctrl + Shift + N
開啟資料夾           Ctrl + K Ctrl + O
開啟資源管理器        Ctrl + Shift + E
顯示/關閉側邊欄       Ctrl + B
開啟鍵盤快捷方式      Ctrl + K Ctrl + S
查詢檔案/安裝外掛     Ctrl + p
全域性搜尋             Ctrl + Shift + F
全域性替換             Ctrl + Shift + H
檔案中搜尋           Ctrl + F
檔案中替換           Ctrl + H
跳轉行數             Ctrl + G
拆分編輯器           Ctrl + 1/2/3
關閉編輯器視窗       Ctrl + W
新建無標題檔案       Ctrl + N
下一個編輯頁面       Ctrl + PageDown
上一個編輯頁面       Ctrl + PageUp
關閉編輯頁面         Ctrl + F4 或 Ctrl + W
關閉所有編輯頁面     Ctrl + K Ctrl + W

終端:

新建終端              Ctrl + Shift + `
控制檯終端顯示與隱藏   Ctrl + ~
貼上到活動終端         Ctrl + Shift + V
分裂終端              Ctrl + Shift + 5
聚焦到上一個窗格       Alt + LeftArrow
聚焦到下一個窗格       Alt + RightArrow

編輯內容:

單行註釋           Ctrl + /
多行註釋           Alt + Shift + A
複製當前行         Shift + Alt + Up/Down
上下移動當前行     Alt + Up/Down
刪除當前行         Ctrl + Shift + K
程式碼格式化         Shift + Alt + F
行增加縮排         Ctrl + [
行減少縮排         Ctrl + ]
裁剪尾隨空格       Ctrl + K Ctrl + X
摺疊程式碼           Ctrl + K Ctrl + 0 (0-8 級別,0級表示全部摺疊,1級表示只摺疊一級的中括號,其他以此類推)
摺疊註釋塊         Ctrl + K Ctrl + /
全部展開           Ctrl + K Ctrl + J
快速回到頂部       Ctrl + Home
快速回到底部       Ctrl + End

除錯:

開啟除錯           F5
關閉除錯           Shift + F5

其他

游標多項選擇

游標多項選擇使用 Alt + 滑鼠左鍵 快捷鍵就行多項選擇。

列框的選擇

列框的選擇使用 Shift + Alt + 拖動滑鼠到對角 來選擇。

在 macOS 和 Windows 上,還有用於列選擇的預設鍵繫結,但在 Linux 上沒有。

Key Command Command ID
Ctrl+Shift+Alt+Down Column Select Down cursorColumnSelectDown
Ctrl+Shift+Alt+Up Column Select Up cursorColumnSelectUp
Ctrl+Shift+Alt+Left Column Select Left cursorColumnSelectLeft
Ctrl+Shift+Alt+Right Column Select Right cursorColumnSelectRight
Ctrl+Shift+Alt+PageDown Column Select Page Down cursorColumnSelectPageDown
Ctrl+Shift+Alt+PageUp Column Select Page Up cursorColumnSelectPageUp

可以編輯 keybindings.json 繫結快捷鍵。

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章