Visual Studio Code 的運作方式

已完成

現在您已熟悉 Visual Studio Code 的主要功能,讓我們看看 Visual Studio Code 如何運作 - 有哪些現成的功能,以及可透過延伸模組市集新增哪些功能。

Visual Studio Code 具有輕量型使用量。 Visual Studio Code 提供現成的:

  • UI,具有編輯器、總管、搜尋、偵錯工具、原始檔控制、終端機和延伸模組功能。
  • 支援數種語言,包括 HTML、CSS、JavaScript 和 TypeScript。
  • 與 Git 整合以進行原始檔控制。
  • 與 Node.js 整合以執行和偵錯 JavaScript。

對於某些開發人員來說,需要的是此初始安裝,才能開始使用其 Web 應用程式專案。 但大多數開發人員想要藉由安裝延伸模組來新增更多工具和其他語言的支援。

什麼是延伸模組?

延伸模組是外掛至 Visual Studio Code UI 的程式碼套件,並新增對功能的支援,例如:

  • 變更 UI 色彩配置的外觀和風格,或檔案圖示在總管中顯示樣式的佈景主題。
  • Linter 或程式碼修飾器等生產力工具。
  • 其他程式設計語言,例如 C++、Python 和其他數百種語言。
  • 偵錯支援。

您可以快速新增 Visual Studio Code 所需的內容,並省略您不需要的內容。

您要在哪裡取得延伸模組?

您可以從 Visual Studio Code 中的延伸模組市集搜尋、下載及安裝延伸模組,其與 Visual Studio Marketplace 整合。 例如,您可以依格式器、程式設計語言或佈景主題等類別進行搜尋。 下列螢幕擷取畫面顯示「格式器」類別中可用的許多延伸模組的其中一部分。 當您找到要新增的延伸模組時,請選取 [安裝]

Visual Studio Code 的螢幕擷取畫面,其中顯示延伸模組市集檢視和檢視中更美化的延伸模組。

誰建置延伸模組?

Microsoft 發佈許多熱門延伸模組,包括 C/C++、Python 和 Docker。 Red Hat 等個人或公司的第三方也會建立延伸模組並發佈到市集。 大部分延伸模組都是免費的。 不過,某些提供者會收取下載和使用其延伸模組的費用。 發行者列在延伸模組名稱下方。

Visual Studio Code 的螢幕擷取畫面,其中顯示延伸模組市集檢視和檢視中 Microsoft 發佈的 Python 延伸模組。

案例

現在讓我們應用此知識,了解 Visual Studio Code 的運作方式,並查看我們在案例中如何設定 Visual Studio Code。

回想一下案例的第一個部分,您想要為當地餐廳建置網站。 為了達成此目的,您決定建置 Node.js 應用程式。

以下是您採取的方法:

  1. 首先,您針對電腦平台 (Windows、macOS 或 Linux) 下載及安裝 Visual Studio Code 版本

  2. 接下來,您啟動 Visual Studio Code 並使用內建終端機,安裝可協助您建立基本 Node.js 應用程式的 Node.js 套件。 Scaffolding 會建立數個執行 Node.js 應用程式所需的檔案。

  3. 使用編輯器工作區,您可以編輯這些檔案。 編輯器內建的 IntelliSense 會提供程式碼完成的提示,協助您撰寫和編輯程式碼。 這項功能可協助您節省時間,並確保程式碼的語法正確無誤。

  4. 當您工作時,可以使用內建原始檔控制檢視,或從整合式終端機發出 Git 命令,將檔案簽入 GitHub。 藉由與 GitHub 整合,您可以維護工作版本,以協助您在一段時間內更妥善地管理程式碼的變更。

  5. 現在您已熟悉 Visual Studio Code,您決定安裝 Visual Studio Code 延伸模組,讓程式碼的格式更容易閱讀,以增加您的生產力。 您搜尋並安裝 Prettier 延伸模組。

  6. 當您準備好時,您可以使用內建偵錯工具來測試應用程式,並查看其外觀。

啟動餐廳網站之後,您可以繼續使用 Visual Studio Code 進行餐廳工作的其他專案。

若要準備開發庫存應用程式,您要下載並安裝 Microsoft C/C++ 延伸模組和 Microsoft Visual C++ (MSVC) 編譯器工具組。 此設定可讓您在電腦上執行和偵錯 C++ 程式碼。

若要設定 Visual Studio Code 以執行餐廳的資料分析,您要下載並安裝 Python 延伸模組,其中也包含 Jupyter 延伸模組。 如果您尚未在電腦上安裝 Python,您也需要下載並安裝 Python 解譯器。

安裝一些延伸模組、編譯器和解譯器之後,您要設定 Visual Studio Code,以便開發數個不同的應用程式。 此外,您只新增您需要的功能,讓程式碼編輯器保持輕量型。