教學課程：開始使用 Visual Studio Code

在本教學課程中，您將了解 Visual Studio Code 的核心功能，協助您快速上手。您將了解使用者介面的不同元件、使用 AI 代理程式建置網頁應用程式，並探索如何透過延伸模組強化您的設定。您也將學習如何配置 VS Code 設定、使用原始碼控制，以及執行並偵錯程式碼。

先決條件

• 在您的電腦上下載並安裝 Visual Studio Code
• 在 VS Code 中設定 GitHub Copilot
• 安裝 Node.js (用於執行和偵錯 JavaScript)

在 VS Code 中開啟資料夾

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

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

1. 開啟 Visual Studio Code，並從功能表選擇 檔案 > 開啟資料夾... 來開啟資料夾。

2. 選擇 新增資料夾 並建立名為 vscode101 的新資料夾。然後選擇 選擇資料夾 (在 macOS 上為 開啟) 以在 VS Code 中開啟該資料夾。

   VS Code 現在將您開啟的資料夾視為一個工作區。

3. 在「工作區信任」對話方塊中，選擇 是，我信任作者 以啟用工作區中的所有功能。

   

   重要

   「工作區信任」讓您決定專案資料夾中的程式碼是否可由 VS Code 執行。當您從網際網路下載程式碼時，應先審查以確保其安全性。了解更多關於 工作區信任 的資訊。

4. 您現在應該會在左側看到 檔案總管 檢視，顯示該資料夾的名稱。

   您將使用「檔案總管」檢視來查看和管理工作區中的檔案與資料夾。

   

探索使用者介面

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

使用活動列切換檢視

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

   

   提示

   將滑鼠懸停在活動列上可查看每個檢視的名稱及對應的鍵盤快速鍵。您可以透過再次選取該檢視或按下鍵盤快速鍵來開啟或關閉檢視。

2. 當您在活動列中選取檢視時，主要側邊欄 會開啟以顯示特定檢視的資訊。

   例如，「執行與偵錯」檢視可讓您配置並啟動偵錯工作階段。

   

   提示

   注意活動列中的 聊天 檢視。這是您與 AI 代理程式互動以產生程式碼、提問等的地方。您將在下一個步驟中使用它來建置應用程式。

使用編輯器查看和編輯檔案

1. 選取活動列中的「檔案總管」檢視，然後選取 新增檔案... 按鈕在您的工作區中建立新檔案。

   

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

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

   

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

   當您輸入時，您應該會看到彈出的建議，協助您完成程式碼 (IntelliSense)。您可以使用 向上 和 向下 鍵瀏覽建議，並使用 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) 開啟 命令轉譯器 (Command Palette)。您也可以使用 檢視 > 命令轉譯器 功能表項目。

   VS Code 中的許多命令都可以透過命令轉譯器使用。當您安裝延伸模組時，它們可以向命令轉譯器新增額外的命令。

   

   提示

   請注意，命令轉譯器會顯示具有預設鍵盤快速鍵之命令的快速鍵。您可以使用鍵盤快速鍵直接執行命令。

