現已釋出！閱讀關於 11 月新增功能和修復的內容。

Visual Studio Code 技巧和竅門

使用本文中的技巧和竅門，快速上手並瞭解如何高效使用 Visual Studio Code。熟悉強大的編輯、程式碼智慧和原始碼管理功能，並學習有用的鍵盤快捷鍵。務必探索 入門指南 和 使用者指南 中其他深入的主題，以瞭解更多資訊。

如果您剛開始使用，請務必檢視 VS Code 教程，其中提供了循序漸進的步驟來發現關鍵功能。

如果您尚未安裝 Visual Studio Code，請訪問 下載頁面。您可以在 在 Linux 上執行 VS Code、macOS 和 Windows 中找到特定於平臺的設定說明。

更喜歡影片？您可以觀看 VS Code Day 的講座 Visual Studio Code 技巧和竅門 或 提升您的 VS Code 體驗。

基本知識

入門

動手探索 VS Code 的最佳方法是開啟 歡迎 頁面，然後選擇一個 演練，以便透過 VS Code 提供的設定步驟、功能和更深入的自定義進行自助遊。在您探索和學習的過程中，演練會跟蹤您的進度。

從 幫助 > 歡迎 選單開啟“歡迎”頁面，或使用命令面板中的 幫助: 歡迎 命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。

Welcome page

擴充套件也可以提供演練。您還可以使用命令面板中的 幫助: 開啟演練... 命令直接開啟演練 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。

Open walkthrough command in the Command Palette

如果您想提高程式碼編輯技能，請開啟 互動式編輯器遊樂場。嘗試 VS Code 的 程式碼編輯功能，例如多游標編輯、IntelliSense、程式碼片段、Emmet 等。

從 幫助 > 編輯器遊樂場 選單開啟“歡迎”頁面，或使用命令面板中的 幫助: 互動式編輯器遊樂場 命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。

Interactive editor playground

命令面板

根據您當前的上下文訪問所有可用命令。

鍵盤快捷鍵： ⇧⌘P (Windows, Linux Ctrl+Shift+P)

Command Palette

提示

您可以透過用滑鼠游標抓住命令面板的上邊緣並將其拖到其他地方來移動它。您還可以選擇標題欄中的自定義佈局控制元件，然後選擇一個預配置的快速輸入位置。

Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options.

預設鍵盤快捷鍵

命令面板中的許多命令都關聯有預設鍵盤快捷鍵。您可以在 命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中命令旁邊看到預設鍵盤快捷鍵。

keyboard references

鍵盤參考表

下載適用於您平臺的鍵盤快捷鍵參考表 (macOS, Windows, Linux)。

Keyboard Reference Sheet

浮動視窗

您可以將編輯器、終端或特定檢視開啟到浮動視窗中，例如，將編輯器移動到監視器的另一個位置，甚至移到另一個監視器。

Screenshot that shows the OS desktop with VS Code window and a CSV file opened in a floating window.

將編輯器選項卡拖出當前 VS Code 視窗以在浮動視窗中開啟它。或者，使用編輯器選項卡中的 移動到新視窗 或 複製到新視窗 上下文選項。

整合終端

鍵盤快捷鍵： ⌃` (Windows, Linux Ctrl+`)

Integrated terminal

您可以從下拉列表中選擇另一個終端 shell。根據您的作業系統和系統配置，您可能會看到不同的 shell 列出。

進一步閱讀

切換側邊欄

鍵盤快捷鍵： ⌘B (Windows, Linux Ctrl+B)

toggle side bar

切換面板

鍵盤快捷鍵： ⌘J (Windows, Linux Ctrl+J)

toggle panel

Zen 模式

進入無干擾的 Zen 模式。

鍵盤快捷鍵： ⌘K Z (Windows, Linux Ctrl+K Z)

zen mode

按兩次 Esc 退出 Zen 模式。

命令列

VS Code 擁有強大的命令列介面 (CLI)，可讓您自定義編輯器啟動方式以支援各種場景。例如，您可以在命令列啟動 VS Code 以開啟 diff 編輯器來比較兩個檔案。

