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 最好的方式是親手操作，開啟 歡迎 頁面，然後選擇一個 逐步引導 (Walkthrough)，進行安裝步驟、功能與 VS Code 提供的深度自訂設定的自助式導覽。當您進行探索與學習時，逐步引導會追蹤您的進度。

從 說明 (Help) > 歡迎 (Welcome) 功能表開啟「歡迎」頁面，或使用指令選擇區 (Command Palette) 中的 說明：歡迎 (Help: Welcome) 指令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

擴充功能也能提供逐步引導。您也可以使用指令選擇區中的 說明：開啟逐步引導... (Help: Open Walkthrough...) 指令直接開啟逐步引導（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

如果您希望精進程式碼編輯技巧，請開啟 互動式編輯器遊樂場 (Interactive Editor Playground)。嘗試 VS Code 的 程式碼編輯功能，例如多游標編輯、IntelliSense、程式碼片段 (Snippets)、Emmet 等等。

從 說明 (Help) > 編輯器遊樂場 (Editor Playground) 功能表開啟「歡迎」頁面，或使用指令選擇區中的 說明：互動式編輯器遊樂場 (Help: Interactive Editor Playground) 指令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

命令面板

根據您目前的內容存取所有可用的指令。

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

預設鍵盤快速鍵

指令選擇區中的許多指令都有對應的預設鍵盤快速鍵。您可以在 指令選擇區 中檢視指令旁邊的預設鍵盤快速鍵（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

鍵盤參考表

下載適用於您平台的鍵盤快速鍵參考表（macOS, Windows, Linux）。

浮動視窗

您可以將編輯器、終端機或特定檢視畫面開啟在浮動視窗中，例如將編輯器移至螢幕的其他位置，甚至移至另一個顯示器。

將編輯器索引標籤從目前的 VS Code 視窗拖出，即可在浮動視窗中開啟。或者，使用編輯器索引標籤內容功能表中的 移至新視窗 (Move into New Window) 或 複製到新視窗 (Copy into New Window) 選項。

整合式終端機

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

您可以從下拉式選單中選擇另一個終端機 Shell。根據您的作業系統與系統設定，您可能會看到不同的 Shell 列表。

進階閱讀

• 整合式終端機 文件
• 精通 VS Code 終端機文章

切換側邊欄

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

切換面板

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

禪模式 (Zen mode)

進入無干擾的禪模式。

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

連按兩次 Esc 鍵即可退出禪模式。

命令列

VS Code 具有強大的命令列介面 (CLI)，可讓您自訂編輯器的啟動方式以支援各種情境。例如，您可以從命令列啟動 VS Code 來開啟差異編輯器，以比較兩個檔案。

請確保 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) 在錯誤間循環瀏覽。

您可以依類型（「資訊」、「錯誤」、「警告」）或符合的文字篩選問題清單。

變更語言模式

狀態列上的語言模式顯示與作用中編輯器相關聯的語言（例如 Markdown、Python 等）。您可以透過選取狀態列上的語言模式指示器，或使用鍵盤快速鍵來變更目前編輯器的語言模式。

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

如果您想為特定檔案類型永久保留新的語言模式，請使用 設定檔案關聯 (Configure File Association for) 指令，將目前的副檔名與已安裝的語言關聯起來。

自訂

有多種選項可以自訂 VS Code 以符合您的偏好

• 變更您的佈景主題
• 變更您的鍵盤快速鍵
• 調整您的設定
• 加入 JSON 驗證
• 建立程式碼片段
• 安裝擴充功能

變更您的佈景主題

VS Code 內建多種 色彩佈景主題。使用 偏好設定：色彩佈景主題 (Preferences: Color Theme) 指令或鍵盤快速鍵。

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

您可以從 VS Code 擴充功能 市集 (Marketplace) 安裝更多佈景主題。選取 偏好設定：色彩佈景主題 (Preferences: Color Theme) > + 瀏覽額外的色彩佈景主題... (+ Browse Additional Color Themes...) 指令，從市集中搜尋佈景主題。

此外，您也可以安裝並變更您的檔案圖示佈景主題。

鍵盤對應 (Keymaps)

