教程：Visual Studio Code入門

在本教程中，您將學習 Visual Studio Code 的主要功能，幫助您快速開始程式設計。您將瞭解使用者介面的不同元件以及如何根據自己的喜好進行自定義。然後，您將編寫一些程式碼，並使用內建的程式碼編輯功能，如智慧感知（IntelliSense）和程式碼操作（Code Actions），並學習如何執行和除錯程式碼。透過安裝語言擴充套件，您還可以為其他程式語言新增支援。

先決條件

• 在您的計算機上下載並安裝 Visual Studio Code

在 VS Code 中開啟一個資料夾

您可以使用 VS Code 處理單個檔案以進行快速編輯，也可以開啟一個資料夾，也稱為工作區。

讓我們從建立一個資料夾並在 VS Code 中開啟它開始。在本教程中，您將一直使用這個資料夾。

1. 開啟 Visual Studio Code。

   首次開啟 VS Code 時，您應該會看到歡迎頁面，其中包含各種入門操作。

2. 從選單中選擇檔案 > 開啟資料夾... 來開啟一個資料夾。

   

3. 選擇新建資料夾，建立一個名為 vscode101 的新資料夾，然後選擇選擇資料夾（在 macOS 上為開啟）。

   您建立的資料夾是您工作區的根目錄。

4. 在“工作區信任”對話方塊中，選擇是，我信任此工作區的作者以啟用工作區中的所有功能。

   

   因為是您在自己的計算機上建立的資料夾，所以可以信任該資料夾中的程式碼。

   重要

   工作區信任功能讓您可以決定專案資料夾中的程式碼是否可以由 VS Code 執行。當您從網際網路下載程式碼時，應首先進行審查，以確保其執行安全。獲取有關工作區信任的更多資訊。

5. 現在您應該在左側看到資源管理器檢視，其中顯示了資料夾的名稱。

   您將使用資源管理器檢視來檢視和管理工作區中的檔案和資料夾。

瀏覽使用者介面

既然您已經在 VS Code 中打開了一個資料夾，讓我們快速瀏覽一下使用者介面。

使用活動欄切換檢視

1. 使用活動欄在不同檢視之間切換。

   

   提示

   將滑鼠懸停在活動欄上，可以看到每個檢視的名稱和對應的鍵盤快捷鍵。您可以透過再次選擇檢視或按鍵盤快捷鍵來切換檢視的開啟和關閉狀態。

2. 當您在活動欄中選擇一個檢視時，主側邊欄會開啟以顯示特定於該檢視的資訊。

   例如，“執行和除錯”檢視使您能夠配置和啟動除錯會話。

   

使用編輯器檢視和編輯檔案

1. 在活動欄中選擇“資源管理器”檢視，然後選擇新建檔案... 按鈕在您的工作區中建立一個新檔案。

   

2. 輸入名稱 index.html 並按 Enter。

   一個檔案被新增到您的工作區，並且在視窗的主區域打開了一個編輯器。

   

3. 在 index.html 檔案中開始輸入一些 HTML 程式碼。

   在您輸入時，您應該會看到彈出建議，幫助您完成程式碼（智慧感知）。您可以使用 Up 和 Down 鍵在建議之間導航，並使用 Tab 鍵插入所選的建議。

4. 向您的工作區新增更多檔案，並注意每個檔案都會開啟一個新的編輯器選項卡。

   您可以根據需要開啟任意數量的編輯器，並垂直或水平地並排檢視它們。瞭解更多關於並排編輯的資訊。

   

從面板區域訪問終端

1. VS Code 有一個整合終端。透過按 ⌃` (Windows, Linux Ctrl+`) 來開啟它。

   您可以根據作業系統配置在不同的 shell 之間進行選擇，例如 PowerShell、命令提示符或 Bash。

   

2. 在終端中，輸入以下命令在您的工作區中建立一個新檔案。

   echo "Hello, VS Code" > greetings.txt
   

   預設工作目錄是您工作區的根目錄。請注意，資源管理器檢視會自動檢測並顯示新檔案。

   

3. 您可以同時開啟多個終端。選擇啟動配置檔案下拉選單檢視可用的 shell 並選擇一個。

   

使用命令面板訪問命令

1. 透過按 ⇧⌘P (Windows, Linux Ctrl+Shift+P) 開啟命令面板。您也可以使用檢視 > 命令面板... 選單項。

   VS Code 中的許多命令都可以透過命令面板獲得。當您安裝擴充套件時，它們也可以向命令面板新增命令。

   

   提示

   請注意，命令面板會顯示有快捷鍵的命令的預設鍵盤快捷鍵。您可以使用鍵盤快捷鍵直接執行命令。