確保 VS Code 二進位制檔案在您的路徑中，以便您可以鍵入“code”來啟動 VS Code。如果在安裝過程中將 VS Code 新增到您的環境變數路徑，請參閱特定於平臺的設定主題 (在 Linux 上執行 VS Code, macOS, Windows)。

# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions .

.vscode 資料夾

特定於工作區的配置檔案位於工作區根目錄下的 .vscode 資料夾中。例如，用於 任務執行器 的 tasks.json 和用於 偵錯程式 的 launch.json。

狀態列

錯誤和警告

鍵盤快捷鍵： ⇧⌘M (Windows, Linux Ctrl+Shift+M)

快速跳轉到專案中的錯誤和警告。

使用 F8 或 ⇧F8 (Windows, Linux Shift+F8) 在錯誤之間迴圈

errors and warnings

您可以按型別（“info”、“errors”、“warnings”）或透過匹配文字來過濾問題列表。

更改語言模式

狀態列中的語言模式指示與活動編輯器關聯的語言（例如，Markdown、Python 等）。您可以透過選擇狀態列語言模式指示器或使用鍵盤快捷鍵來更改當前編輯器的語言模式。

鍵盤快捷鍵： ⌘K M (Windows, Linux Ctrl+K M)

change syntax

如果您想保留檔案型別的新語言模式，請使用 為...配置檔案關聯 命令將當前副檔名與已安裝的語言關聯。

自定義

有許多選項可以自定義 VS Code 以滿足您的偏好

  • 更改主題
  • 更改鍵盤快捷鍵
  • 調整設定
  • 新增 JSON 驗證
  • 建立程式碼片段
  • 安裝擴充套件

更改主題

VS Code 帶有許多內建的 顏色主題。使用 首選項: 顏色主題 命令或使用鍵盤快捷鍵。

鍵盤快捷鍵： ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)

Preview themes

您可以從 VS Code 擴充套件 Marketplace 安裝更多主題。選擇 首選項: 顏色主題 > + 瀏覽其他顏色主題... 命令以從 Marketplace 搜尋主題。

此外，您還可以安裝和更改檔案圖示主題。

File icon themes

鍵對映

您習慣於使用其他編輯器的鍵盤快捷鍵嗎？您可以安裝一個 Keymap 擴充套件，該擴充套件將您喜歡的編輯器的鍵盤快捷鍵引入 VS Code。使用 首選項: 鍵對映 命令檢視 Visual Studio Marketplace 上的當前列表。

一些更受歡迎的鍵對映是

自定義鍵盤快捷鍵

您可以在 鍵盤快捷鍵 編輯器中檢視和自定義鍵盤快捷鍵。使用 首選項: 開啟鍵盤快捷鍵 命令或使用快捷鍵開啟編輯器。

鍵盤快捷鍵： ⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S)

選擇鉛筆圖示或在特定條目上使用 Enter 來編輯鍵盤快捷鍵。使用搜索欄位過濾列表。

keyboard shortcuts

您還可以搜尋快捷鍵，並將自己的鍵盤快捷鍵新增到 keybindings.json 檔案。

customize keyboard shortcuts

在 Visual Studio Code 的鍵繫結 中瞭解更多。

調整設定

預設情況下，VS Code 會顯示“設定”編輯器來檢視和編輯設定。您還可以使用 開啟使用者設定 (JSON) 命令來編輯基礎的 settings.json 檔案，或透過更改預設設定編輯器來使用 workbench.settings.editor 設定。

開啟使用者設定 settings.json

鍵盤快捷鍵： ⌘, (Windows, Linux Ctrl+,)

更改各種 UI 元素的字型大小

// Main editor
"editor.fontSize": 18,
// Terminal panel
"terminal.integrated.fontSize": 14,
// Output panel
"[Log]": {
    "editor.fontSize": 15
}

更改縮放級別

"window.zoomLevel": 5

字型連字

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

提示：您需要安裝支援字型連字的網路字型。 FiraCode 是 VS Code 團隊中一種流行的字型。

font ligatures

自動儲存

"files.autoSave": "afterDelay"

您還可以透過頂層選單中的 檔案 > 自動儲存 來切換自動儲存。