您習慣使用其他編輯器的鍵盤快速鍵嗎？您可以安裝鍵盤對應擴充功能，將您偏好編輯器的快速鍵帶入 VS Code。使用 偏好設定：鍵盤對應 (Preferences: Keymaps) 指令查看 Visual Studio 市集 上的目前清單。

一些較熱門的鍵盤對應包括：

• Vim
• Sublime Text Keymap
• Emacs Keymap
• Atom Keymap
• Brackets Keymap
• Eclipse Keymap
• Visual Studio Keymap

自訂您的鍵盤快速鍵

您可以在 鍵盤快速鍵 編輯器中檢視並自訂鍵盤快速鍵。使用 偏好設定：開啟鍵盤快速鍵 (Preferences: Open Keyboard Shortcuts) 指令或使用快速鍵開啟編輯器。

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

點選鉛筆圖示或在特定項目上按下 Enter 鍵以編輯鍵盤快速鍵。使用搜尋欄位篩選清單。

您也可以搜尋快速鍵，並將您自己的鍵盤快速鍵加入 keybindings.json 檔案中。

查看更多內容，請參閱 Visual Studio Code 的鍵盤對應。

調整您的設定

預設情況下，VS Code 會顯示設定編輯器來檢視與編輯設定。您也可以使用 開啟使用者設定 (JSON) (Open User Settings (JSON)) 指令，或是透過 workbench.settings.editor 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來變更您的預設設定編輯器，藉此編輯底層的 settings.json 檔案。

開啟使用者設定 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

字型連字 (Font ligatures)

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

提示：您需要安裝支援字型連字的字型。FiraCode 是 VS Code 團隊中很受歡迎的字型。

自動儲存 (Auto Save)

"files.autoSave": "afterDelay"

您也可以從頂層功能表中的 檔案 (File) > 自動儲存 (Auto Save) 切換自動儲存功能。

儲存時格式化

"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]": {

}

提示：您也可以使用 設定特定語言設定 (Configure Language Specific 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+按一下 (在 macOS 上為 Cmd+按一下) 連結，以在您的預設瀏覽器中開啟。您可以透過設定 workbench.externalBrowser 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定 來設定預設瀏覽器。

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

"workbench.externalBrowser": "edge"

將多個記錄 (Logs) 結合成單一檢視

輸出面板顯示各種服務的輸出。每個服務通常有自己的記錄。若要分析來自多個服務的相關記錄資訊，您可以將多個記錄合併為單一 複合記錄 (compound log)。

從輸出面板的溢出功能表選取 建立複合記錄... (Create Compound Log...)。

延伸模組

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

尋找擴充功能

您可以使用多個來源來尋找擴充功能

• 在 VS Code 市集 (Marketplace) 中。
• 在 VS Code 的 擴充功能 (Extensions) 檢視中搜尋。
• 檢視擴充功能建議
• 社群策劃的擴充功能清單，例如 awesome-vscode。

尋找熱門擴充功能

在 擴充功能 (Extensions) 檢視中，選取 篩選 (Filter) 控制項，然後選取 最熱門 (Most Popular) 或 排序方式 (Sort By) > 安裝次數 (Install Count)。

延伸模組建議

在 擴充功能 (Extensions) 檢視中，選取 篩選 (Filter) 控制項，然後選取 建議 (Recommended) 以檢視建議擴充功能的清單。

建立您自己的擴充功能

您有興趣建立自己的擴充功能嗎？您可以在 擴充功能 API 文件 中學習如何操作，特別是查看 關於貢獻點的文件。

• 組態
• 命令 (commands)
• 鍵盤快速鍵
• 語言 (languages)
• 偵錯工具
• 語法
• 佈景主題
• 程式碼片段 (snippets)
• jsonValidation

檔案與資料夾

簡易檔案對話方塊

使用簡易檔案對話方塊，您可以將系統預設的開啟與儲存檔案/資料夾對話方塊，替換為 VS Code 內更簡單的「快速選取」對話方塊。

設定： files.simpleDialog 在 VS Code 中開啟 在 VS Code Insiders 中開啟

顯示檔案總管檢視

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

快速開啟 (Quick Open)

快速搜尋並開啟檔案。

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

提示：輸入 ? 以檢視指令建議。

輸入如 edt 或 term 等指令，後接一個空格，即可帶出下拉式清單。

在最近開啟的檔案間導覽

重複按 快速開啟 鍵盤快速鍵，可在最近開啟的檔案間快速循環。

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

您可以按下 右箭頭 從 快速開啟 中開啟多個檔案。這會在背景開啟目前選取的檔案，而您可以繼續從 快速開啟 選取其他檔案。

在最近開啟的資料夾與工作區間導覽

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

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

顯示一個「快速選取」下拉式清單，其中包含來自 檔案 (File) > 開啟最近 (Open Recent) 的清單，依序為最近開啟的資料夾、工作區與檔案。

從連結建立或開啟檔案

鍵盤快速鍵：Ctrl+按一下 (在 macOS 上為 Cmd+按一下)

您可以透過將游標移至檔案連結，然後按 Ctrl+按一下，快速開啟檔案、影像或建立新檔案。

關閉目前開啟的資料夾

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

導覽記錄

導覽完整記錄：⌃Tab (Windows, Linux Ctrl+Tab)

向後導覽：⌃- (Windows Alt+Left, Linux Ctrl+Alt+-)

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

檔案關聯

為未正確偵測到的檔案建立語言關聯。例如，許多具有自訂副檔名的設定檔其實是 JSON。

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

防止髒寫入 (Preventing dirty writes)

當您嘗試儲存因磁碟上已變更而無法儲存的檔案時，VS Code 會顯示錯誤訊息。VS Code 會封鎖檔案儲存，以防止覆蓋編輯器外所做的變更。

若要解決儲存衝突，請選取通知彈出視窗中的 比較 (Compare) 動作，以開啟差異編輯器，顯示磁碟上的檔案內容（左側）與 VS Code 中的內容（右側）之比較。

使用編輯器工具列中的動作來解決儲存衝突。您可以 接受 (Accept) 您的變更並覆蓋磁碟上的任何變更，或者 還原 (Revert) 為磁碟上的版本。還原表示您的變更將會遺失。

注意：檔案將保持髒狀態，直到您選擇其中一個動作來解決衝突，否則無法儲存。

編輯技巧

以下是編輯程式碼的一些常見功能精選。如果您對其他編輯器的鍵盤快速鍵比較熟悉，請考慮安裝 鍵盤對應擴充功能。

提示：您可以在 擴充功能 (Extensions) 檢視中，透過篩選搜尋 @recommended:keymaps 來查看建議的鍵盤對應擴充功能。

並排編輯

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

您也可以拖放編輯器來建立新的編輯器群組，並在群組間移動編輯器。

在編輯器間切換

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

多游標選取

若要在任意位置加入游標，請使用滑鼠選取位置，並按 Alt+按一下 (在 macOS 上為 Option+按一下)。

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

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

您可以使用 ⇧⌘L (Windows, Linux Ctrl+Shift+L) 將額外的游標加入到目前選取項目的所有出現位置。

注意：您也可以透過 editor.multiCursorModifier 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定 將修飾鍵變更為 Ctrl/Cmd，以應用多重游標。請參閱 多重游標修飾鍵 以取得詳細資訊。

如果您不想加入目前選取項目的所有出現位置，可以使用 ⌘D (Windows, Linux Ctrl+D) 代替。這只會選取您所選項目後的下一個出現位置，以便您可以逐一加入選取項目。

直欄 (區塊) 選取

您可以透過按住 Shift+Alt (在 macOS 上為 Shift+Option) 並拖曳滑鼠來選取文字區塊。每個選取行末端都會加入一個獨立的游標。

您也可以使用 鍵盤快速鍵 來觸發直欄選取。

垂直尺規

您可以使用 editor.rulers 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定將垂直直欄尺規加入編輯器，該設定接收一個包含您希望出現垂直尺規之直欄字元位置的陣列。

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

快速捲動

按下 Alt 鍵可在編輯器與總管中啟用快速捲動。預設情況下，快速捲動使用 5 倍速度倍率，但您可以透過 編輯器：快速捲動靈敏度 (Editor: Fast Scroll Sensitivity) ( editor.fastScrollSensitivity 在 VS Code 中開啟 在 VS Code Insiders 中開啟 ) 設定來控制此倍率。

鎖定捲動

您可以使用 檢視：切換跨編輯器鎖定捲動 (View: Toggle Locked Scrolling Across Editors) 指令同步所有可見編輯器的捲動。這表示當您在一個編輯器中捲動時，所有其他編輯器也會隨之捲動相同的量，保持一切對齊。

您可以選擇僅在按住特定鍵盤快速鍵時才啟用捲動同步。為 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 的快速鍵衝突，請參閱 問題 #509。您仍然可以將指令 editor.action.copyLinesUpAction 與 editor.action.copyLinesDownAction 設定為您自己偏好的鍵盤快速鍵。

向上與向下移動行

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

縮小 / 擴大選取範圍

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

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

前往檔案中的符號 (Go to Symbol in File)

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

您可以藉由加入冒號 @: 來依類型對符號進行分組。

前往工作區中的符號 (Go to Symbol in Workspace)

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

大綱檢視 (Outline view)

檔案總管中的「大綱 (Outline)」檢視（預設收合在底部）會向您顯示目前開啟檔案的符號。

您可以依符號名稱、類別與檔案中的位置進行排序，以便快速導覽至符號位置。

導覽至特定行

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

復原游標位置

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

修剪尾隨空白字元

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

文字轉換指令

您可以使用指令選擇區中的 轉換 (Transform) 指令將選取的文字變更為大寫、小寫或標題大小寫。

程式碼格式化

目前選取的原始程式碼：⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)

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

