Developing ASP. NET core using vs code (top)

This article is based on the WINDOWS10.

: https://code.visualstudio.com/

Version Insider: https://code.visualstudio.com/insiders/

These two versions can be installed in the system at the same time.

The installation process is not covered.

Introduction to Visual Studio code

1. Click on the icon to open Vscode

2. If you select Register to path when installing, you can open Vscode by typing code at the command line.

git integration

Use Git to clone a project, then open the project with Vscode, open a file, and add a few lines of code:

9-11 lines is my newly added, the left Green vertical bar (click to see the details) means that these lines are newly added.

Then modify the title of the H1:

A blue vertical bar appears on the left side of the change (click to see details). Indicates that the line has changed.

Delete Two more lines of code this time:

A red arrow will appear on the left, the mouse can be placed on the arrow, and then click to view the details, you can see the deleted line of code:

Click the Source Control button on the left of Vscode:

A 1 on the button icon indicates that a file has changed. There is also the undo, Stage button on the file. After clicking on the file, you can see the comparison details before and after the file changes.

On the left, there are a lot of function menus that are not introduced.

Configure Vscode

Open file-preferences-Settings:

On the left is the default settings for Vscode, and if you want to modify some settings, copy them to the right window, which will take effect immediately after saving.

In, I set the terminal command behavior to take external command-line programs, and use Git's bash as a command-line program. It will take effect immediately after saving without restarting the Vscode.

Notice that the user Settings is currently being modified above the right file. This is the configuration of the currently logged-on user.

If you want to set up only for an item (folder), then you can click Workspace Settings. At this time, the directory will automatically generate a file: Vscode/settings.json, all the modified settings will be saved in this file.

In addition to settings, you can also configure shortcut keys , click Preferences-keyboard Shortcuts (ctrl+k, S):

After opening, click Keybindings.json above the file:

A similar configuration screen will appear.

The menu on the left can be hidden if you don't need it, right click on hide to:

Show All commands : ctrl+shift+p

Search for and open files: ctrl+p. Files are automatically filtered as they are entered.

Install extensions :

Click the Extensions button icon to go to the Extensions page.

You can use a variety of sorting methods to show extensions, then click Extensions, install and then click Reload to restart Vscode.

Here we have to install the C # extension.

By removing the filter conditions, you can see the installed extensions:

Building an ASP. NET Core Project

Install the ASP. NET core Environment:

Open website https://www.microsoft.com/net, click Download.

Then select Download. NET Core.

Install after download. If you have installed vs2017, you may not need to install this again.

Open command line: Enter dotnet--version to check the installation.

The installation was successful and the version is 2.1.4

Building an ASP. NET Core Project

Use the command line to find a place, create a directory, and then execute the dotnet new--help command to see the Help for your project:

Then I'll build an MVC project without user authentication:

dotnet New MVC--auth None

command line enter code. You will open the directory with Vscode:

These are the generated files.

When turned on, Vscode will automatically install C # dependencies.

Select Yes or restore if there are any selection prompts above the Vscode.

Try the project correctly:

Open command line: ctrl+shift+c or open command line within Vscode: ctrl+shift+ '

The built-in default command line is PowerShell, I don't really like the speed of it, so I can change it to commmand Prompt by the previous settings method.

Execute command dotnet run:

Run successfully, open the browser, you can see the project screen:

Developing an ASP. NET Core project using Vscode

Code navigation.

Use F12 to navigate the code, which is the same as vs.

Open the Program.cs mouse to select the word "startup" around 22 lines, then press F12. You will navigate to the startup class.

Click the reference above the class or method to see a reference to it:

You can use ALT + left and RIGHT arrow keys to navigate the previous or next action screen.

Press and hold SHIFT+F12 to see all of its references:

In fact, the right mouse button, there will be a corresponding menu:

Another important navigation method is to use Ctrl+p to find files by file name:

Add File

You can use this icon button to add a file, you can also use the menu, or the right mouse button, this is not detailed.

Add a TestController.cs here:

Open the file and start writing code:

Just entered the names, and then there are two seemingly the same hint ... In fact they are not the same, the first expression is the C # keyword namespace. The second represents the namespace code fragment.

So select the second, then enter the name of the namespace, and this code will appear:

Build TestController, inherit from controller:

The controller was not identified at this time. Of course, you can click the yellow icon on the left to select a reference.

But we can use the shortcut key CTRL +. For quick fix fast fix, select references:

Code Snippet Snippets

Open the User Snippets menu:

Select C #:

Then leave the text inside the comment, copy the code and modify the code snippet:

    "Create Controller": {        "prefix": "con",        "Body": [            $ Controller:controller ",            " {",            " \T $"            ,"} "        ],         "description": "Create a Controller"    }

This code snippet name is called Create controller, the code snippet will be called after the input con, the code snippet in the location requires the user to enter the Controller's name, after the input is completed, pressing the TAB cursor will stay in the location.

You can try it, it must be good.

However, this type of input will be slightly unfriendly, because there is no prompt, then you can change the user input into this:

        "Create Controller": {        "prefix": "Con",        "Body": [            ${1:controllername} Controller:controller ",            " {",            " \t$0 ",            "} "        ],        "description": "Create a Controller"    }

Then try:

That's better.

This variable that is entered in the code snippet can also be referenced:

    "Create Controller": {        "prefix": "Con",        "Body": [            "public class ${1: Controllername}controller:controller ",            " {",            " \t//established ${1:controllername} Controller ",            " \t$0 ",            "} "        ],        " description ":" Create A Controller "    }

Try again:

Then create a code snippet for the action:

    "Create Action": {        "prefix": "act",        "Body": [            "Public iactionresult ${1: ActionName} () ",            " {            "," \t//established ${1:actionname} Action ",            " \t$0 " ,            " \treturn View (); " ,            "}"         ],        " Description ":" Create a Controller "    }

Install the snippet extension.

Go to the Vscode extension screen to search for snippet keywords to see various snippet extensions:

Html Zen Coding:

Zen Coding is a way to write HTML and CSS, quickly.

Open views/home/about.cshtml, then enter DIV in the blanks and press TAB:

Then the complete div tag comes out:

Zen Coding allows you to use CSS selectors for more complex structured notation, such as input div>p>ul>li:

Then press TAB immediately and the following code appears:

If you want to repeat 5 li, enter div>p>ul>li*5:

If you want to add the class attribute, Div>p>ul.list-group>li.list-group-item*5:

An example of creating a bootstrap form,

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

The following form will be generated:

where + means parentheses in the next element can write other properties.

Add the Remove ASP. NET Core Project reference.

You can add or remove project references by editing the. csproj file.

Note that there are no smart tips here, it is best to fill in the NuGet website after searching for the relevant package.

After the edit is finished, Vscode prompts for restore, which is equivalent to executing the dotnet restore command at the command line.

In addition, you can add nuget packages from the command line by using the dotnet Add package XXX command to add NuGet packages:

At this point, the csproj file will appear automapper packagereference:

Build Project

Use the command dotnet build to do this.

Run the project using dotnet run.

In the project. Vscode directory There is a Tasks.json file to open it:

Here is a task called build, the command is dotnet, the parameter is build and the project file.

If you execute the vscode command ctrl+shift+b, selecting Build will execute this command:

There is also a launch.json and it is similar, one will say.

Debugging

Take a look at the debugging screen:

Down the menu two configurations are from Launch.json.

Click on the green Arrow to Debugging (F5). Of course you can start without Debugging (CTRL+F5), then the browser will automatically open the homepage:

Open HomeController.cs to set a breakpoint:

Press F5 to start and debug the project, click on the About menu:

You can see the hit breakpoint, open the debug screen, there is a wealth of information.

You can add Watch:

You can also set breakpoints inside the Razorview.

With these you can see that the debug experience of the Vscode is good, without the need for any one of the IDE. So Vscode is never an advanced editor so simple.

Build Watcher.

There is another way to do this, which allows for a continuous build of the project.

First open the Csproj file and add a 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 >

It's a nuget package.

Then execute dotnet restore.

Its usage is to add watch between dotnet XXX commands, such as Dotnet watch run.

I then changed the message in the HomeController about method:

You can see that the project was stopped, re-build, and then started again:

dotnet Watch run with debugging.

Take a look at the. NET core attach startup item in debug:

After clicking on the green arrow, the following options appear:

Our dotnet watch run is running, and when I want to debug, I can choose dotnet Exec, which executes the DLL that dotnet watch run will build in real time. These two actions are performed in a different process.

To set a breakpoint try:

Very good.

If you do not want to debug, click the red plug to stop, and do not affect the operation of Dotnet watch run.

Half of what is left is written in a day or two.

Developing ASP. NET core using vs code (top)