使用VS Code开发asp.net core
本文是基于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光标将会留在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的运行.
Debugging javascript
打开wwwroot/js/site.js, 写一段简单的js代码:
(function ($) {
$(document).ready(function () {
$('#myButton').on('click', function() {
alert('Hello world!');
});
});
})(jQuery);
可以设置断点, 但是由于整个项目是用于服务器端的. 而js文件是用于客户端开发的, 我们需要一种方法来调试js文件.
这里我们就需要安装一个扩展: Chrome Debugger.
然后打开launch.json, 可以直接打开文件, 也可以如下图方式打开:
点击右下角的Add Configuration:
修改配置的端口和目录:
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}/wwwroot"
},
在About.cshtml里面添加一个button:
<button id="myButton" class="btn btn-default">My Button</button>
在Debugger中运行Launch Chome:
运行后, 弹出浏览器, 但是页面无法显示:
这是因为Chrome Debugger仅仅运行客户端的代码. 而服务器段的代码买有运行.
所以还需要在另外的命令行执行dotnet run命令.
然后再次运行Chrome Launch. 这次运行成功了
点击About页面的My Button, 断点并没有响应. 切换到代码页面:
可以看到断点被灰掉了, 这是因为debugger并未找到这段代码.
这是因为dotnet run运行的是Production环境:
而看下代码_Layout.cshtml:
程序只有在Development环境下才会包含site.js.
这时可以打开bundleconfig.json, 把sourceMap属性设置成true. 并且安装这个包:
dotnet add package BuildBundlerMinifier
执行dotnet clean 和 dotnet build
这是一种办法, 但是我更想直接调试site.js, 所以可以在命令行设置一下临时的环境变量:
set ASPNETCORE_ENVIRONMENT=Development
然后执行dotnet run.
这时刷新后再点击按钮, 就可以触发断点了:
除此之外还可以使用浏览器自带的debugger.
Debug Typescript
在wwwroot/js里面添加test.ts:
class Test {
constructor(private msg: string) {
}
show() {
alert(this.msg);
}
}
然后需要为项目配置一下Typescript:
建立一个tsconfig.json文件:
1234567891011 |
{ "compileOnSave": true, "compilerOptions": { "target": "es5", "sourceMap": true, "module": "commonjs" }, "include": [ "wwwroot/js/*.ts" ]} |
---|
这时候, ts文件还不能编译, 因为typescript还没有被安装. 也就是说tsc命令还不能用.
所以需要安装typescript:
npm install typescript -g
这时在项目目录执行tsc命令就可以生成js文件了:
但是, 如果更改了test.ts文件, 保存后. 并没有生成新的js文件. 这是因为在保存的时候vscode不知道应该做什么.
可以在项目build之前进行tsc这个命令, 所以修改csproj文件, 添加如下代码:
<Target Name="PrecompileScript" BeforeTargets="BeforeBuild">
<Exec Command="tsc" />
</Target>
然后执行dotnet build, 就可以看到生成了新的test.js文件.
操作数据库
针对sqlite, 没有太好的办法, 到官方网站下载工具, 使用命令行sqlite3.
针对sqlserver, 需要安装一个mssql扩展:
我本机有一个localdb实例的数据库.
在项目建立一个test.sql文件, 打开文件后会自动安装sql tools service:
选择连接字符串, MSSQL Connect:
因为现在还没有建立任何连接字符串, 所以这时它会让你建立一个:
首先输入Server Name:
然后输入数据库名:
选择登陆方式, 我选择integrated:
最后输入这个档案的名字: SalesDB
确定后, VSCode就会开始尝试连接该数据库, 成功后会有提示:
vscode右下角状态栏也会有显示:
这时再写sql语句就会有智能提示:
然后执行这个sql语句: 可以先看看有哪些命令:
Ctrl+Shift+E是执行sql语句的命令. 执行后的结果如图:
上面所配置的Sql连接字符串实际上是保存在了UserSettings里面:
对于mysql和postgresql等, 需要安装vscode-database这个扩展. 这里就先不介绍了.
关于扩展
创建新文件: Advanced New File 扩展
搜索并安装advanced new file扩展, 这两个哪个都行. 我安装的是带横线的那个:
通过Command Palette可以看到创建新文件的快捷键是Ctrl+Alt+N.
然后选择相对的路径:
选择后输入文件名即可, 这时可以带着目录结构:
如果目录结构中的目录不存在, 那么它也会自动被创建. 点击Enter就会创建新文件个所需的目录.
ESLint扩展
首先安装ESLint:
如果你没有安装eslint库的话还需要通过npm来进行全局安装:
npm install -g eslint
然后需要添加一个eslint的配置文件, 选择Create .eslintrc.json文件:
生成的文件如下:
这时就可以看到eslint扩展起作用了:
具体ESLint的内容, 请查看官方文档.
TSLint扩展
安装tslint扩展:
通过npm安装tslint:
npm install -g tslint
然后看一下tslint有哪些命令:
选择创建tslint.json文件:
找一个ts文件试一下:
tslint也起作用了.
Bower扩展
安装Bower扩展
安装好后, 在Command Palette中输入并选择Bower命令会出下如下选项:
如果你使用bower, 那么这里的命令你应该比较熟悉.
这里比较有用的一个命令是Bower Search and Install. 选择后, 搜索一个包例如 underscore:
然后选择Install as Dependency:
安装后, 该包会出现在bower.json文件中.
XML格式化扩展
vscode在不安装扩展的情况下xml文件是无法被自动格式化的.
可以安装扩展Xml Tools:
安装后, 查看它都有哪些命令:
这时, 如果想格式化xml文件, 直接使用vscode默认的格式化文件命令(Shift+Alt+F)即可, 它会按照项目的配置进行格式化.
其他类型的文件如果需要格式化, 可以在扩展市场搜索安装, 自行研究一下即可.
Rest Client扩展
安装Rest Client扩展:
然后创建一个文件, 例如叫 httptest, 之后选择该文件的language mode:
然后选择Http:
然后在文件中写一个http的地址:
写完http地址后, 在地址的上方会出现一个链接: Send Request, 点击这个链接, 就会发送请求, 请求响应后, 在右侧可以看到返回的结果:
在这里还可以添加请求的各种参数:
请求的结果可以保存到文件:
同样这里可以发送 POST, PUT, DELETE等请求.
VSCode的扩展太多了, 可以选择Poppular Extensions或者Recommend Extensions去安装并研究一下.
这个文章就写这些了, 谢谢
- R语言 判别分析
- Apache、struts1、struts2文件上传下载的3种方式
- 解析实时的DB time过程分析(r6笔记第35天)
- sql嵌入html格式显示报表(r6笔记第34天)
- hive计算日期差函数datediff,hive修改日期连接符
- 深度学习界的 “吃鸡挂”——目标检测 SSD 实验
- Hadoop查看所有JOB以及如何Kill指定用户的所有Job
- Java基础-23(01)总结多线程,线程实现Runnable接口,线程名字获取和设置,线程控制,线程安全,同步线程
- ORA-01427问题的分析和解决(r6笔记第51天)
- 从编程实现角度学习 Faster R-CNN(附极简实现)
- Java基础-23(02)总结多线程,线程实现Runnable接口,线程名字获取和设置,线程控制,线程安全,同步线程
- 8 个最好的 Java RESTful 框架
- 【C++基础】C++11 lambda 表达式解析
- 大量redo生成的问题原因及改进(r6笔记第50天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法