程式碼摺疊

鍵盤快速鍵：⌥⌘[ (Windows, Linux Ctrl+Shift+[), ⌥⌘] (Windows, Linux Ctrl+Shift+]) 以及 ⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)

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

您可以使用 摺疊所有區塊註解 (Fold All Block Comments) (⌘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 編輯與預覽

在 Markdown 檔案中，使用

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

預覽畫面與編輯器將會在任一檢視中同步您的捲動。

IntelliSense

⌃Space (Windows, Linux Ctrl+Space) 以觸發建議小工具。

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

預覽 (Peek)

選取符號，然後輸入 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)。或者，您也可以使用內容功能表。

移至定義

選取符號，然後輸入 F12。或者，您也可以使用內容功能表或 Ctrl+按一下 (在 macOS 上為 Cmd+按一下)。

您可以使用 前往 (Go) > 上一頁 (Back) 指令或 ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-) 返回您先前的位置。

當您將滑鼠懸停在型別上時，若按下 Ctrl (在 macOS 上為 Cmd)，也可以檢視型別定義。

前往參考 (Go to References)

選取符號，然後輸入 ⇧F12 (Windows, Linux Shift+F12)。或者，您也可以使用內容功能表。

尋找所有參考檢視 (Find All References view)

選取符號，然後輸入 ⇧⌥F12 (Windows, Linux Shift+Alt+F12) 以開啟參考檢視，在專用檢視中顯示所有檔案的符號。

重新命名符號 (Rename Symbol)

選取符號，然後輸入 F2。或者，您也可以使用內容功能表。

搜尋與修改

除了搜尋與取代運算式之外，您還可以透過使用包含擷取群組的正規表示式，來搜尋並重複使用所符合內容的各部分。透過點選 使用正規表示式 (Use Regular Expression) .* 按鈕 (⌥⌘R (Windows, Linux Alt+R)) 在搜尋方塊中啟用正規表示式，然後寫入正規表示式並使用括號定義群組。接著，您可以在「取代」欄位中使用 $1、$2 等，來重複使用每個群組中所符合的內容。

.eslintrc.json

安裝 ESLint 擴充功能。依照您的喜好設定 Lint 規則。請參閱 ESLint 規格 以了解其 Linting 規則與選項的詳細資訊。

這是使用 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。

Emmet 語法

支援 Emmet 語法.

程式碼片段

建立自訂程式碼片段

檔案 (File) > 偏好設定 (Preferences) > 設定使用者程式碼片段 (Configure Snippets)，選取語言並建立程式碼片段。

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

在 建立您自己的程式碼片段 中查看更多詳細資訊。

Git 整合

鍵盤快速鍵：⌃⇧G (Windows, Linux Ctrl+Shift+G)

Git 整合已內建於 VS Code 中。您可以從 VS Code 擴充功能市集 安裝其他原始碼控制管理 (SCM) 提供者。本節介紹 Git 整合，但大部分的 UI 與操作對於其他 SCM 提供者都是通用的。

Git Blame (版本註解)

VS Code 會在編輯器中與狀態列內嵌顯示 Git blame 資訊。將滑鼠懸停在狀態列項目或內嵌提示上，即可檢視詳細的 Git blame 資訊。

若要啟用或停用 Git blame 資訊，請使用 Git：切換 Git Blame 編輯器裝飾 (Git: Toggle Git Blame Editor Decoration) 與 Git：切換 Git Blame 狀態列項目 (Git: Toggle Git Blame Status Bar Item) 指令，或設定以下設定：

• git.blame.statusBarItem.enabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟 (預設啟用)
• git.blame.editorDecoration.enabled 在 VS Code 中開啟 在 VS Code Insiders 中開啟

深入了解 VS Code 中的 Git blame 支援 以及如何自訂配置。

差異比較 (Diffs)

從 原始碼控制 (Source Control) 檢視中，選取一個檔案以開啟差異編輯器。或者，選取右上角的 開啟變更 (Open Changes) 按鈕，以對目前開啟的檔案進行差異比較。

檢視

差異比較的預設檢視是 並排檢視 (side by side view)。

透過選取右上角的 更多動作 (...) 按鈕，然後選取 內嵌檢視 (Inline View) 來切換 內嵌檢視。

如果您偏好以內嵌檢視作為預設值，請設定 "diffEditor.renderSideBySide": false 設定。

無障礙差異檢視器

使用 F7 與 ⇧F7 (Windows, Linux Shift+F7) 瀏覽差異。這會以統一的修補程式格式呈現變更。可以使用箭頭鍵導覽行，按下 Enter 鍵會跳回差異編輯器中的所選行。

編輯暫存的變更

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

分支 (Branches)

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

暫存 (Staging)

暫存檔案變更

將滑鼠懸停在檔案數量上，並選取加號按鈕以暫存檔案。

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

暫存選取範圍

您可以透過在檔案中進行文字選取，然後從 指令選擇區 或差異編輯器的內容功能表（右鍵點選）選擇 暫存選取的範圍 (Stage Selected Ranges)，來暫存檔案的部分變更。

復原最後一次提交

選取 (...) 按鈕，然後選取 提交 (Commit) > 復原最後一次提交 (Undo Last Commit) 以復原上一次的提交。這些變更會被加入「暫存的變更」區段中。

查看 Git 輸出

VS Code 讓您輕鬆查看實際執行的 Git 指令。這在您學習 Git 或偵錯困難的原始碼控制問題時會很有幫助。

若要檢視 Git 輸出，請在「原始碼控制」檢視中選取 (...) 按鈕，然後選取 顯示 Git 輸出 (Show Git Output)，或使用 Git：顯示 Git 輸出 (Git: Show Git Output) 指令，或是使用 切換輸出 (Toggle Output) 指令（⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H)），然後從下拉式選單中選取 Git。

裝訂線指示器 (Gutter indicators)

編輯器在裝訂線中提供視覺提示，顯示變更（加入、變更或移除的行）的位置與類型。請參閱 原始碼控制文件 以了解更多詳細資訊。

解決合併衝突

合併期間，前往 原始碼控制 檢視（⌃⇧G (Windows, Linux Ctrl+Shift+G)）並在差異檢視中進行變更。

您可以使用內嵌的 CodeLens 解決合併衝突，這讓您可以 接受目前變更 (Accept Current Change)、接受傳入變更 (Accept Incoming Change)、接受兩者變更 (Accept Both Changes) 以及 比較變更 (Compare Changes)。

深入了解原始碼控制文件中的 解決合併衝突。

將 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)

使用指令選擇區中的 檔案：比較作用中檔案與剪貼簿 (File: Compare Active File with Clipboard) 指令（⇧⌘P (Windows, Linux Ctrl+Shift+P)），快速比較作用中檔案與剪貼簿的內容。

偵錯

設定偵錯工具

從「執行與偵錯 (Run and Debug)」檢視（⇧⌘D (Windows, Linux Ctrl+Shift+D)）選取 建立 launch.json 檔案 (create a launch.json file)，這會提示您選取符合您專案的環境（Node.js、Python、C++ 等）。這會在您的工作區中產生包含偵錯設定的 launch.json 檔案。

Node.js 支援是內建的，其他環境則需要安裝適當的語言擴充功能。請參閱 偵錯文件 以了解更多詳細資訊。