2. 命令轉譯器支持不同的操作模式

   1. 命令模式 (>)：在 > 符號後開始輸入以過濾命令清單。例如，輸入 move terminal 以尋找將終端機移至新視窗的命令。

      

   2. 快速開啟模式：刪除 > 字元並開始輸入以搜尋工作區中的檔案。您可以使用 ⌘P (Windows, Linux Ctrl+P) 鍵盤快速鍵開啟命令轉譯器並直接開始搜尋檔案。

      

   3. 符號搜尋模式 (#)：將 > 字元替換為 #，以搜尋程式碼中的變數或函式等符號。

使用 AI 代理程式建置應用程式

Visual Studio Code 內建支援 GitHub Copilot，用於 AI 驅動的程式碼撰寫。AI 代理程式可以自主規劃解決方案、建立和編輯多個檔案、執行終端機命令，並針對錯誤進行反覆運算，這一切只需一個自然語言提示即可完成。您描述您的需求，代理程式就會執行完成工作所需的一切。

讓我們使用代理程式，透過單個提示建置一個食譜清單網頁應用程式。

1. 按下 ⌃⌘I (Windows, Linux Ctrl+Alt+I) 開啟聊天檢視。

2. 從聊天檢視的下拉式選單中選取 Agent。代理程式能讓 AI 自主建立和編輯檔案、執行終端機命令等。

   

3. 在聊天輸入框中輸入以下提示

   Create a recipe list app with HTML, CSS, and JavaScript in separate files. Include an input field to add recipes with a name and description, a list to display them, and a delete button for each item. Use modern styling. Add some sample recipes to the list.
   

   注意

   如果您尚未設定 GitHub Copilot，系統會提示您登入 GitHub 帳戶並設定 Copilot，然後才能發送提示。如果您沒有 Copilot 訂閱，您會關聯到一個免費帳戶，該帳戶提供每月的自動完成與聊天互動限制。

4. 按 Enter 發送提示。

   代理程式開始產生應用程式。觀察它如何建立多個檔案、向您展示建議的變更，並可能要求核准以執行終端機命令。

   

5. 檢視產生的檔案，並在聊天檢視中選取 保留 (Keep) 以接受所有變更。

在下一個步驟中，您將安裝一個延伸模組，以在整合式瀏覽器中託管該應用程式。

使用延伸模組強化您的設定

VS Code 擁有豐富的延伸模組生態系統，讓您可以在安裝中新增語言、偵錯器和工具，以支援您的開發工作流程。在 Visual Studio Marketplace 中有數千個延伸模組可供使用。

讓我們安裝一個有助於您剛建置的食譜清單應用程式的延伸模組。

1. 選取活動列中的 延伸模組 檢視。

   「延伸模組」檢視讓您可以在 VS Code 中瀏覽並安裝延伸模組。

   

2. 在延伸模組檢視搜尋框中輸入 Live Preview。選取 Microsoft 發行的 Live Preview 延伸模組，然後選取 安裝 按鈕。

   Live Preview 會啟動一個具有靜態和動態頁面即時重新載入功能的本地開發伺服器。

3. 開啟 index.html 檔案，在編輯器中按一下右鍵，然後選取 Show Preview (顯示預覽)。

   您的食譜清單應用程式現在會在瀏覽器中開啟。當您更改程式碼時，瀏覽器會自動重新整理以顯示最新版本。

   

4. 透過要求代理程式新增功能來繼續聊天對話。輸入以下提示

   Add the ability to mark recipes as favorites with a star icon. Favorite recipes should appear at the top of the list.
   

   代理程式會修改現有檔案以新增功能。這展示了您如何透過後續提示反覆建置您的應用程式。

透過 Copilot 快速入門 探索 VS Code 中更多的 AI 功能。

配置 VS Code 設定

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

1. 按下 ⌘, (Windows, Linux Ctrl+,) 開啟設定編輯器 (或選取 檔案 > 喜好設定 > 設定 功能表項目)。

   

   提示

   使用搜尋框來過濾顯示的設定清單。

2. 預設情況下，VS Code 不會自動儲存修改過的檔案。從「自動儲存 (Auto Save)」下拉式選單中選取一個值來更改此行為。

   

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

3. 要將設定還原為其預設值，請選取設定旁邊的齒輪圖示，然後選取 重設設定。

   

   提示

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

4. 您可以使用設定編輯器中的索引標籤在 使用者 設定和 工作區 設定之間切換。

   使用者設定套用於所有工作區。工作區設定僅套用於當前工作區。工作區設定會覆蓋使用者設定。了解更多關於 VS Code 設定 的資訊。

使用原始碼控制

Visual Studio Code 整合了原始碼控制管理 (SCM)，並內建了 Git 支援。

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

1. 選取活動列中的 原始碼控制 檢視以開啟原始碼控制檢視。

   

2. 請確保您的電腦上已安裝 Git。如果您尚未安裝 Git，您將在「原始碼控制」檢視中看到一個按鈕，用於在您的機器上安裝它。

3. 選取 初始化存放庫 為您的工作區建立新的 Git 存放庫。

   

   初始化存放庫後，「原始碼控制」檢視會顯示您在工作區中所做的變更。

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

   

   提示

   要暫存所有變更，請將滑鼠懸停在 變更 上並選取 暫存所有變更 按鈕。

5. 輸入提交訊息，例如 Add recipe list app，然後選取 提交 以將變更提交到您的 Git 存放庫。

   

   提示

   在「原始碼控制」檢視中選取 圖表 (Graph)，以顯示 Git 存放庫提交歷史紀錄的可視化表示。

關於 VS Code 中的原始碼控制還有很多值得探索的地方。了解更多關於 VS Code 中的原始碼控制 資訊。

執行並偵錯您的程式碼

VS Code 內建支援執行和偵錯 JavaScript 與 Node.js 應用程式。讓我們使用偵錯器來逐步執行代理程式產生的食譜清單應用程式。

1. 開啟代理程式為您的食譜清單應用程式建立的 JavaScript 檔案 (例如 app.js 或 script.js)。

2. 找到處理新增食譜的函式 (例如 addRecipe)。將游標放在函式本體內的第一行，然後按 F9 設定中斷點。

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

   

3. 開啟活動列中的「執行與偵錯」檢視，選取 Debug URL，然後輸入食譜清單應用程式預覽的 URL (例如 https://:3000)。

   

   偵錯器啟動並開啟一個帶有您應用程式的瀏覽器視窗。

4. 當觸發中斷點時，執行會暫停，且 VS Code 會反白顯示當前行。

   

   提示

   當執行暫停時，將滑鼠懸停在編輯器中的變數上方以檢查其值。您隨時可以在 執行與偵錯 檢視中的 變數 檢視內查看所有變數。

5. 使用偵錯工具列逐步執行程式碼。按下 逐行執行 (F10) 執行當前行並移至下一行，或按下 繼續 (F5) 恢復執行。

   

VS Code 中還有許多偵錯功能，例如監看變數、條件中斷點和啟動配置。深入了解 VS Code 偵錯 的細節。

後續步驟

恭喜！您已完成本教學課程並探索了 Visual Studio Code 的一些核心功能。現在您已了解 Visual Studio Code 的基礎知識，請獲取更多關於如何執行以下操作的資訊：

• 使用 AI 建置您的第一個應用程式

• 探索不同的代理程式類型

• 探索並執行您程式碼的單元測試

• 使用整合式終端機

• 設定遠端開發環境