本文是基于 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 的运行.
剩下有一半内容, 过一两天再写.
来源: https://www.cnblogs.com/cgzl/p/8450179.html