儲存時格式化

"editor.formatOnSave": true

貼上時格式化

"editor.formatOnPaste": true

更改 Tab 字元的大小

"editor.tabSize": 4

空格或 Tab

"editor.insertSpaces": true

渲染空白字元

"editor.renderWhitespace": "all"

預設情況下，文字選擇中會渲染空白字元。

忽略檔案/資料夾

從編輯器視窗中刪除這些檔案/資料夾。

"files.exclude": {
    "somefolder/": true,
    "somefile": true
}

從搜尋結果中刪除這些檔案/資料夾。

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

瞭解 其他自定義選項。

語言特定設定

您可以使用語言識別符號來為特定語言範圍設定。您可以在 語言識別符號 參考中找到常用語言 ID 的列表。

"[languageid]": {

}

提示：您還可以使用 配置特定語言設定 命令建立特定於語言的設定。

language based settings

新增 JSON 驗證

JSON 驗證預設對許多檔案型別啟用。在 settings.json 中建立您自己的模式和驗證

"json.schemas": [
    {
        "fileMatch": [
            "bower.json"
        ],
        "url": "https://json.schemastore.org/bower"
    }
]

或者，為工作區中定義的模式

"json.schemas": [
    {
        "fileMatch": [
            "**/foo.json"
        ],
        "url": "./myschema.json"
    }
]

或者，使用自定義模式

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

在 JSON 文件中瞭解更多。

配置預設瀏覽器

在 VS Code 中，您可以 Ctrl+Click (macOS 上為 Cmd+Click) 連結以在預設瀏覽器中開啟它。您可以透過設定 workbench.externalBrowser 設定 來配置預設瀏覽器。

將瀏覽器可執行檔案的完整路徑指定為設定值。或者，為確保跨裝置的正確功能，您還可以使用瀏覽器別名，例如 edge、chrome 或 firefox。

"workbench.externalBrowser": "edge"

將多個日誌合併到一個檢視中

輸出面板顯示各種服務的輸出。每個服務通常都有自己的日誌。要分析來自多個服務的相關日誌資訊，您可以將多個日誌合併到一個複合日誌中。

從輸出面板的溢位選單中選擇 建立複合日誌...。

擴充套件

鍵盤快捷鍵： ⇧⌘X (Windows, Linux Ctrl+Shift+X)

查詢擴充套件

您可以使用多種來源來查詢擴充套件

  • 在 VS Code Marketplace 中。
  • 在 VS Code 的 擴充套件 檢視中搜索。
  • 檢視擴充套件推薦
  • 社群策劃的擴充套件列表，例如 awesome-vscode。

查詢熱門擴充套件

在 擴充套件 檢視中，選擇 篩選 控制元件，然後選擇 最受歡迎 或 排序方式 > 安裝次數。

install extensions

擴充套件建議

在 擴充套件 檢視中，選擇 篩選 控制元件，然後選擇 推薦 以檢視推薦擴充套件的列表。

show recommended extensions

建立自己的擴充套件

有興趣建立自己的擴充套件嗎？您可以在 擴充套件 API 文件 中瞭解如何操作，特別是檢視 關於貢獻點 的文件。

  • 配置
  • 命令
  • 鍵盤快捷鍵
  • 語言
  • 偵錯程式
  • 語法
  • 主題
  • 程式碼片段
  • jsonValidation

檔案和資料夾

簡單檔案對話方塊

透過簡單的檔案對話方塊，您可以用 VS Code 內建的更簡單的快速選擇對話方塊替換系統預設的檔案對話方塊，用於開啟和儲存檔案及資料夾。

設定： files.simpleDialog

Simple File Dialog

提示

使用右上角的眼睛圖示顯示或隱藏以點開頭的檔案/資料夾。

顯示資源管理器檢視

鍵盤快捷鍵： ⇧⌘E (Windows, Linux Ctrl+Shift+E)

快速開啟

快速搜尋和開啟檔案。

鍵盤快捷鍵： ⌘P (Windows, Linux Ctrl+P)

Quick Open

提示：鍵入 ? 檢視命令建議。

Quick Open command list

