教程：開始使用 Visual Studio Code

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

先決條件

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

在 VS Code 中開啟資料夾

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

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

1. 開啟 Visual Studio Code。

   首次開啟 VS Code 時，您應該會看到“歡迎”頁面，其中包含不同的入門操作。

2. 從選單中選擇“檔案”>“開啟資料夾...”以開啟資料夾。

   

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

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

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

   

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

   重要

   工作區信任允許您決定 VS Code 是否可以執行專案資料夾中的程式碼。從 Internet 下載程式碼時，應先對其進行審查，以確保其執行安全。有關 工作區信任 的更多資訊。

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

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

探索使用者介面

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

使用活動欄在檢視之間切換

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

   

   提示

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

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

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

   

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

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

   

2. 輸入名稱 index.html，然後按 Enter。

   檔案將新增到您的工作區，並且編輯器會在視窗的主區域開啟。

   

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

   鍵入時，您應該會看到建議彈出，幫助您完成程式碼（IntelliSense）。您可以使用 上 和 下 鍵導航建議，並使用 Tab 插入選定的建議。

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

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

   

從面板區域訪問終端

1. VS Code 具有整合終端。按 ⌃`（Windows、Linux Ctrl+`） 以開啟它。

   您可以根據作業系統配置選擇不同的 Shell，例如 PowerShell、Command Prompt 或 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');
   

   鍵入時，您應該會看到建議彈出，幫助您完成程式碼（IntelliSense）。您可以使用 上 和 下 鍵導航建議，並使用 Tab 插入選定的建議。

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

   

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

   您還可以使用 ⌃Space（Windows、Linux Ctrl+Space） 鍵盤快捷方式開啟燈泡選單。

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

   

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

在 VS Code 中瞭解有關程式碼 編輯功能、IntelliSense、程式碼導航 和 重構 的更多資訊。

使用原始碼管理

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 相關的擴充套件。選擇 MicrosoftPublish 的“Python”擴充套件，然後選擇“安裝”按鈕。

   

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

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

   請注意，您現在還可以獲得 Python 程式碼的建議和 IntelliSense。

   

執行和除錯程式碼

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 的基本知識，請了解更多有關如何

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

• 使用整合終端

• 設定遠端開發環境