練習 - 探索 Visual Studio Code 使用者介面

已完成

Visual Studio Code 為剛起步的開發人員提供工具,但對於專業開發人員而言也是可延伸且足夠進階的工具。

在此練習中,您會開啟 Visual Studio Code 並完成使用者介面的快速導覽。

開啟 Visual Studio Code 並檢查 [歡迎] 頁面

  1. 使用 [Windows 開始] 功能表開啟 Visual Studio Code。

    如果您開啟 [Windows 開始] 功能表,您應該會看到 Visual Studio Code 列為最近新增的應用程式。 您也可以向下捲動以尋找 Visual Studio Code。

    另一個選項是在畫面底部的 [Windows 搜尋] 方塊中輸入 [Visual Studio Code]。

  2. 請注意,Visual Studio Code 會開啟包含一些連結和其他資訊的 [歡迎] 頁面。

    第一次開啟 Visual Studio Code 時,[歡迎] 頁面會顯示一些實用的逐步解說,例如開始使用 VS Code內容。 您可以在其他空閒時間檢查此資訊。

  3. 若要關閉 [歡迎] 頁面,請選取 [關閉] 按鈕 (在介面顯示為 [X])。

    在編輯器中開啟的每個頁面都包含位於頁面標題右側的 [關閉] 按鈕 ([X])。 [歡迎] 頁面索引標籤會顯示在主功能表下方 Visual Studio Code 視窗的左上方部分。 如果您將滑鼠指標停留在 [X]上方,則會出現 [關閉] 一字。

檢查活動列和側邊列

  1. 請注意,[活動列]右邊的 [側邊列] 已摺疊。

    您可能會記得 [活動列] 是 Visual Studio Code 視窗最左邊的圖示垂直清單。 [側邊列] 的內容取決於 [活動列] 目前選取的內容。

  2. 將滑鼠指標放在 [活動列]上方,然後將滑鼠指標停留在每個圖示上以顯示標籤。

    當您將滑鼠停留在圖示上方時,會出現標籤。 您應該會看到下圖中顯示的 [活動列] 按鈕:

    顯示具有標籤圖示之 Visual Studio Code 活動列的螢幕擷取畫面。

    從上至下,活動列圖示為:[總管]、[搜尋]、[原始檔控制]、[執行和偵錯]、[延伸模組]、[帳戶] 和 [管理]。

  3. 在 [活動列]上,選取 [總管]。

    [側邊列] 應該會開啟並顯示內容資訊。

  4. 請注意,[側邊列] 現在已標記為 [EXPLORER]。

    [EXPLORER] 檢視可用來存取/探索專案資料夾和程式碼檔案。

    Visual Studio Code 會記住您的工作歷程記錄,並在開啟時開啟最新的專案檔。 因為這是您第一次開啟 Visual Studio Code,所以不會開啟專案資料夾。

  5. 在 [活動列]上,選取 [延伸模組]。

  6. 請注意,[側邊列] 現在已標記為 [EXTENSIONS]。

  7. 花點時間檢查 [延伸模組] 檢視中顯示的資訊。

    Visual Studio Code 延伸模組可讓您將編碼語言、偵錯工具和其他工具新增至環境,以支援您的開發工作流程。 您將在本課程模組稍後安裝 C# 延伸模組。

  8. 在 [活動列] 上,若要關閉 [延伸模組] 側邊列,請選取 [延伸模組]。

檢查頂端功能表選項

  1. 若要檢視 [檔案] 功能表選項,請選取 [檔案]。

  2. 請注意 [檔案] 功能表上所列的 [新增]、[開啟]、[儲存] 和 [關閉] 選項。

  3. 請花一分鐘檢查 [編輯] 功能表選項,然後再檢查其他最上層功能表項目。

  4. 請注意,其中數個功能表包含與程式碼互動的選項。

    例如:

    • [編輯] 功能表包含尋找、取代和切換程式碼註解的選項,以及標準剪下、複製、貼上、復原和重做。
    • [選取] 功能表包含選取及操作程式碼行的選項。
    • [執行] 功能表包含執行和偵錯應用程式的選項。
  5. 在 [終端機] 功能表上,選取 [新增終端機]

  6. 花點時間檢查 [終端機] 面板的內容。

    您可以在索引標籤之間切換 (問題、輸出、偵錯主控台和終端機),並將滑鼠指標暫留按鈕 (在右上方) 以顯示按鈕標籤。

  7. 請注意,[終端機] 面板包含命令提示字元。

    [終端機] 面板可用來執行命令列介面 (CLI) 命令。 您將在本課程模組稍後使用 .NET CLI 命令。

  8. 在 [終端機] 面板右上角,選取 [X] ([關閉面板])。

  9. 在 [檢視] 功能表上,選取 [命令選擇區]

    命令選擇區可用來尋找和執行各種有用的命令。 您現在沒有時間 (或需要) 來詳細檢查它們,但最好知道要在哪裡找到命令選擇區。

  10. 在命令選擇區提示下,輸入 [extensions]

    請注意,命令清單會根據您的項目進行篩選。

  11. 若要更新篩選的命令清單,請變更 [延伸模組] 以 [說明]

  12. 從命令選項清單中,選取 [說明: 互動式編輯器遊樂場]。

    在 [編輯器] 中開啟的 [編輯器遊樂場] 文件包含互動式活動清單。

  13. 從互動式活動的項目符號清單中,選取 [格式化]。

  14. 請花一點時間閱讀格式化選項。

    當您深入瞭解 C# 程式設計時,您將會在活動期間使用程式代碼格式設定命令。

  15. 關閉 [編輯器遊樂場] 文件。

這可完成 Visual Studio Code 使用者介面的導覽。 開始撰寫程式碼之後,訓練教材會繼續指出 Visual Studio Code 可協助您提高生產力的方式。