鍵入諸如 edt 或 term 之類的命令，後跟一個空格，會彈出一個下拉列表。

term command in Quick Open

在最近開啟的檔案之間導航

反覆按 快速開啟 鍵盤快捷鍵，以便在最近開啟的檔案之間快速迴圈。

從快速開啟中開啟多個檔案

您可以透過按 右箭頭 從 快速開啟 中開啟多個檔案。這會在後臺開啟當前選定的檔案，您可以繼續從 快速開啟 中選擇檔案。

在最近開啟的資料夾和工作區之間導航

開啟最近使用的資料夾或工作區。

鍵盤快捷鍵： ⌃R (Windows, Linux Ctrl+R)

顯示“檔案”>“開啟最近”列表的快速選擇下拉列表，其中包含最近開啟的資料夾和工作區，然後是檔案。

透過連結建立或開啟檔案

鍵盤快捷鍵： Ctrl+Click (macOS 上為 Cmd+Click)

您可以快速開啟檔案或影像，或者透過將游標移到檔案連結上然後按 Ctrl+Click 來建立新檔案。

create and open file

關閉當前開啟的資料夾

鍵盤快捷鍵： ⌘K F (Windows, Linux Ctrl+K F)

導航歷史記錄

導航整個歷史記錄： ⌃Tab (Windows, Linux Ctrl+Tab)

導航後退： ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-)

導航前進： ⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-)

navigate history

檔案關聯

為未正確檢測到的檔案建立語言關聯。例如，許多具有自定義副檔名的配置檔案實際上是 JSON。

"files.associations": {
    ".database": "json"
}

防止髒寫

當您嘗試儲存一個檔案但由於檔案在磁碟上已更改而無法儲存時，VS Code 會顯示錯誤訊息。VS Code 會阻止儲存檔案，以防止覆蓋在編輯器外部所做的更改。

要解決儲存衝突，請在通知彈出視窗中選擇 比較 操作，以開啟一個 diff 編輯器，顯示磁碟上的檔案內容（左側）與 VS Code 中的內容（右側）的比較

dirty write

使用編輯器工具欄中的操作來解決儲存衝突。您可以選擇 接受 您的更改（從而覆蓋磁碟上的任何更改），或 還原 到磁碟上的版本。還原意味著您的更改將丟失。

注意：檔案仍顯示為髒狀態，並且在您選擇以下兩種操作之一來解決衝突之前，無法儲存。

編輯技巧

這是程式碼編輯功能的精選。如果您更熟悉其他編輯器的鍵盤快捷鍵，請考慮安裝 鍵對映擴充套件。

提示：您可以透過將搜尋篩選為 @recommended:keymaps 來在 擴充套件 檢視中看到推薦的鍵對映擴充套件。

並排編輯

鍵盤快捷鍵： ⌘\ (Windows, Linux Ctrl+\)

您還可以透過拖放編輯器來建立新的編輯器組，並在組之間移動編輯器。

split editors

在編輯器之間切換

鍵盤快捷鍵： ⌘1 (Windows, Linux Ctrl+1), ⌘2 (Windows, Linux Ctrl+2), ⌘3 (Windows, Linux Ctrl+3)

navigate editors

多游標選擇

要在任意位置新增游標，請用滑鼠選擇一個位置，然後使用 Alt+Click (macOS 上為 Option+Click)。

要在當前位置的上方或下方設定游標，請使用

鍵盤快捷鍵： ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) 或 ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down)

multi cursor

您可以使用 ⇧⌘L (Windows, Linux Ctrl+Shift+L) 為當前選中的所有出現項新增其他游標。

add cursor to all occurrences of current selection

注意：您還可以透過 editor.multiCursorModifier 設定 將修飾鍵更改為 Ctrl/Cmd 來應用多個游標。有關詳細資訊，請參閱 多游標修飾鍵。

如果您不想添加當前選中的所有出現項，可以使用 ⌘D (Windows, Linux Ctrl+D)。這隻會選中您選擇的下一個出現項，以便您可以逐個新增選擇。

add cursor to next occurrences of current selection one by one

列（框）選擇

