【實驗手冊】使用Visual Studio Code 開發.NET Core應用程式

張善友發表於2017-11-07

.NET Core with Visual Studio Code

目錄

概述... 2

先決條件... 2

練習1： 安裝和配置.NET Core以及Visual Studio Code 擴充套件... 2

任務1：安裝Visual Studio Code和.NET Core. 2

任務2：安裝外掛... 4

練習2：使用命令列介面構建. NET Core應用程式... 5

練習3：使用 Visual Studio Code和 Omnisharp 除錯 c# 程式碼... 12

任務1：從VS code啟動偵錯程式... 13

任務2：附加到程式/網站... 13

練習4： 使用Visual Studio Code 開發ASP.NET Core 應用程式... 14

任務1：建立解決方案... 14

任務2：將專案新增到我們的解決方案中... 15

任務3：向專案新增專案引用... 16

任務4：將NuGet包新增到專案或更新它... 17

概述

開源和跨平臺開發是Microsoft 的當前和將來至關重要的策略。.NET Core已開源，同時開發了其他項來使用和支援新的跨平臺策略。.NET Core 2.0 目前已經正式釋出，是適用於針對 Web 和雲構建跨平臺應用程式的最新開源技術，可在 Linux、Mac OS X 和 Windows 上執行。

.NET Core使用各種命令列工具來生成基架、構建和執行應用程式，同時可以使用 Visual Studio Code 進行編輯。

Visual Studio Code 是微軟為廣大開發人員提供的免費開源的跨平臺程式碼編輯器，和其它流行的程式碼編輯器，如：Sublime, Atom一樣，它非常小，執行速度快，同時通過各種外掛支援不同開發語言的編寫。不同的地方在於，VSC的外掛不僅僅提供靜態的語言高亮，自動語法檢測和完成功能外；還提供更加高階的編譯器服務支援，這使得VSC可以在一定程度上替代IDE的功能，進行程式碼的編譯，除錯和釋出操作。

本實驗將介紹如何開發.NET Core跨平臺應用程式，以及如何在 Linux、OS X 和 Windows 上的 Visual Studio Code (code.visualstudio.com) 中編寫程式碼。

先決條件

1. 為了完成這個實驗，你需要一個Windows 10虛擬機器

2. 你需要在虛擬機器上手動安裝.NET Core和Visual Studio Code，你可以按照練習1 的任務1來搭建實驗環境

3. 你需要下載和安裝Visual Studio Code的C#擴充套件，你可以按照練習1的任務2來完成

練習1： 安裝和配置.NET Core以及Visual Studio Code 擴充套件

在本練習中，您將瞭解安裝和配置 Visual Studio Code 和.NET Core擴充套件出於演示目的所需的安裝和配置要點

任務1：安裝Visual Studio Code和.NET Core

1. 下載Visual Studio Code ，從https://code.visualstudio.com/ 下載最新版本並安裝

clip_image002

2. 從 https://www.microsoft.com/net/core 下載.NET Core 2.0進行安裝

clip_image004

3. Node.JS和NPM，以及 bower, gulp 和 grunt 等前端工具, Node.js是一個javascript的執行引擎，提供服務端的javascript執行能力，同時也包含了npm這個包管理器，可以用來安裝 bower, glup，grunt等前端工具。下載地址：http://nodejs.org

安裝完成後，讓通過以下命令安裝前端工具

npm install bower gulp grunt-cli -g

clip_image006

任務2：安裝外掛

安裝好Visual Studio Code 之後，需要安裝下面外掛

1. C# 擴充套件http://www.omnisharp.net/

2. 安裝vscode-nuget-package-manager

您可以在Visual Studio Code中介面安裝這些擴充套件（選擇選單檢視-擴充套件）, 也可以使用 Ctrl + P, 然後輸入 ext install vscode-nuget-package-manager或 ext install csharp。一旦您安裝了 NuGet 專案管理器, 您還將使用它來安裝 NuGet 包。

clip_image008

練習2：使用命令列介面構建. NET Core應用程式

