本文是基於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的執行.
剩下有一半內容, 過一兩天再寫.