Developing ASP. NET core using vs code (bottom)

The first part: https://www.cnblogs.com/cgzl/p/8450179.html

This article is based on the WINDOWS10.

debugging JavaScript

Open the Wwwroot/js/site.js and write a simple JS code:

(function (  $) {    $ (document). Ready (function  () {        $ (function () {            alert (' Hello world! ' );        });    });}) (jQuery);

Breakpoints can be set, but because the entire project is for the server side. And the JS file is used for client development, we need a way to debug the JS file.

Here we need to install an extension: Chrome Debugger.

Then open the Launch.json, you can open the file directly, you can open it as follows:

Click Add Configuration in the lower-right corner:

Modify the configured ports and directories:

"Configurations": [        {            "type": "Chrome",            "request": "Launch",            "name": " Launch Chrome ",            " url ":" http://localhost:",            " webRoot ":" ${ Workspacefolder}/wwwroot"        },

Add a button to the about.cshtml:

< button   ID = "MyButton" class = "Btn Btn-default" >my button</ Button >

Run launch Chome in debugger:

After running, the browser pops up, but the page cannot be displayed:

This is because Chrome debugger just runs the client's code. While the code for the server segment is bought and run.

So you also need to execute the dotnet Run command on a different command line.

Then run Chrome Launch again. This operation was successful.

Click on the My Button on the About page and the breakpoint is not responding. To switch to the code page:

You can see that the breakpoint is grayed out because debugger did not find the code.

This is because Dotnet run is running the production environment:

And look at the code _layout.cshtml:

The program will only contain site.js in the development environment.

You can then open Bundleconfig.json and set the Sourcemap property to True. and install this package:

dotnet Add Package Buildbundlerminifier

Perform dotnet clean and dotnet build

This is a way, but I would like to debug site.js directly, so you can set a temporary environment variable at the command line:

Set Aspnetcore_environment=development

Then execute dotnet run.

Then click the button to refresh and then trigger the breakpoint:

In addition, you can use the browser's own debugger.

Debug Typescript

Add test.ts inside the WWWROOT/JS:

class Test {    constructor (private msg:string) {    }    Show () {        alert (this. msg);    }} 

Then you need to configure the typescript for the project:

Create a Tsconfig.json file:

{    "Compileonsave": True,    "compileroptions": {        "target": "ES5",        "Sourcemap": True,        "module": " Commonjs "    },    " include ": [        " Wwwroot/js/*.ts "    ]}

At this point, the TS file is not yet compiled because typescript is not yet installed. That means the TSC command is not yet available.

So you need to install Typescript:

NPM Install Typescript-g

The JS file can be generated by executing the TSC command in the project directory:

However, if you change the Test.ts file, after you save it. The new JS file is not generated. This is because Vscode doesn't know what to do when it's saved.

The TSC command can be done before the project build, so modify the csproj file to add the following code:

  <Name= "Precompilescript"  beforetargets= "BeforeBuild"  >    <Command= "TSC"/>  </  Target>

Then execute the dotnet build and you will see that a new Test.js file is generated.

manipulating databases

For SQLite, there is no good way to download the tool to the official website, using the command line Sqlite3.

For SQL Server, you need to install an MSSQL extension:

I have a database of LocalDB instances on this machine.

When you create a Test.sql file in your project, the SQL Tools service is automatically installed after you open the file:

Select connection string, MSSQL connect:

Since there is no connection string yet, it will allow you to create a:

First enter the server Name:

Then enter the database name:

Choose login mode, I choose integrated:

Finally enter the name of this file: SalesDB

Once determined, Vscode will start trying to connect to the database and will be prompted after success:

The status bar in the lower right corner of the Vscode will also be displayed:

Then write the SQL statement with smart hints:

Then execute the SQL statement: You can first see what the commands are:

Ctrl+shift+e is the command that executes the SQL statement. Results after execution:

The SQL connection string configured above is actually stored in the usersettings:

For MySQL and PostgreSQL, you need to install the vscode-database extension. This is not the first introduction here.

About Extensions

Creating new files: Advanced new file extension

Search for and install the advanced new file extension, both of which are OK. I installed the one with the horizontal line:

With command palette, you can see that the shortcut key for creating a new file is ctrl+alt+n.

Then select the relative path:

Select to enter the file name, you can take the directory structure:

If a directory in the directory structure does not exist, it is also automatically created. Click Enter to create a new file for the desired directory.

Eslint extension

First install the Eslint:

If you do not have the Eslint library installed, you also need to use NPM for global installation:

NPM install-g Eslint

Then you need to add a eslint configuration file and select the Create. Eslintrc.json file:

The resulting files are as follows:

At this point, you can see that the eslint extension works:

For specific eslint, please check the official documentation.

Tslint extension

To install the Tslint extension:

Installing Tslint with NPM:

NPM install-g Tslint

Then take a look at what the Tslint commands:

Select Create Tslint.json file:

Find a TS file to try it out:

The Tslint also worked.

Bower Extension

Installing the Bower Extension

After the installation, enter and select the Bower command in Commands palette the following options:

If you use bower, you should be more familiar with the commands here.

One of the more useful commands here is Bower Search and Install. After selecting, search for a package such as underscore:

Then select Install as Dependency:

After installation, the package appears in the Bower.json file.

XML Formatting Extensions

Vscode XML files cannot be automatically formatted without an extension installed.

Extensible XML Tools can be installed:

After installation, see what commands it has:

At this point, if you want to format the XML file, you can directly use the Vscode default format File command (SHIFT+ALT+F), which will be formatted according to the configuration of the project.

Other types of files if you need to format, you can search the installation in the extended market, self-study can be.

Rest Client Extensions

To install the rest client extension:

Then create a file, for example called Httptest, and then select the file language mode:

Then select http:

Then write an HTTP address in the file:

After you finish writing the HTTP address, a link appears above the address: Send request, click on the link, it will be sent, the request response, on the right side can see the results returned:

You can also add various parameters to the request here:

The results of the request can be saved to a file:

It is also possible to send a POST, PUT, delete request.

Vscode extension too much, you can choose Poppular Extensions or recommend extensions to install and research.

That's what this article says, thank you.

Developing ASP. NET core using vs code (bottom)