您可以按住 Shift+Alt (macOS 上為 Shift+Option) 並拖動滑鼠來選擇文字塊。將在每行選中的末尾新增一個獨立的游標。

Column text selection

您還可以使用 鍵盤快捷鍵 來觸發列選擇。

垂直標尺

您可以使用 editor.rulers 設定在編輯器中新增垂直列標尺，該設定接受一個列字元位置陣列，您可以在其中放置垂直標尺。

{
  "editor.rulers": [20, 40, 60]
}

Editor rulers in the editor

快速滾動

按 Alt 鍵可在編輯器和資源管理器中啟用快速滾動。預設情況下，快速滾動使用 5 倍速度乘數，但您可以透過 編輯器: 快速滾動靈敏度 (editor.fastScrollSensitivity) 設定來控制乘數。

鎖定滾動

您可以使用 檢視: 切換跨編輯器鎖定滾動 命令來同步所有可見編輯器之間的滾動。這意味著當您在一個編輯器中滾動時，所有其他編輯器都會滾動相同的距離，從而保持一切對齊。

Locked scrolling in the editor

您可以選擇僅在按住特定鍵盤快捷鍵時啟用滾動同步。為 workbench.action.holdLockedScrolling 命令設定鍵盤快捷鍵，以臨時鎖定跨編輯器的滾動。

複製上一行/下一行

鍵盤快捷鍵： ⇧⌥↑ (Windows Shift+Alt+Up, Linux Ctrl+Shift+Alt+Up) 或 ⇧⌥↓ (Windows Shift+Alt+Down, Linux Ctrl+Shift+Alt+Down)

複製行向上/向下 命令在 Linux 上未繫結，因為 VS Code 的預設鍵盤快捷鍵會與 Ubuntu 鍵盤快捷鍵衝突，請參閱 Issue #509。您仍然可以將命令 editor.action.copyLinesUpAction 和 editor.action.copyLinesDownAction 設定為您自己喜歡的鍵盤快捷鍵。

copy line down

移動上一行和下一行

鍵盤快捷鍵： ⌥↑ (Windows, Linux Alt+Up) 或 ⌥↓ (Windows, Linux Alt+Down)

move line up and down

收縮/展開選擇

鍵盤快捷鍵： ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) 或 ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)

shrink expand selection

您可以在 基本編輯 文件中瞭解更多資訊。

轉到檔案中的符號

鍵盤快捷鍵： ⇧⌘O (Windows, Linux Ctrl+Shift+O)

Find by symbol

您可以新增冒號 @: 來按種類分組符號。

group symbols by kind

轉到工作區中的符號

鍵盤快捷鍵： ⌘T (Windows, Linux Ctrl+T)

go to symbol in workspace

大綱檢視

檔案資源管理器中的大綱檢視（預設摺疊在底部）顯示當前開啟檔案的符號。

Outline view

您可以按符號名稱、類別和檔案中的位置對符號進行排序，並允許快速導航到符號位置。

導航到特定行

鍵盤快捷鍵： ⌃G (Windows, Linux Ctrl+G)

撤銷游標位置

鍵盤快捷鍵： ⌘U (Windows, Linux Ctrl+U)

修剪尾部空白

鍵盤快捷鍵： ⌘K ⌘X (Windows, Linux Ctrl+K Ctrl+X)

trailing whitespace

文字轉換命令

您可以使用命令面板中的 轉換 命令將選定的文字轉換為大寫、小寫和標題格式。

Transform text commands

程式碼格式化

當前選定的原始碼： ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)

整個文件格式化： ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)

code formatting

程式碼摺疊

鍵盤快捷鍵： ⌥⌘[ (Windows, Linux Ctrl+Shift+[), ⌥⌘] (Windows, Linux Ctrl+Shift+]) and ⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)

code folding

您還可以使用 全部摺疊 (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) 和 全部展開 (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) 來摺疊/展開編輯器中的所有區域。

您可以使用 摺疊所有塊註釋 (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) 來摺疊所有塊註釋。

選擇當前行

鍵盤快捷鍵： ⌘L (Windows, Linux Ctrl+L)

導航到檔案開頭和結尾

鍵盤快捷鍵： ⌘↑ (Windows, Linux Ctrl+Home) 和 ⌘↓ (Windows, Linux Ctrl+End)

開啟 Markdown 預覽

在 Markdown 檔案中，使用

鍵盤快捷鍵： ⇧⌘V (Windows, Linux Ctrl+Shift+V)

Markdown preview

Markdown 編輯和預覽並排顯示

在 Markdown 檔案中，使用

鍵盤快捷鍵： ⌘K V (Windows, Linux Ctrl+K V)

預覽和編輯器將與您在任一檢視中的滾動同步。

side by side Markdown preview

IntelliSense

⌃Space (Windows, Linux Ctrl+Space) 來觸發“建議”小部件。

intellisense

您可以檢視可用的方法、引數提示、簡短文件等。

速覽

選擇一個符號，然後鍵入 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)。或者，您可以使用上下文選單。

peek

轉到定義

選擇一個符號，然後鍵入 F12。或者，您可以使用上下文選單或 Ctrl+Click (macOS 上為 Cmd+Click)。

go to definition

您可以使用 轉到 > 後退 命令或 ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-) 返回到以前的位置。

當您將滑鼠懸停在型別上時，您還可以看到型別定義（如果按 Ctrl (macOS 上為 Cmd)）。

轉到引用

選擇一個符號，然後鍵入 ⇧F12 (Windows, Linux Shift+F12)。或者，您可以使用上下文選單。

peek references

查詢所有引用檢視

選擇一個符號，然後鍵入 ⇧⌥F12 (Windows, Linux Shift+Alt+F12) 以開啟“引用”檢視，該檢視將在專用檢視中顯示檔案中的所有符號。

重新命名符號

選擇一個符號，然後鍵入 F2。或者，您也可以使用上下文選單。

rename symbol

搜尋和修改

除了搜尋和替換表示式之外，您還可以使用帶捕獲組的正則表示式來搜尋和重用匹配的部分。透過單擊搜尋框中的 使用正則表示式 .* 按鈕 (⌥⌘R (Windows, Linux Alt+R)) 來啟用正則表示式，然後編寫一個正則表示式並使用括號定義組。之後，您可以在“替換”欄位中使用 $1、$2 等來重用每個組中匹配的內容。

search and modify

.eslintrc.json

安裝 ESLint 擴充套件。根據您的喜好配置您的 linter。有關其 linting 規則和選項的詳細資訊，請參閱 ESLint 規範。

這是使用 ES6 的配置。

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "classes": true,
      "defaultParams": true
    }
  },
  "rules": {
    "no-const-assign": 1,
    "no-extra-semi": 0,
    "semi": 0,
    "no-fallthrough": 0,
    "no-empty": 0,
    "no-mixed-spaces-and-tabs": 0,
    "no-redeclare": 0,
    "no-this-before-super": 1,
    "no-undef": 1,
    "no-unreachable": 1,
    "no-use-before-define": 0,
    "constructor-super": 1,
    "curly": 0,
    "eqeqeq": 0,
    "func-names": 0,
    "valid-typeof": 1
  }
}

package.json

檢視 package.json 檔案的 IntelliSense。

package json intellisense

Emmet 語法

支援 Emmet 語法.

emmet syntax

程式碼片段

建立自定義片段

檔案 > 首選項 > 配置片段，選擇語言，然後建立片段。

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "\trender() {",
        "\t\treturn ($2);",
        "\t}",
        "",
        "}"
    ]
},

在 建立自己的片段 中瞭解更多詳細資訊。

Git 整合

鍵盤快捷方式： ⌃⇧G (Windows, Linux Ctrl+Shift+G)

VS Code 提供開箱即用的 Git 整合。您可以從 VS Code 擴充套件市場 安裝其他原始碼管理 (SCM) 提供程式。本節介紹 Git 整合，但 UI 和手勢在很大程度上與其他 SCM 提供程式通用。

Git Blame

VS Code 在編輯器和狀態列中內聯顯示 git blame 資訊。將滑鼠懸停在狀態列項或內聯提示上可檢視詳細的 git blame 資訊。

Screenshot that shows Git blame information when hovering over the git blame item in the Status Bar.

