使用VS Code開發asp.net core (上)

時間 2019-11-10

標籤使用 code 開發 asp.net asp core 欄目 ASP 简体版

原文原文鏈接

本文是基於Windows10的.css

下載地址: https://code.visualstudio.com/html

insider 版下載地址: https://code.visualstudio.com/insiders/git

這兩個版本能夠同時安裝在系統中.shell

安裝過程就不介紹了.json

Visual Studio Code簡介

1.能夠點擊圖標打開vscodebootstrap

2.若是安裝的時候勾選了註冊到Path, 那麼能夠在命令行輸入code來打開vscode.瀏覽器

Git集成

使用git隨便clone一個項目下來, 而後用vscode打開項目, 隨便打開某個文件, 添加幾行代碼:bash

9-11行是我新添加的, 左邊綠色的豎條(點擊就會看到明細)就表示這幾行是新添加的.mvc

而後修改一下h1的標題:app

修改的地方左邊會出現藍色的豎條(點擊就會看到明細). 表示這行發生了變化.

此次再刪除兩行代碼:

左邊會出現一個紅色的箭頭, 鼠標能夠放在這個箭頭上, 而後點擊一下查看明細, 就能夠看到刪除的代碼行:

點擊vscode左邊的Source Control按鈕:

按鈕圖標上的1表示有一個文件有變化. 文件上還有undo, stage按鈕. 點擊文件後能夠看到文件變化先後的對比明細.

左側上方還有不少功能菜單就不一一介紹了.

配置VSCode

打開File-Preferences-Settings:

左邊的是VSCode默認的設置, 若是想要修改某些設置, 就把他們複製到右側窗口, 保存後會當即生效.

在上圖中, 我設置了終端命令行爲採用外部的命令行程序, 而且使用git的bash做爲命令行程序. 保存後會當即生效, 無需重啓VSCode.

注意右側文件上方, 目前修改的是User Settings. 也就是當前登陸用戶的配置.

若是隻想針對某個項目(文件夾)進行設置的話, 那麼能夠點擊Workspace Settings. 這時候, 該目錄會自動生成一個文件: vscode/settings.json, 全部修改的設置都會保存在這個文件裏面.

除了Settings, 還能夠配置快捷鍵, 點擊Preferences-Keyboard Shortcuts (Ctrl+K, S):

打開後點擊文件上方的keybindings.json:

也會出現相似的配置畫面.

左邊的菜單, 若是不須要的話也能夠隱藏起來, 鼠標右鍵點擊Hide便可:

顯示全部命令: Ctrl+Shift+P

搜索並打開文件: Ctrl+P. 隨着輸入就會自動過濾文件.

安裝擴展:

點擊Extensions按鈕圖標, 進入擴展頁面.

可使用各類排序方法展現擴展, 而後點擊擴展, 安裝而後點擊reload重啓vscode便可.

這裏咱們必需要安裝C#擴展.

去掉過濾條件, 就能夠看到安裝好的擴展了:

創建Asp.Net Core項目

安裝asp.net core環境:

打開網站 https://www.microsoft.com/net, 點擊download.

而後選擇下載.net core.

下載後安裝便可. 若是你已經安裝vs2017, 可能就不須要再安裝這個了.

打開命令行: 輸入dotnet --version檢查安裝.

安裝成功, 版本爲2.1.4

創建asp.net core 項目

用命令行找個地方, 創建目錄, 而後執行一下dotnet new --help命令, 查看一下建項目的幫助:

那我創建一個不帶用戶驗證的mvc項目:

dotnet new mvc --auth None

命令行輸入 code . 就會用vscode打開該目錄:

這些就是生成文件.

打開後, vscode會自動安裝C#依賴.

若是VSCode上方有任何選擇提示, 請選擇Yes或者Restore.

試一下項目是否正確:

打開命令行: Ctrl+Shift+C或者在VSCode內打開命令行: Ctrl+Shift+`

內置的默認命令行是Powershell, 我不是很喜歡它的速度, 因此能夠經過以前講的修改settings的方法把它改爲Commmand Prompt.

執行命令dotnet run:

運行成功, 打開瀏覽器, 能夠看到項目的畫面:

使用VSCode開發asp.net core項目

代碼導航.

使用F12來導航代碼, 這個和vs是同樣的.

打開Program.cs 鼠標選中22行左右的StartUp這個單詞, 而後按F12. 就會導航到Startup這個類.

點擊類或方法上面的Reference, 能夠查看對其的引用:

可使用Alt+左右方向鍵, 來導航的前一個或者下一個動做畫面.

按住Shift+F12能夠看到它的全部的引用:

實際上點擊鼠標右鍵, 都會有相應的菜單:

另外一個重要的導航方法就是使用Ctrl+P, 經過文件名來查找文件:

添加文件

可使用這個圖標按鈕來添加文件, 也可使用菜單, 或者鼠標右鍵, 這個就不詳細講了.

這裏添加一個TestController.cs:

打開該文件, 開始編寫代碼:

剛剛輸入了names, 而後出現了兩個貌似同樣的提示...其實他們是不同的, 第一個表示的是C#關鍵字namespace. 第二個表示的是namespace代碼片斷.

因此選中第二個, 再輸入命名空間的名字, 就會出現這段代碼:

創建TestController, 繼承於Controller:

這時候Controller並無被識別出來. 固然能夠點擊左邊黃色的圖標, 來選擇引用.

可是咱們可使用快捷鍵Ctrl+. 來進行Quick Fix快速修復, 選擇引用:

代碼段 Snippets

打開User Snippets菜單:

選擇C#:

而後把裏面註釋的文字留下, 複製其中那段代碼並修改稱本身的代碼段:

    "Create Controller": {
        "prefix": "con",
        "body": [
            "public class $1Controller: Controller",
            "{",
            "\t$0",
            "}"
        ],
        "description": "Create a Controller"
    }

這個代碼段的名字叫Create Controller, 輸入con後將會調用該代碼段, 代碼段中$1的位置須要用戶輸入Controller的名字, 輸入完成後按Tab光標將會留在$0的位置.

您能夠試一下, 確定是好用的.

可是這樣輸入的時候會稍顯不友好, 由於沒有提示, 那麼能夠將用戶輸入的部分改爲這樣:

        "Create Controller": {
        "prefix": "con",
        "body": [
            "public class ${1: ControllerName}Controller: Controller",
            "{",
            "\t$0",
            "}"
        ],
        "description": "Create a controller"
    }

而後試試:

這樣就好多了.

這個在代碼段輸入的變量也能夠被引用:

    "Create Controller": {
        "prefix": "con",
        "body": [
            "public class ${1: ControllerName}Controller: Controller",
            "{",
            "\t// 創建了${1: ControllerName}Controller",
            "\t$0",
            "}"
        ],
        "description": "Create a controller"
    }

再試試:

而後再創建一個Action的代碼段:

    "Create Action": {
        "prefix": "act",
        "body": [
            "public IActionResult ${1: ActionName}()",
            "{",
            "\t// 創建了${1: ActionName} Action Method",
            "\t$0",
            "\treturn View();",
            "}"
        ],
        "description": "Create a controller"
    }

安裝snippet擴展.

去vscode擴展畫面能夠搜索snippet關鍵字就能夠看到各類snippet擴展:

Html Zen coding:

zen coding是一種編寫html和css的方法, 很快捷.

打開Views/Home/About.cshtml, 而後在空白處輸入div而後按Tab:

隨後完整的div標籤就出來了:

zen coding容許你使用css選擇器進行更復雜的結構化寫法, 例如輸入 div>p>ul>li:

而後當即按Tab, 就會出現下列代碼:

若是想重複5個li, 那麼輸入 div>p>ul>li*5:

若是想加上class屬性, div>p>ul.list-group>li.list-group-item*5:

一個創建bootstrap form的例子,

form>(.form-group>label+input.form-control)*4+.form-group>input[type=submit].form-control

就會生成下面的form:

其中+表示下一個元素中括號能夠寫其餘屬性.

添加移除asp.net core項目引用.

能夠經過編輯.csproj文件來添加或者移除項目引用.

注意這裏並無智能提示, 最好是在Nuget網站搜索好相關包以後填寫進來.

編輯結束以後, vscode會提示進行restore, 這就至關於在命令行執行dotnet restore命令.

此外, 也能夠經過命令行來添加nuget包, 使用dotnet add package xxx命令來添加nuget包:

這時, csproj文件裏就會出現AutoMapper的PackageReference:

Build項目

使用命令dotnet build來進行此操做.

運行項目使用dotnet run.

項目中.vscode目錄下有個tasks.json文件, 打開它:

這裏有一個task叫作build, 命令是dotnet, 參數是build和項目文件.

若是執行VSCode命令Ctrl+Shift+B, 選擇build就會執行此命令:

還有一個launch.json和它也差很少, 一會再說.

Debugging

看一下Debugging畫面:

下來選單裏面兩個配置就來自launch.json.

點擊綠色箭頭就能夠debugging (F5也行). 固然也能夠start without debugging (Ctrl+F5), 這時瀏覽器會自動打開主頁:

打開HomeController.cs設置一個斷點:

按F5開始並debug項目, 點擊About菜單:

能夠看到命中了斷點, 打開Debug畫面, 裏面有豐富的信息.

能夠添加watch:

一樣也能夠在RazorView裏面設置斷點.

經過這些能夠看到vscode的debug體驗很好, 沒必要任何一款IDE差多少. 因此vscode毫不是一個高級編輯器這麼簡單.

Build Watcher .

還有另一種方式能夠, 它容許對項目持續的Build.

首先打開csproj文件, 添加一個watcher tool:

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

  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="AutoMapper" Version="6.2.2" />
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.5" />
  </ItemGroup>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.2" />
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
  </ItemGroup>  

</Project>

它就是一個nuget包.

而後執行 dotnet restore.

它的用法就是在dotnet xxx命令之間加上watch, 例如 dotnet watch run.

隨後我更改一下HomeController About方法裏面的Message:

能夠看到項目被中止, 從新Build, 而後又開始了: