竞猜排行 / 2026-02-04 06:20:26
教程：Visual Studio Code 入門
在本教程中，你將瞭解 Visual Studio Code 的關鍵功能，以幫助你快速開始編碼。你將瞭解使用者介面的不同元件以及如何自定義它以滿足你的喜好。然後，你將編寫一些程式碼並使用內建的程式碼編輯功能，如 IntelliSense 和程式碼操作，你還將學習如何執行和除錯你的程式碼。透過安裝語言擴充套件，你可以為不同的程式語言新增支援。
提示如果你更喜歡透過影片學習，可以觀看 入門影片，該影片涵蓋了本教程的相同步驟。
先決條件
在你的計算機上下載並安裝 Visual Studio Code
在 VS Code 中開啟資料夾
你可以使用 VS Code 處理單個檔案進行快速編輯，也可以開啟一個資料夾，也稱為 _工作區_。
讓我們首先建立一個資料夾並在 VS Code 中開啟它。你將在整個教程中使用此資料夾。
開啟 Visual Studio Code。
首次開啟 VS Code 時，你應該會看到 **歡迎** 頁面，其中包含不同的入門操作。
從選單中選擇 **檔案** > **開啟資料夾...** 來開啟資料夾。
選擇 **新建資料夾**，建立一個名為 vscode101 的新資料夾，然後選擇 **選擇資料夾**（macOS 上為 **開啟**）。
你建立的資料夾是你工作區的根目錄。
在 **工作區信任** 對話方塊中，選擇 **是，我信任作者** 以啟用工作區中的所有功能。
由於你在計算機上建立了該資料夾，因此你可以信任該資料夾中的程式碼。
重要工作區信任允許你決定專案資料夾中的程式碼是否可以由 VS Code 執行。當你從 Internet 下載程式碼時，應首先對其進行審查，以確保其執行安全。有關 工作區信任 的更多資訊。
現在，你應該在左側看到 **資源管理器** 檢視，顯示資料夾的名稱。
你將使用資源管理器檢視來檢視和管理工作區中的檔案和資料夾。
提示當你開啟 VS Code 中的資料夾時，VS Code 可以恢復該資料夾的使用者介面狀態，例如開啟的檔案、活動檢視以及編輯器的佈局。你還可以配置僅適用於該資料夾的設定，或定義除錯配置。有關 工作區 的更多資訊。
探索使用者介面
現在你已經在 VS Code 中打開了一個資料夾，讓我們快速瀏覽一下使用者介面。
透過活動欄切換檢視
使用活動欄在不同檢視之間切換。
提示將滑鼠懸停在活動欄上，即可看到每個檢視的名稱和相應的鍵盤快捷鍵。你可以透過再次選擇檢視或按鍵盤快捷鍵來開啟和關閉檢視。
當你選擇活動欄中的檢視時，**主側邊欄** 會開啟以顯示檢視特定的資訊。
例如，執行和除錯檢視允許你配置和啟動除錯會話。
透過編輯器檢視和編輯檔案
在活動欄中選擇 **資源管理器** 檢視，然後選擇 **新建檔案...** 按鈕在你的工作區中建立新檔案。
輸入檔名 index.html，然後按 Enter。
檔案將新增到你的工作區，並且編輯器將在視窗的主區域中開啟。
開始在 index.html 檔案中鍵入一些 HTML 程式碼。
在你鍵入時，你應該會看到建議彈出，幫助你完成程式碼（_IntelliSense_）。你可以使用 上 和 下 鍵導航建議，並使用 Tab 鍵插入選定的建議。
向工作區新增更多檔案，並注意每個檔案都會開啟一個新的編輯器選項卡。
你可以開啟任意數量的編輯器，並將它們並排放置，垂直或水平。瞭解有關 並排編輯 的更多資訊。
從面板區域訪問終端
VS Code 具有整合終端。按 ⌃`（Windows、Linux Ctrl+`） 開啟它。
你可以選擇不同的 shell，例如 PowerShell、命令提示符或 Bash，具體取決於你的作業系統配置。
在終端中，輸入以下命令在你的工作區中建立一個新檔案。
echo "Hello, VS Code" > greetings.txt
預設工作資料夾是你工作區的根目錄。請注意，資源管理器檢視會自動捕獲並顯示新檔案。
你可以同時開啟多個終端。選擇 **啟動配置** 下拉選單以檢視可用的 shell 並選擇一個。
透過命令面板訪問命令
按 ⇧⌘P（Windows、Linux Ctrl+Shift+P） 開啟 **命令面板**。你也可以使用 **檢視** > **命令面板...** 選單項。
VS Code 中的許多命令都可以透過命令面板訪問。當你安裝擴充套件時，它們也可以將命令新增到命令面板。
提示請注意，命令面板顯示具有鍵盤快捷鍵的命令的預設快捷鍵。你可以使用鍵盤快捷鍵直接執行命令。
命令面板支援不同的操作模式
在 > 符號之後，開始鍵入以過濾命令列表。例如，鍵入 move terminal 來查詢將終端移動到新視窗的命令。
刪除 > 字元並開始鍵入以搜尋工作區中的檔案。你可以使用 ⌘P（Windows、Linux Ctrl+P） 鍵盤快捷鍵直接開啟命令面板並開始搜尋檔案。
提示VS Code 使用模糊匹配來查詢檔案或命令。例如，鍵入 odks 會返回 開啟預設鍵盤快捷方式 命令。
配置 VS Code 設定
你可以透過配置設定來自定義 VS Code 的幾乎所有部分。你可以使用 **設定編輯器** 修改 VS Code 中的設定，或直接修改 settings.json 檔案。
按 ⌘,（Windows、Linux Ctrl+,） 開啟設定編輯器（或選擇 **檔案** > **首選項** > **設定** 選單項）。
提示使用搜索框過濾顯示的設定列表。
預設情況下，VS Code 不會自動儲存修改過的檔案。從“自動儲存”下拉選單中選擇一個值來更改此行為。
VS Code 會自動應用設定的更改。當你修改工作區中的檔案時，它現在應該會自動儲存。
要將設定恢復為其預設值，請選擇設定旁邊的齒輪圖示，然後選擇 **重置設定**。
提示你可以透過在搜尋框中鍵入 @modified 或選擇 **已修改** 過濾器來快速找到所有已修改的設定。
你可以使用設定編輯器中的選項卡在 **使用者** 設定和 **工作區** 設定之間切換。
使用者設定適用於你的所有工作區。工作區設定僅適用於當前工作區。工作區設定會覆蓋使用者設定。有關 VS Code 中 設定 的更多資訊。
編寫一些程式碼
VS Code 內建支援 JavaScript、TypeScript、HTML、CSS 等。在本教程中，你將建立一個示例 JavaScript 檔案並使用 VS Code 提供的一些程式碼編輯功能。
VS Code 支援許多程式語言，在下一步中，你將 安裝語言擴充套件 以新增對另一種語言（即 Python）的支援。
在資源管理器檢視中，建立一個新檔案 app.js，然後開始鍵入以下 JavaScript 程式碼
function sayHello(name) {
console.log('Hello, ' + name);
}
sayHello('VS Code');
在你鍵入時，你應該會看到建議彈出，幫助你完成程式碼（_IntelliSense_）。你可以使用 上 和 下 鍵導航建議，並使用 Tab 鍵插入選定的建議。
同時注意程式碼的格式（_語法高亮_），以幫助你區分程式碼的不同部分。
當你將游標放在字串 Hello, 上時，你應該會看到一個燈泡圖標出現，表明有一個程式碼操作。
你還可以使用 ⌃Space（Windows、Linux Ctrl+Space） 鍵盤快捷鍵開啟燈泡選單。
選擇燈泡圖示，然後選擇 **轉換為模板字串**。
程式碼操作是用於對程式碼應用快速修復的建議。在本例中，程式碼操作將 ""Hello, " + name 轉換為 模板字串 `Hello, ${name}`，這是一個嵌入表示式到字串中的特殊 JavaScript 結構。
瞭解有關 VS Code 中程式碼 編輯功能、IntelliSense、程式碼導航 和 重構 的更多資訊。
使用原始碼管理
Visual Studio Code 具有整合的原始碼管理 (SCM)，幷包含開箱即用的 Git 支援。
讓我們使用內建的 Git 支援來提交之前所做的更改。
在活動欄中選擇 **原始碼管理** 檢視以開啟原始碼管理檢視。
請確保你的計算機上已安裝 Git。如果未安裝 Git，你將在原始碼管理檢視中看到一個用於在你計算機上安裝它的按鈕。
選擇 **初始化儲存庫** 來為你的工作區建立新的 Git 儲存庫。
初始化儲存庫後，原始碼管理檢視將顯示你在工作區中所做的更改。
你可以透過將滑鼠懸停在檔案上並選擇檔案旁邊的 + 來暫存單個更改。
提示要暫存所有更改，請將滑鼠懸停在 **更改** 上並選擇 **暫存所有更改** 按鈕。
輸入提交訊息，例如 新增 hello 函式，然後選擇 **提交** 將更改提交到你的 Git 儲存庫。
提示在原始碼管理檢視中選擇 **圖表**，以顯示你的 Git 儲存庫提交歷史記錄的視覺化表示。
VS Code 中的原始碼管理還有更多內容可以探索。有關 VS Code 中 原始碼管理 的更多資訊。
安裝語言擴充套件
VS Code 擁有豐富的擴充套件生態系統，可讓你為安裝新增語言、偵錯程式和工具，以支援你的特定開發工作流。在 Visual Studio Marketplace 中有數千個可用的擴充套件。
讓我們安裝一個語言擴充套件來新增對 Python 或你感興趣的任何其他程式語言的支援。
在活動欄中選擇 **擴充套件** 檢視。
擴充套件檢視允許你在 VS Code 中瀏覽和安裝擴充套件。
在擴充套件檢視搜尋框中輸入 _Python_ 來瀏覽 Python 相關擴充套件。選擇 Microsoft釋出的 **Python** 擴充套件，然後選擇 **安裝** 按鈕。
現在，在你的工作區中建立一個新 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 程式。
請確保你的計算機上已安裝 Python 3。
如果你的計算機上沒有安裝 Python 直譯器，你會在視窗右下角看到一個通知。選擇 **選擇直譯器** 開啟 **命令面板**，然後選擇你想要使用的 Python 直譯器或安裝一個。
在 hello.py 檔案中，將游標放在 print 行上，然後按 F9 設定斷點。
編輯器左邊距會出現一個紅點，表示已設定斷點。有了斷點，你就可以在特定程式碼行暫停程式的執行。
按 F5 開始除錯會話。
選擇 Python 偵錯程式
選擇運行當前的 Python 檔案
請注意，程式已啟動，並且執行會在你設定的斷點處停止。
提示透過在執行暫停時將滑鼠懸停在變數上，來檢查 name 變數的值。你可以在“執行和除錯”檢視的 **變數** 檢視中隨時檢視變數的值。
按“除錯”工具欄中的 **繼續** 按鈕或按 F5 繼續執行。
VS Code 中還有許多其他除錯功能，例如監視變數、條件斷點和啟動配置。深入瞭解 VS Code 中 除錯 的詳細資訊。
透過 AI 和 GitHub Copilot 增強你的編碼
GitHub Copilot 是一個由 AI 驅動的助手，可幫助你更快地編寫程式碼，並可以幫助你完成各種任務，例如程式碼補全、程式碼重構和修復錯誤。
讓我們開始從 Copilot 獲取程式碼建議。
請確保已在 VS Code 中設定好 Copilot。請遵循我們 Copilot 設定 指南中的步驟。
提示如果你還沒有 Copilot 訂閱，你可以透過註冊 Copilot 免費計劃 來免費使用 Copilot，並獲得每月一次的內聯建議和聊天互動限制。
在 hello.py 檔案中，將游標放在檔案末尾，然後鍵入此函式標頭。
def say_day_of_week(date)
GitHub Copilot 將自動建議函式的其餘部分。透過按 Tab 鍵接受程式碼建議。
接下來，讓我們呼叫新函式。
say_day_of_week(date.today())
請注意，date 關鍵字上有一個波浪線，表示存在錯誤。
將游標放在 date 關鍵字上，選擇 _燈泡_ 圖示，然後選擇 **使用 Copilot 修復**。
GitHub Copilot 將建議一個錯誤修復。如果你對建議滿意，請選擇 **接受**。
提示你還可以使用 ⌘.（Windows、Linux Ctrl+.） 鍵盤快捷鍵手動觸發快速修復。
在 VS Code 中，你還可以使用 Copilot 做更多事情。透過我們的 Copilot 快速入門，瞭解 VS Code 中 GitHub Copilot 的更多資訊。
後續步驟
恭喜！你已完成本教程，並探索了 Visual Studio Code 的一些關鍵功能。既然你已經掌握了 Visual Studio Code 的基礎知識，請詳細瞭解如何
發現並執行程式碼的單元測試
使用整合終端
設定遠端開發環境
01/08/2026
荣耀Magic8外放音质怎么样？临沂电信宽带2025套餐：价格与办理指南全解析