本文是基於Windows10的.

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

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

這兩個版本可以同時安裝在系統中.

安裝過程就不介紹了.

Visual Studio Code簡介

1.可以點擊圖標打開vscode

2.如果安裝的時候勾選了註冊到Path, 那麽可以在命令行輸入code來打開vscode.

Git集成

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

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

然後修改一下h1的標題:

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

這次再刪除兩行代碼:

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

點擊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, 然後又開始了:

dotnet watch run配合Debugging.

看一下Debug裏面的.net core Attach啟動項:

點擊綠色箭頭後出現如下選項:

我們的dotnet watch run正在運行, 這時候我還想進行debug, 那麽就可以選擇dotnet exec這個選項, 它會執行dotnet watch run實時build出來的dll. 這兩個動作是在不同的進程執行的.

設置斷點試試:

很好.

如果不想debug了, 點擊紅色插頭即可停止, 並且不影響dotnet watch run的運行.

剩下有一半內容, 過一兩天再寫.

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