🚀 在 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

您可以依類型 ([資訊]、[錯誤]、[警告]) 或依比對文字篩選問題清單。

變更語言模式

狀態列中的語言模式會指出與作用中編輯器相關聯的語言 (例如，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 市集上的目前清單。

一些較熱門的鍵盤對應為

自訂您的鍵盤快速鍵

您可以在 [鍵盤快速鍵] 編輯器中檢視和自訂鍵盤快速鍵。使用 [喜好設定：開啟鍵盤快速鍵] 命令或使用快速鍵來開啟編輯器。

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

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

keyboard shortcuts

您也可以搜尋快速鍵，並將您自己的鍵盤快速鍵新增至 keybindings.json 檔案。

customize keyboard shortcuts

如需詳細資訊，請參閱Visual Studio Code 的鍵盤繫結。

調整您的設定

根據預設，VS Code 會顯示 [設定編輯器] 以檢視和編輯設定。您也可以使用 [開啟使用者設定 (JSON)] 命令或使用 workbench.settings.editor 設定變更預設設定編輯器，來編輯基礎 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

字型連字

"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 中較簡化的快速選取對話方塊，以開啟和儲存檔案和資料夾。

設定：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+按一下 (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

注意：您也可以將修飾詞變更為 Ctrl/Cmd，以使用 editor.multiCursorModifier 設定來套用多個游標。如需詳細資訊，請參閱多游標修飾詞。

如果您不想新增目前選取範圍的所有出現位置，則可以使用 ⌘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+]) 和 ⌘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+按一下 (Cmd+按一下 在 macOS 上)。

go to definition

您可以使用 **前往** > **返回** 命令或 ⌃- (Windows Alt+Left、Linux Ctrl+Alt+-) 返回到您先前的位置。

當您將游標停留在類型上方時，如果您按下 Ctrl (Cmd 在 macOS 上)，也可以看到類型定義。

跳到參考

選取符號，然後輸入 ⇧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)

Git 整合功能已在 VS Code 中「開箱即用」。您可以從 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 安裝在穩定組建旁邊，讓您可以獨立使用任一組建。
04/03/2025