2. 命令面板支援不同的操作模式

   1. 在 > 符號後，開始輸入以篩選命令列表。例如，輸入 move terminal 來查詢將終端移動到新視窗的命令。

      

   2. 刪除 > 字元並開始輸入以在您的工作區中搜索檔案。您可以使用 ⌘P (Windows, Linux Ctrl+P) 鍵盤快捷鍵開啟命令面板並直接開始搜尋檔案。

      

配置 VS Code 設定

您可以透過配置設定來自定義 VS Code 的幾乎每個部分。您可以使用設定編輯器來修改 VS Code 中的設定，或直接修改 settings.json 檔案。

1. 按 ⌘, (Windows, Linux Ctrl+,) 開啟設定編輯器（或選擇 檔案 > 首選項 > 設定 選單項）。

   

   提示

   使用搜索框篩選顯示的設定列表。

2. 預設情況下，VS Code 不會自動儲存修改後的檔案。從“自動儲存”下拉選單中選擇一個值來更改此行為。

   

   VS Code 會自動應用對設定的更改。當您修改工作區中的檔案時，現在它應該會自動儲存。

3. 要將設定恢復為其預設值，請選擇設定旁邊的齒輪圖示，然後選擇重置設定。

   

   提示

   您可以透過在搜尋框中輸入 @modified 或選擇已修改篩選器來快速找到所有已修改的設定。

4. 您可以使用設定編輯器中的選項卡在使用者設定和工作區設定之間切換。

   使用者設定適用於您的所有工作區。工作區設定僅適用於當前工作區。工作區設定會覆蓋使用者設定。獲取有關VS Code 中設定的更多資訊。

編寫一些程式碼

VS Code 內建了對 JavaScript、TypeScript、HTML、CSS 等的支援。在本教程中，您將建立一個示例 JavaScript 檔案，並使用 VS Code 提供的一些程式碼編輯功能。

VS Code 支援多種程式語言，在下一步中，您將安裝一個語言擴充套件來為另一種語言（即 Python）新增支援。

1. 在資源管理器檢視中，建立一個新檔案 app.js，並開始輸入以下 JavaScript 程式碼

   function sayHello(name) {
     console.log('Hello, ' + name);
   }
   
   sayHello('VS Code');
   

   在您輸入時，您應該會看到彈出建議，幫助您完成程式碼（智慧感知）。您可以使用 Up 和 Down 鍵在建議之間導航，並使用 Tab 鍵插入所選的建議。

   還要注意程式碼的格式（語法高亮），以幫助您區分程式碼的不同部分。

   

2. 當您將游標放在字串 Hello, 上時，您應該會看到一個燈泡圖標出現，表示有一個程式碼操作可用。

   您也可以使用 ⌃Space (Windows, Linux Ctrl+Space) 鍵盤快捷鍵開啟燈泡選單。

3. 選擇燈泡圖示，然後選擇轉換為模板字串。

   

   程式碼操作是用於對程式碼應用快速修復的建議。在這種情況下，程式碼操作將 ""Hello, " + name 轉換為模板字串 `Hello, ${name}`，這是一種特殊的 JavaScript 結構，用於在字串中嵌入表示式。

在 VS Code 中瞭解更多關於程式碼編輯功能、智慧感知、程式碼導航和重構的資訊。

使用原始碼管理

Visual Studio Code 集成了原始碼管理（SCM），並開箱即用地支援 Git。

讓我們使用內建的 Git 支援來提交您之前所做的更改。

1. 在活動欄中選擇原始碼管理檢視以開啟原始碼管理檢視。

   

2. 確保您的計算機上已安裝 Git。如果您的計算機上未安裝 Git，您將在原始碼管理檢視中看到一個按鈕，用於在您的機器上安裝它。

3. 選擇初始化儲存庫為您的工作區建立一個新的 Git 儲存庫。

   

   初始化儲存庫後，原始碼管理檢視會顯示您在工作區中所做的更改。

4. 您可以透過將滑鼠懸停在檔案上並選擇檔案旁邊的 + 來暫存單個更改。

   

   提示

   要暫存所有更改，請將滑鼠懸停在更改上，然後選擇暫存所有更改按鈕。

5. 輸入提交訊息，例如 Add hello function，然後選擇提交以將更改提交到您的 Git 儲存庫。

   

   提示

   在原始碼管理檢視中選擇圖表以顯示您的 Git 儲存庫提交歷史的視覺化表示。

