🚀 在 VS Code 中取得 ！

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

浮動視窗

您可以在浮動視窗中開啟編輯器，例如將編輯器移動到螢幕上的另一個位置，甚至是另一個螢幕。

若要在浮動視窗中開啟編輯器，請將其從主視窗拖曳出來，並將其放到目前 VS Code 視窗外的任何位置。分離編輯器的另一種方式是按一下滑鼠右鍵編輯器索引標籤，然後選取選項 移至新視窗 (workbench.action.moveEditorToNewWindow) 或 複製到新視窗 (⌘K O (Windows、Linux Ctrl+K O))。

整合式終端機

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

Integrated terminal

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

進一步閱讀

切換側邊欄

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

toggle side bar

切換面板

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

toggle panel

禪模式

進入免分心禪模式。

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

zen mode

按 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) 循環瀏覽錯誤

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 擴充功能市集安裝更多佈景主題。選取 喜好設定：色彩佈景主題 > + 瀏覽其他色彩佈景主題... 命令，以從市集搜尋佈景主題。

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

File icon themes

鍵盤配置

您是否習慣另一個編輯器的鍵盤快速鍵？您可以安裝鍵盤配置擴充功能，將您最愛的編輯器的鍵盤快速鍵帶到 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
}

了解更多關於其他自訂。

語言特定的設定

您可以使用語言識別碼來限定特定語言的設定範圍。您可以在語言識別碼參考中找到常用語言識別碼的清單。

"[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+按一下 (macOS 上為 Cmd+按一下) 連結，以在您的預設瀏覽器中開啟它。您可以透過設定 workbench.externalBrowser 設定 來設定預設瀏覽器。

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

"workbench.externalBrowser": "edge"

將多個記錄合併到單一檢視中

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

從輸出面板的溢位功能表中選取 建立複合記錄...。

擴充功能

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

尋找擴充功能

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

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

尋找熱門擴充功能

在 擴充功能 檢視中，選取 篩選 控制項，然後選取 最熱門 或 排序方式 > 安裝計數。

install extensions

擴充功能建議

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

show recommended extensions

建立您自己的擴充功能

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

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

檔案和資料夾

簡易檔案對話方塊

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

在您啟用簡易檔案對話方塊之後，您可以使用 VS Code 內的快速選取來瀏覽和選取檔案和資料夾。

Simple File Dialog

若要啟用簡易檔案對話方塊，請設定 files.simpleDialog 設定

    "files.simpleDialog.enable": true

顯示 Explorer 檢視

鍵盤快速鍵：⇧⌘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+按一下 (macOS 上為 Cmd+按一下)

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

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 會封鎖儲存檔案，以防止覆寫在編輯器外部所做的變更。

若要解決儲存衝突，請選取通知快顯視窗中的 比較 動作，以開啟差異編輯器，其中顯示磁碟上檔案的內容 (在左側) 與 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+按一下 (macOS 上為 Option+按一下)。

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

鍵盤快速鍵：⌥⌘↑ (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 鍵可啟用編輯器和 Explorer 中的快速捲動。依預設，快速捲動使用 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+]) 和 ⌘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+點擊 (macOS 上為 Cmd+點擊)。

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。請參閱 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。

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 追蹤

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 狀態列項目 命令，或設定這些設定

  • git.blame.statusBarItem.enabled (預設啟用)
  • git.blame.editorDecoration.enabled

深入了解 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

記錄點

記錄點的作用與中斷點非常相似，但記錄點不會在命中時停止偵錯工具，而是將訊息記錄到主控台。記錄點對於在偵錯無法修改或暫停的生產伺服器時注入記錄特別有用。

使用左側編輯器邊界中的 新增記錄點 命令新增記錄點，它會顯示為「菱形」圖示。記錄訊息是純文字，但可以包含要在花括號 ('{}') 內評估的運算式。

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 繫結至 Run tests 工作，請新增下列內容

{
  "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 磁碟機上。

Insiders 組建

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

  • 適用於搶先體驗者 - Insiders 具有最新的程式碼變更，供使用者和擴充功能作者試用。
  • 頻繁組建 - 每天都有包含最新錯誤修正和功能的新組建。
  • 並排安裝 - Insiders 安裝在 Stable 組建旁邊，讓您可以獨立使用兩者。
02/06/2025