中斷點與逐步執行

透過選取 編輯器裝訂線 或在目前行上使用 F9 來切換中斷點。編輯器裝訂線中的中斷點通常顯示為紅色填滿的圓圈。

一旦偵錯工作階段開始，偵錯工具列 將出現在編輯器上方，讓您在偵錯時逐步執行或進入程式碼。在偵錯文件中了解更多關於 偵錯動作 的資訊。

資料檢查

可以在 執行與偵錯 (Run and Debug) 檢視的 變數 (VARIABLES) 區段中檢查變數，或是透過將滑鼠懸停在編輯器中的原始程式碼上，或是使用偵錯主控台來檢查。

記錄點 (Logpoints)

記錄點 (Logpoints) 的作用很像中斷點，但它們在命中時不會暫停偵錯工具，而是會將訊息記錄到主控台。記錄點對於在無法修改或暫停的生產伺服器上進行偵錯時注入記錄特別有用。

使用左側編輯器裝訂線中的 加入記錄點 (Add Logpoint) 指令加入記錄點，它會顯示為「菱形」圖示。記錄訊息為純文字，但可以包含在大括號 ('{}') 內評估的運算式。

觸發的中斷點

觸發的中斷點是在另一個中斷點被觸及後自動啟用的中斷點。在診斷僅在特定前提條件後發生的程式碼失敗案例時，它們非常有用。

可以透過右鍵點選符號邊界，選取 新增觸發的中斷點，然後選擇哪個其他中斷點來啟用該中斷點。

工作執行器 (Task runner)

VS Code 中的工作可以設定為執行指令碼並啟動程序，以便這些工具可以在 VS Code 內使用，而無需進入命令列或撰寫新程式碼。

自動偵測工作

從頂層功能表選取 終端機 (Terminal)，執行 設定工作 (Configure Tasks) 指令，然後選取您要執行的工作類型。這會產生一個包含以下內容的 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
      }
    }
  ]
}

有時自動產生會出現問題。請查看文件以使一切正常運作。

從終端機功能表執行工作

從頂層功能表選取 終端機 (Terminal)，執行 執行工作 (Run Task) 指令，然後選取您要執行的工作。透過執行 終止工作 (Terminate Task) 指令來終止正在執行的工作。

定義工作的鍵盤快速鍵

您可以為任何工作定義鍵盤快速鍵。從 指令選擇區（⇧⌘P (Windows, Linux Ctrl+Shift+P)），選取 偏好設定：開啟鍵盤快速鍵檔案 (Preferences: Open Keyboard Shortcuts File)，將所需的快速鍵繫結至 workbench.action.tasks.runTask 指令，並將 工作 (Task) 定義為 args。

例如，若要將 Ctrl+H 繫結至 Run tests 工作，請加入以下內容：

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

從檔案總管執行 npm 指令碼作為工作

從「檔案總管」檢視中，您可以在編輯器中開啟指令碼、將其作為工作執行，並使用 Node 偵錯工具啟動它（當指令碼定義了如 --inspect-brk 的偵錯選項時）。點選時的預設動作是開啟指令碼。若要按一下即可執行指令碼，請將 npm.scriptExplorerAction 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定為 run。使用 npm.exclude 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定來排除特定資料夾中 package.json 檔案內的指令碼。

透過 npm.enableRunFromFolder 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，您可以從檔案總管檢視的內容功能表中為資料夾啟用 npm 指令碼的執行。該設定會在選取資料夾時啟用 在資料夾中執行 NPM 指令碼... (Run NPM Script in Folder...) 指令。該指令會顯示此資料夾內包含之 npm 指令碼的「快速選取」清單，您可以選取要作為工作執行的指令碼。

便攜模式 (Portable mode)

VS Code 具有 可攜式模式 (Portable mode)，讓您將設定與資料保存在與安裝位置相同的地方，例如 USB 隨身碟上。

Insiders 版本

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

• 針對早期採用者 - Insiders 擁有最新的程式碼變更，供使用者與擴充功能作者試用。
• 頻繁建置 - 每天提供包含最新錯誤修正與功能的新組建。
• 並排安裝 - Insiders 可與穩定版 (Stable) 並排安裝，讓您能獨立使用任一版本。