在 VS Code 中還有更多關於原始碼管理的內容有待發現。獲取有關VS Code 中原始碼管理的更多資訊。

安裝語言擴充套件

VS Code 擁有一個豐富的擴充套件生態系統，可讓您在安裝中新增語言、偵錯程式和工具，以支援您的特定開發工作流程。在 Visual Studio Marketplace 上有數千個擴充套件可用。

讓我們安裝一個語言擴充套件來新增對 Python 或您感興趣的任何其他程式語言的支援。

1. 在活動欄中選擇擴充套件檢視。

   擴充套件檢視使您能夠從 VS Code 內部瀏覽和安裝擴充套件。

   

2. 在擴充套件檢視搜尋框中輸入 Python 以瀏覽與 Python 相關的擴充套件。選擇由 Microsoft 釋出的 Python 擴充套件，然後選擇安裝按鈕。

   

3. 現在，在您的工作區中建立一個新的 Python 檔案 hello.py，並開始輸入以下 Python 程式碼

   def say_hello(name):
       print("Hello, " + name)
   
   say_hello("VS Code")
   

   請注意，您現在也獲得了針對 Python 程式碼的建議和智慧感知。

   

執行和除錯您的程式碼

VS Code 內建了對執行和除錯 Node.js 應用程式的支援。在本教程中，您將使用上一步中安裝的 Python 擴充套件來除錯一個 Python 程式。

讓我們來除錯您在上一步中建立的 hello.py 程式。

1. 確保您的計算機上已安裝 Python 3。

   如果您的計算機上沒有安裝 Python 直譯器，您將在視窗右下角看到一條通知。選擇選擇直譯器以開啟命令面板，然後選擇您想要使用或安裝的 Python 直譯器。

2. 在 hello.py 檔案中，將游標放在 print 行上，然後按 F9 設定一個斷點。

   編輯器左側邊欄會出現一個紅點，表示已設定斷點。透過斷點，您可以在程式碼的特定行暫停程式的執行。

   

3. 按 F5 開始除錯會話。

   1. 選擇 Python 偵錯程式

      

   2. 選擇運行當前的 Python 檔案

      

4. 請注意，程式啟動並且執行在您設定的斷點處停止。

   

   提示

   在執行暫停時，透過將滑鼠懸停在編輯器中的 name 變數上，可以檢查其值。您隨時可以在執行和除錯檢視的變數檢視中檢視變數的值。

5. 按除錯工具欄中的繼續按鈕或按 F5 繼續執行。

   

VS Code 中還有許多其他除錯功能，例如監視變數、條件斷點和啟動配置。深入瞭解在 VS Code 中除錯的詳細資訊。

使用 AI 和 GitHub Copilot 增強您的程式設計能力

GitHub Copilot 是一款由 AI 驅動的助手，可幫助您更快地編寫程式碼，並能協助您完成各種任務，例如程式碼補全、程式碼重構和修復錯誤。

讓我們從獲取 Copilot 的程式碼建議開始。

1. 請確保您已在 VS Code 中設定好 Copilot。請遵循我們的Copilot 設定指南中的步驟。

   提示

   如果您還沒有 Copilot 訂閱，可以透過註冊Copilot 免費計劃來免費使用 Copilot，並獲得每月的補全和聊天互動次數限制。

2. 在 hello.py 檔案中，將游標置於檔案末尾並輸入此函式頭。

   def say_day_of_week(date)
   

   GitHub Copilot 將自動建議函式的其餘部分。按 Tab 鍵接受程式碼建議。

3. 接下來，讓我們呼叫我們的新函式。

   say_day_of_week(date.today())
   

   請注意，date 關鍵字上有一條波浪線，表示存在錯誤。

4. 將游標放在 date 關鍵字上，選擇燈泡圖示，然後選擇使用 Copilot 修復。

   

   GitHub Copilot 將為該錯誤提出修復建議。如果您對建議滿意，請選擇接受。

   提示

   您還可以使用 ⌘. (Windows, Linux Ctrl+.) 鍵盤快捷鍵手動觸發快速修復。

在 VS Code 中，您還可以用 Copilot 做更多的事情。透過我們的Copilot 快速入門瞭解更多關於在 VS Code 中使用 GitHub Copilot 的資訊。

後續步驟

恭喜！您已完成本教程，並探索了 Visual Studio Code 的一些主要功能。既然您已經掌握了 Visual Studio Code 的基礎知識，請獲取更多有關如何執行以下操作的資訊

• 發現並執行程式碼的單元測試

• 使用整合終端

• 設定遠端開發環境