教學：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 執行專案資料夾中的程式碼。當您從網際網路下載程式碼時，您應該先檢閱它，以確保執行安全無虞。取得關於工作區信任的詳細資訊。

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、命令提示字元或 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 相關的擴充功能。選取 Microsoft 發佈的 [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 的基本概念，請取得關於如何

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

• 使用整合式終端機

• 設定遠端開發環境