【實驗手冊】使用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

相關文章