要啟用或停用 git blame 資訊，請使用 Git: 切換 Git Blame 編輯器裝飾 和 Git: 切換 Git Blame 狀態列項 命令，或配置這些設定

詳細瞭解 VS Code 中的 git blame 支援 以及如何自定義佈局。

差異

從 原始碼管理 檢視中，選擇一個檔案以開啟差異編輯器。或者，選擇右上角的 開啟更改 按鈕以比較當前開啟的檔案。

git diff from source control

檢視

差異的預設檢視是 並排檢視。

透過選擇右上角的 更多操作 (...) 按鈕，然後選擇 內聯檢視，來切換 內聯檢視。

Screenshot that shows the More Actions menu in the diff editor, highlighting the Inline View menu item

如果您希望內聯檢視成為預設檢視，請配置 "diffEditor.renderSideBySide": false 設定。

無障礙差異檢視器

使用 F7 和 ⇧F7 (Windows, Linux Shift+F7) 在差異中導航。這將以統一的補丁格式顯示更改。可以使用箭頭鍵導航行，按 Enter 鍵可以返回差異編輯器和所選行。

diff_review_pane

編輯暫存的更改

當您在差異編輯器中檢視更改時，可以直接在差異編輯器的暫存更改側進行編輯。

分支

透過狀態列輕鬆切換 Git 分支。

switch branches

暫存

暫存檔案更改

將滑鼠懸停在檔案數量上，然後選擇加號按鈕來暫存檔案。

選擇減號按鈕以取消暫存更改。

git stage all

暫存選定內容

您可以透過在檔案中選擇文字，然後從 命令面板 或差異編輯器上下文選單（右鍵單擊）中選擇 暫存選定範圍 來暫存檔案的某個部分。

撤銷上一次提交

選擇 (...) 按鈕，然後選擇 提交 > 撤銷上一次提交 來撤銷上一次提交。更改將被新增到“暫存的更改”部分。

undo last commit

檢視 Git 輸出

VS Code 可以輕鬆檢視實際執行的 Git 命令。當您仍在學習 Git 或除錯棘手的原始碼管理問題時，這會很有幫助。

要檢視 Git 輸出，請在原始碼管理檢視中選擇 (...) 按鈕，然後選擇 顯示 Git 輸出，使用 Git: 顯示 Git 輸出 命令，或使用 切換輸出 命令 (⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H)) 然後從下拉列表中選擇 Git。

標尺指示器

編輯器在標尺中提供了關於更改（新增、修改或刪除的行）發生位置和內容的視覺提示。有關詳細資訊，請參閱 原始碼管理文件。

git gutter indicators

解決合併衝突

在合併期間，轉到 原始碼管理 檢視 (⌃⇧G (Windows, Linux Ctrl+Shift+G)) 並在差異檢視中進行更改。

您可以使用內聯 CodeLens 來解決合併衝突，該功能允許您 接受當前更改、接受傳入更改、接受兩項更改 和 比較更改。

Git merge

在原始碼管理文件中瞭解有關 解決合併衝突 的更多資訊。

將 VS Code 設定為預設合併工具

git config --global merge.tool vscode
git config --global mergetool.vscode.cmd 'code --wait $MERGED'

將 VS Code 設定為預設差異工具

git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'

將檔案與剪貼簿進行比較

鍵盤快捷方式： ⌘K C (Windows, Linux Ctrl+K C)

在命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中，使用 檔案: 將當前檔案與剪貼簿進行比較 命令，快速比較活動檔案與剪貼簿中的內容。

除錯

配置偵錯程式

在“執行和除錯”檢視 (⇧⌘D (Windows, Linux Ctrl+Shift+D)) 中，選擇 建立 launch.json 檔案，這將提示您選擇與專案匹配的環境（Node.js、Python、C++ 等）。這將在您的工作區中生成一個 launch.json 檔案，其中包含偵錯程式配置。

Node.js 支援是內建的，其他環境需要安裝相應的語言擴充套件。有關詳細資訊，請參閱 除錯文件。

configure debugging

斷點和單步執行

透過單擊 編輯器邊距 或在當前行使用 F9 來切換斷點。編輯器邊距中的斷點通常顯示為紅色的實心圓。

一旦除錯會話開始，除錯工具欄 將出現在編輯器頂部，使您能夠在除錯時單步執行或進入程式碼。有關除錯文件中 除錯操作 的更多資訊。

debug

資料檢查

變數可以在 執行和除錯 檢視的 變數 部分進行檢查，也可以透過將滑鼠懸停在編輯器中的原始碼上來檢查，或使用除錯控制檯。

data inspection

日誌點

Logpoints 的作用與斷點類似，但它們不會在命中時暫停偵錯程式，而是將訊息記錄到控制檯。Logpoints 對於在除錯無法修改或暫停的生產伺服器時注入日誌記錄特別有用。

使用左側編輯器邊距中的 新增 Logpoint 命令新增 logpoint，它將顯示為一個“菱形”圖示。日誌訊息是純文字，但可以包含用花括號 ('{}') 包圍的要評估的表示式。

Logpoint set in the editor

觸發斷點

觸發斷點是一種在另一個斷點命中後自動啟用的斷點。當代碼中出現僅在特定先決條件發生後才出現的故障情況時，它們非常有用。

可以透過右鍵單擊字形邊距，選擇 新增觸發斷點，然後選擇哪個其他斷點啟用此斷點來設定觸發斷點。

任務執行器

VS Code 中的任務可以配置為執行指令碼和啟動程序，以便可以從 VS Code 中使用這些工具，而無需輸入命令列或編寫新程式碼。

自動檢測任務

從頂級選單中選擇 終端，執行命令 配置任務，然後選擇要執行的任務型別。這將生成一個 tasks.json 檔案，其中包含類似以下內容。有關詳細資訊，請參閱 任務 文件。

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "install",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

自動生成有時會遇到問題。請檢視文件以確保一切正常工作。

從終端選單執行任務

從頂級選單中選擇 終端，執行命令 執行任務，然後選擇要執行的任務。透過執行命令 終止任務 來終止正在執行的任務。

task runner

為任務定義鍵盤快捷方式

您可以為任何任務定義鍵盤快捷方式。從 命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中，選擇 首選項: 開啟鍵盤快捷方式檔案，將所需的快捷方式繫結到 workbench.action.tasks.runTask 命令，並將 任務 定義為 args。

例如，要將 Ctrl+H 繫結到 執行測試 任務，請新增以下內容

{
  "key": "ctrl+h",
  "command": "workbench.action.tasks.runTask",
  "args": "Run tests"
}

從資源管理器執行 npm 指令碼作為任務

從資源管理器檢視中，您可以開啟編輯器中的指令碼，將其作為任務執行，並使用 Node 偵錯程式啟動它（當指令碼定義了除錯選項（如 --inspect-brk）時）。單擊的預設操作是開啟指令碼。要單擊一次即可執行指令碼，請將 npm.scriptExplorerAction 設定為 run。使用 npm.exclude 設定來排除包含在特定資料夾中的 package.json 檔案中的指令碼。

Filter problems

使用 npm.enableRunFromFolder 設定，您可以啟用從資料夾的資源管理器檢視上下文選單執行 npm 指令碼。該設定將在選擇資料夾時啟用 在資料夾中執行 NPM 指令碼... 命令。該命令會顯示此資料夾中包含的 npm 指令碼的快速選擇列表，您可以選擇要作為任務執行的指令碼。

便攜模式

VS Code 具有 便攜模式，允許您將設定和資料儲存在與安裝位置相同的位置，例如，儲存在 USB 驅動器上。

Insider 版本

Visual Studio Code 團隊使用 Insiders 版本來測試 VS Code 的最新功能和錯誤修復。您也可以透過 在此處下載 來使用 Insiders 版本。

  • 面向早期採用者 - Insiders 擁有最新的程式碼更改，供使用者和擴充套件作者嘗試。
  • 頻繁構建 - 每日都有包含最新錯誤修復和功能的新版本。
  • 並行安裝 - Insiders 與穩定版並行安裝，允許您獨立使用其中任何一個。
12/10/2025
© . This site is unofficial and not affiliated with Microsoft.