共用方式為


Visual Studio 整合式開發環境 (IDE) 初探

在這個 5-10 分鐘的 Visual Studio 整合開發環境 (IDE) 介紹中,我們將介紹一些視窗、選單和其他 UI 功能。

如果您尚未安裝 Visual Studio,請前往 Visual Studio 下載頁面免費安裝。

啟動視窗

啟動 Visual Studio 後首先看到的是啟動視窗。 啟動視窗旨在協助您更快速「開始撰寫程式碼」。 其選項可讓您關閉或簽出代碼、開啟現有專案或方案、建立新專案、或僅開啟包含某些程式碼檔案的資料夾。

Screenshot of the start window in Visual Studio 2022.

Screenshot of the start window in Visual Studio 2019.

如果這是您第一次使用 Visual Studio,則最近使用的專案清單會是空白。

如果使用非基於 MSBuild 的程式碼庫,請使用「開啟本機資料夾」選項在 Visual Studio 中開啟程式碼。 如需詳細資訊,請參閱在 Visual Studio 中不使用專案或方案來開發程式碼。 否則,您可以建立新的專案或從來源提供者複製專案,例如 GitHub 或 Azure DevOps。

[不使用程式碼繼續] 選項僅會開啟 Visual Studio 開發環境,而不包含任何特定專案,也不會載入程式碼。 您可以選擇此選項來加入 Live Share 工作階段或附加至處理序以進行偵錯。 您也可以按 Esc 來關閉啟動視窗並開啟 IDE。

建立專案

若要繼續探索 Visual Studio 的功能,讓我們建立新的專案。

  1. 在開始視窗中,選擇「建立新專案」,然後在搜尋框中鍵入 javascript typescript以將專案類型清單篩選為名稱或語言類型中包含「javascript」或「typescript」的專案類型。

    Visual Studio 提供各種專案範本,協助您開始快速撰寫程式碼。

    Screenshot of search for project templates on Visual Studio start window.

    Screenshot of search for project templates on Visual Studio start window.

  1. 選擇 JavaScript Express 應用程式專案範本,然後按一下下一步
  1. 選擇 [空白 Node.js Web 應用程式] 專案範本並按一下 [下一步]
  1. 在出現的 [設定您的新專案] 對話方塊中,接受預設專案名稱,並選擇 [建立]

    專案已完成建立。 在右側窗格中,選擇 app.js 以在編輯器視窗中開啟該檔案。 該編輯器顯示文件的內容,並且是您在 Visual Studio 中完成大部分編碼工作的地方。

    Screenshot of editor in Visual Studio.

    隨即建立專案,並在 [編輯器] 視窗中開啟一個名為 server.js 的檔案。 該編輯器顯示文件的內容,並且是您在 Visual Studio 中完成大部分編碼工作的地方。

    Screenshot of editor in Visual Studio.

方案總管

[方案總管] 一般位在 Visual Studio 右側,並示範以圖形呈現專案、方案或程式碼資料夾中的檔案和資料夾階層。 您可以在 [方案總管] 中瀏覽階層並巡覽至某個檔案。

Screenshot of Solution Explorer in Visual Studio.

Screenshot of Solution Explorer in Visual Studio.

Visual Studio 頂端的功能表列可將命令依類別分組。 例如,[專案] 功能表會包含您正在處理的專案相關命令。 在 [工具] 功能表上,您可以選取 [選項] 來自訂 Visual Studio 行為,或選取 [取得工具與功能] 來將功能新增到您的安裝。

Screenshot of menu bar in Visual Studio.

Screenshot of menu bar in Visual Studio.

讓我們選擇 [檢視] 功能表,然後選擇 [錯誤清單],以開啟 [錯誤清單] 視窗。

錯誤清單

[錯誤清單] 顯示與您程式碼目前狀態相關的錯誤、警告和訊息。 如果您的檔案中或專案中的任何位置有任何錯誤 (例如遺漏大括弧或分號),則會在此處列出。

Screenshot of Error List in Visual Studio.

Screenshot of Error List in Visual Studio.

輸出視窗

[輸出] 視窗會顯示建置專案的輸出訊息以及來自原始檔控制提供者的輸出訊息。

請建置專案以查看一些建置輸出。 從 [ 建置 ] 功能表中,選擇 [ 建置方案]。 [輸出] 視窗會自動取得焦點並顯示成功建置訊息。

Screenshot of Output window in Visual Studio.

Screenshot of Output window in Visual Studio.

搜尋方塊可以讓您在 Visual Studio 中快速輕鬆地執行大部分的工作。 您可以輸入想要執行工作的相關文字,它就會顯示與該文字相關的選項清單。 例如,假設您想要增加建置輸出的詳細資料,以顯示建置實際工作內容的其他詳細資料。 您可能使用的方法如下:

  1. 如果您沒有看到搜尋框,請按 Ctrl + Q 將其開啟。

  2. 在搜尋方塊中鍵入詳細資訊。 從顯示的結果中,選擇專案和解決方案 - >建置和執行

    Screenshot of the Search box in Visual Studio.

    Screenshot of the Search box in Visual Studio.

    [選項] 對話方塊會開啟 [建置並執行] 選項頁面。

  3. 在 [MSBuild 專案建置輸出詳細等級] 底下,選擇 [一般],然後按一下 [確定]

  4. 透過右鍵點選「解決方案資源管理器」中的項目並從內文選單中選擇重新建立,再次建立項目。

    這次輸出視窗顯示了建置過程中更詳細的日誌記錄。

    Screenshot of verbose build output in Visual Studio.

    Screenshot of verbose build output in Visual Studio.

[傳送意見反應] 功能表

如果您在使用 Visual Studio 時遇到任何問題,或如果您有改善產品的建議,請使用 Visual Studio 視窗頂端的 [傳送意見反應] 功能表。

Screenshot of Send Feedback menu in Visual Studio.

Screenshot of Send Feedback menu in Visual Studio.

下一步

我們已經介紹 Visual Studio 的幾個功能,藉以熟悉使用者介面。 若要進一步探索:

另請參閱