教學課程：Visual Studio Code 入門

在本教學課程中，您將了解 Visual Studio Code 的主要功能，幫助您快速上手。您將了解使用者介面的不同元件、使用 AI 代理程式建置網頁應用程式，並探索如何利用擴充功能來增強您的設定。您還將學習如何設定 VS Code 偏好設定、使用原始碼控制，以及執行和偵錯您的程式碼。

先決條件

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

在 VS Code 中開啟資料夾

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

讓我們從建立資料夾並在 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. 您可以同時開啟多個終端機。選取 [啟動設定檔] 下拉式選單以檢視可用的殼層並選擇其中一個。

   

使用命令選擇區存取命令

1. 按下 ⇧⌘P (Windows, Linux Ctrl+Shift+P) 以開啟 [命令選擇區]。您也可以使用 [檢視] > [命令選擇區] 功能表項目。

   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. 審查產生的檔案，並在 [聊天] 檢視中選取 [保留] 以接受所有變更。

在下一個步驟中，您將安裝擴充功能，以便在整合式瀏覽器中託管應用程式。

利用擴充功能增強您的設定

VS Code 擁有豐富的擴充功能生態系統，讓您能夠將語言、偵錯工具和工具新增至您的安裝中，以支援您的開發工作流程。在 Visual Studio Marketplace 中有數千種擴充功能可供選擇。

讓我們安裝一個有助於您剛建置之食譜清單應用程式的擴充功能。

1. 在活動列中選取 [擴充功能] 檢視。

   [擴充功能] 檢視可讓您在 VS Code 內瀏覽並安裝擴充功能。

   

2. 在 [擴充功能] 檢視搜尋方塊中輸入 Live Preview。選取由 Microsoft 發布的 [Live Preview] 擴充功能，然後選取 [安裝] 按鈕。

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

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

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

   

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 不會自動儲存修改過的檔案。從 [自動儲存] 下拉式選單中選取一個值以變更此行為。

   

   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 存放庫。

   

   提示

   在 [原始碼控制] 檢視中選取 [圖形] 以顯示 Git 存放庫提交記錄的視覺呈現。

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

執行並偵錯您的程式碼

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

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

2. 尋找處理新增食譜的函式（例如 addRecipe）。將游標放置在函式主體內的第一行，然後按下 F9 來設定中斷點。

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

   

3. 在活動列中開啟 [執行與偵錯] 檢視，選取 [偵錯 URL]，並輸入您的食譜清單應用程式預覽的 URL（例如 https://:3000）。

   

   偵錯工具會啟動並開啟一個包含您應用程式的瀏覽器視窗。

4. 當觸及中斷點時，執行會暫停，且 VS Code 會反白顯示目前所在的行。

   

   提示

   在執行暫停時，透過將滑鼠游標懸停在變數上，來檢查它們的值。您可以隨時在 [執行與偵錯] 檢視的 [變數] 檢視中查看所有變數。

5. 使用偵錯工具列來逐步執行程式碼。按下 [不進入函式] (F10) 以執行目前行並移至下一行，或按下 [繼續] (F5) 以恢復執行。

   

VS Code 還有更多偵錯功能，例如監看變數、條件式中斷點和啟動組態。深入了解 VS Code 偵錯的詳細資訊。

後續步驟

恭喜！您已經完成了教學課程並探索了 Visual Studio Code 的一些主要功能。既然您已經學習了 Visual Studio Code 的基礎知識，請取得更多關於如何進行以下操作的資訊

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

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

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

• 使用整合式終端機

• 設定遠端開發環境