教學課程：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 建構。

深入了解程式碼編輯功能、IntelliSense、程式碼導覽和 重構 在 VS Code 中。

使用原始檔控制

Visual Studio Code 具有整合式原始檔控制管理 (SCM)，並包含開箱即用的 Git 支援。

讓我們使用內建的 Git 支援來認可您先前所做的變更。

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

   

2. 請確定您已在電腦上安裝 Git。如果您未安裝 Git，您會在原始檔控制檢視中看到一個按鈕，可讓您在電腦上安裝它。

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

   

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

4. 您可以將游標停留在檔案上方，然後選取檔案旁邊的 +，以暫存個別變更。

   

   提示

   若要暫存所有變更，請將游標停留在 變更 上方，然後選取暫存所有變更按鈕。

5. 輸入認可訊息，例如 新增 hello 函式，然後選取認可以將變更認可至您的 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 的基本知識，請取得關於如何執行下列操作的更多資訊

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

• 使用整合式終端機

• 設定遠端開發環境