.NET Core CLI 是開發 .NET Core 應用程式的一個新的跨平臺工具鏈的基礎。它是“基礎”的原因時它是在其它的、高階別工具的主要層，如整合開發環境（IDEs），由編輯器和構建者組成。

預設它是跨平臺的，並且對支援的每個平臺有相同的表現範圍。這意味著，當你學會如何使用工具，你可以從任何支援的平臺上以同樣的方式使用它。

本練習中現在我們假設你已經安裝好了VS Code開發工具、.Net Core 2.0 SDK dotnet-sdk-2.0.0（注意自己的作業系統），並且已經為VS Code安裝好了C#擴充套件。

一、 我們先在我們的電腦硬碟的新建一個資料夾。我把這個地方選在D:\WorkTest下，建立的資料夾名稱為HelloWorld。注意，這一步不是在VS Code中完成的，VS Code中不能建立資料夾。

二、 在VS Code開發環境中，選擇 檔案->開啟資料夾，然後選擇我們剛剛建立資料夾HelloWorld開啟

三、 選擇 檢視->整合終端 命令或直接摁下快捷鍵Ctrl+`，VS Code開發環境中會出現一個整合的終端。比如我接下來在整合終端中輸入命令dotnet new sln -n HelloWorld，在我們的HelloWorld資料夾下會出現一個解決方案HelloWorld.sln

clip_image010

四、 接下來，我們再在整合終端中輸入dotnet new mvc -n HelloWorld.Web，經過VS Code一陣的掙扎和折騰，我們會發現左邊的檔案列表中多了一個叫HelloWorld.Web的MVC專案。如下圖：

clip_image012

五、 按下F5，選擇.NET Core, 出來一個launch.json，如下圖：

clip_image014

六、 在整合終端中輸入命令dotnet build HelloWorld.Web命令，回車，完事後成成了一個東西在Debug下邊。好了，我們把這段生成的東西放在launch.json的.NET Core Launch (web)配置項的program中，然後順便改一下下邊那個cwd。完事後看起來效果是下邊這樣子的：

clip_image016

七、 點選左邊的那個小蟲子，VS Code中的左側會出現上圖中的情況，選擇.NET Core Launch (web)，再次摁下F5，點選“配置任務執行程式”，自動生成了下邊這個配置json檔案：

clip_image018

八、 我們現在配置一下這個新生成的task.json吧。也就是在tasks配置項中新增如下內容，指定一下任務在build時的直接命令物件。${workspaceRoot}的意思就是你專案的根目錄，別寫成絕對路徑，不然回頭你專案釋出後找不到

clip_image020

九、 再次按下F5， 一個.Net Core MVC網站出現在我們眼前

clip_image022

有可能會出現下面的錯誤：

clip_image024

這是由於預設啟動的是 .NET Core Launch (console)，點選除錯（左邊小蟲子圖示），選擇.NET Core Launch (web)

clip_image025

十、 下面我們演示給專案新增一個Nuget包

利用我們前面安裝的VS code 的Nuget 包擴充套件外掛，我們選中HelloWorld.Web 專案，使用UI選單檢視- 命令皮膚：

clip_image027

選擇NuGet Package Manager:Add Package, 回車，輸入NodaTime , 選擇版本後提示新增成功，開啟HelloWorld.Web.csproj 檔案可以看到NodaTime已經新增到工程中

clip_image029

開啟 HomeController 檔案，加入下述程式碼：

clip_image031

在Views\Home\Index.cshtml 加入下面程式碼

clip_image033

練習3：使用 Visual Studio Code和 Omnisharp 除錯 c# 程式碼

上面的練習我們已經看到專案下有個.vscode 資料夾。裡面有2個檔案tasks.json 和launch.json.

clip_image034

tasks.json 用於dotnet 構建任務的配置資料，當你按下F5 啟動除錯時VS Code 可以生成專案

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "2.0.0",

"tasks": [

{

"taskName": "build",

"command": "dotnet build",

"type": "shell",

"group": "build",

"presentation": {

"reveal": "silent"

},

"problemMatcher": "$msCompile",

"options": {

"cwd": "${workspaceRoot}/HelloWorld.Web"

}

}

]

}

launch.json包含除錯模式的配置資料，預設是從vs code啟動或者附加程式。

launch.json中有很多屬性可以設定, 通過智慧提示檢視有那些屬性可以設定, 如果要檢視屬性的具體含義, 可以把滑鼠懸停在屬性上面, 會屬性的使用說明.

任務1：從VS code啟動偵錯程式

對於控制檯和Web專案是非常簡單的，只需在程式碼中設定斷點，導航到除錯視窗（ctrl + shift + d）並點選除錯按鈕 - “.Net Core Launch”選項應該預設選擇。您的應用程式現在應該停止在您的斷點。

clip_image036

任務2：附加到程式/網站

使用VsCode將偵錯程式附加到正在執行的程式也非常簡單，設定斷點，從除錯選單中選擇“.Net Core Attach”選項，然後進行除錯。工作列應顯示您可以選擇附加偵錯程式的正在執行的程式的列表 - 在本示例中，我們將附加到正在執行的dotnet網站程式。

clip_image038

練習4： 使用Visual Studio Code 開發ASP.NET Core 應用程式

本練習要使用Visual studio code完成一個包含多個專案的解決方案，包括類庫和Web專案。結合Visual Studio Code和.NET Core CLI，建立專案結構如下：

piedpiper

└── src

├── piedpiper.domain

├── piedpiper.sln

├── piedpiper.tests

└── piedpiper.website

任務1：建立解決方案

首先，我們將建立我們的解決方案（.sln）檔案，我一直都喜歡在頂級原始檔夾中建立解決方案檔案D:\WorkTest\piedpiper, 開啟Visual Studio Code的整合終端，

PS D:\WorkTest\piedpiper> cd src

PS D:\WorkTest\piedpiper\src> dotnet new sln -n piedpiper

這將建立一個sln名為的新檔案piedpiper.sln。

接下來，我們使用dotnet new <projecttype>命令中的output引數在特定資料夾中建立一個專案：

PS D:\WorkTest\piedpiper\src> dotnet new mvc -o piedpiper.website

已成功建立模板“ASP.NET Core Web App (Model-View-Controller)”。

這將在同一目錄中的piedpiper.website資料夾中建立一個ASP.NET Core MVC應用程式。如果我們目前看到我們的資料夾結構，它看起來像這樣：

接下來我們可以為我們的域名和測試專案做同樣的事情：

PS D:\WorkTest\piedpiper\src> dotnet new classlib -o piedpiper.domain

PS D:\WorkTest\piedpiper\src> dotnet new xunit -o piedpiper.tests

任務2：將專案新增到我們的解決方案中

在這一點上，我們有一個沒有引用專案的解決方案檔案，我們可以通過呼叫list命令來驗證這一點：

PS D:\WorkTest\piedpiper\src> dotnet sln list

未在解決方案中找到專案。

接下來我們將我們的專案新增到我們的解決方案檔案，我們很容易在Visual Studio 2017中開啟解決方案，然後手動新增對每個專案的引用。Visual Studio Code也可以通過.NET Core CLI完成。

現在開始使用以下命令新增每個專案，我們通過引用.csproj檔案來執行此操作：

PS D:\WorkTest\piedpiper\src> dotnet sln add piedpiper.website/piedpiper.website.csproj

PS D:\WorkTest\piedpiper\src> dotnet sln add piedpiper.domain/piedpiper.domain.csproj

PS D:\WorkTest\piedpiper\src> dotnet sln add piedpiper.tests/piedpiper.tests.csproj

注意：如果您使用的是基於Linux / Unix的shell，您可以使用globbing模式在單個命令中執行此操作！

dotnet sln add **/*.csproj

現在，當我們呼叫list我們的解決方案檔案時，我們應該得到以下輸出：

S D:\WorkTest\piedpiper\src> dotnet sln list

專案引用

----

piedpiper.website\piedpiper.website.csproj

piedpiper.domain\piedpiper.domain.csproj

piedpiper.tests\piedpiper.tests.csproj

任務3：向專案新增專案引用

接下來，我們要開始向我們的專案新增專案引用，通過dotnet add reference命令將我們的域庫連結到我們的網站和單元測試庫：

PS D:\WorkTest\piedpiper\src> dotnet add piedpiper.tests reference piedpiper.domain/piedpiper.domain.csproj

已將引用“..\piedpiper.domain\piedpiper.domain.csproj”新增到專案。

現在，如果要檢視測試專案的內容，我們將看到我們的domain 已被引用：

PS D:\WorkTest\piedpiper\src> cd .\piedpiper.tests\

PS D:\WorkTest\piedpiper\src\piedpiper.tests> cat .\piedpiper.tests.csproj

<Project Sdk="Microsoft.NET.Sdk">

<PropertyGroup>

<TargetFramework>netcoreapp2.0</TargetFramework>

<IsPackable>false</IsPackable>

</PropertyGroup>

<ItemGroup>

<PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.3.0-preview-20170628-02" />

<PackageReference Include="xunit" Version="2.2.0" />

<PackageReference Include="xunit.runner.visualstudio" Version="2.2.0" />

</ItemGroup>

<ItemGroup>

<ProjectReference Include="..\piedpiper.domain\piedpiper.domain.csproj" />

</ItemGroup>

</Project>

接下來，我們將為我們的網站專案做同樣的事情，所以讓我們去我們的網站資料夾並執行相同的命令：

dotnet add piedpiper.website reference piedpiper.domain/piedpiper.domain.csproj

如果我們返回到我們的根原始檔夾並執行build命令，我們應該看到所有的構建成功：

PS D:\WorkTest\piedpiper\src> dotnet build

用於 .NET Core 的 Microsoft (R) 生成引擎版本 15.3.409.57025

版權所有(C) Microsoft Corporation。保留所有權利。

piedpiper.domain -> D:\WorkTest\piedpiper\src\piedpiper.domain\bin\Debug\netstandard2.0\piedpiper.domain.dll

piedpiper.tests -> D:\WorkTest\piedpiper\src\piedpiper.tests\bin\Debug\netcoreapp2.0\piedpiper.tests.dll

piedpiper.website -> D:\WorkTest\piedpiper\src\piedpiper.website\bin\Debug\netcoreapp2.0\piedpiper.website.dll

已成功生成。

0 個警告

0 個錯誤

任務4：將NuGet包新增到專案或更新它

假設我們要將NuGet包新增到我們的一個專案中，我們可以使用該add package命令來執行此操作。

首先導航到要新增NuGet軟體包的專案：

PS D:\WorkTest\piedpiper\src> cd .\piedpiper.tests\

PS D:\WorkTest\piedpiper\src\piedpiper.tests> dotnet add package shouldly

Writing C:\Users\dell\AppData\Local\Temp\tmp68E4.tmp

info : Adding PackageReference for package 'shouldly' into project 'D:\WorkTest\piedpiper\src\piedpiper.tests\piedpiper.tests.csproj'.

log : Restoring packages for D:\WorkTest\piedpiper\src\piedpiper.tests\piedpiper.tests.csproj...

info : GET https://api.nuget.org/v3-flatcontainer/shouldly/index.json

info : OK https://api.nuget.org/v3-flatcontainer/shouldly/index.json 512ms

info : GET https://api.nuget.org/v3-flatcontainer/shouldly/2.8.3/shouldly.2.8.3.nupkg

info : OK https://api.nuget.org/v3-flatcontainer/shouldly/2.8.3/shouldly.2.8.3.nupkg 84ms

log : Installing Shouldly 2.8.3.

info : Package 'shouldly' is compatible with all the specified frameworks in project 'D:\WorkTest\piedpiper\src\piedpiper.tests\piedpiper.tests.csproj'.

info : PackageReference for package 'shouldly' version '2.8.3' added to file 'D:\WorkTest\piedpiper\src\piedpiper.tests\piedpiper.tests.csproj'.

或者，我們可以使用版本引數指定要安裝的版本：

dotnet add package shouldly -v 2.8.3

更新NuGet包

將NuGet軟體包更新到最新版本也是一樣簡單，只需使用相同的命令而不使用版本引數：

dotnet add package shouldly

你也可以下載word 文件 http://url.cn/5e3NT3G

相關文章