When editing HTML files in Visual Studio Code I have always been driven away by the weird auto-indentation when typing out closing tags. Since I am used to writing opening and closing tags before adding any further child elements, I have refrained from using VS Code for this purpose.
In the latest versions there seems to be certain improvement, though it still isn’t perfect. Therefore I decided to dig into the topic a little more and believe I found a solution to satisfy one’s needs. We shall achieve this by adding a simple line of JSON into user settings within Visual Studio.
We’ll start off by launching a new instance of Visual Studio and opening an HTML file. When adding some content as described above, we end up with something like this.
You can clearly see that the body tag is indented to the right when it shouldn’t be. Though this might be a thing of personal preference I wanted to help those, who are feeling the same as me.
The workaround here is rather simple. Just bring up Command Palette using the Control + P (on Windows) or Command + P (on macOS) key combo and search for “user settings”. Another approach is to hit Control + , (on Windows) or Command + , (on macOS). This will open two JSON files. The one on the right will be empty. Here we will set the editor.formatOnSave setting to true. So make your file look like this.
Now you can go back to your HTML file and hit save. VS Code will automatically format the file as to your desire.
In connection with the last article regarding the basic concepts of working with ASP.NET Core MVC, I came up with a little tweak to speed up your development by at least a small margin. To make things clear enough I won’t go into much technical detail.
Consider the situation in which we were last time. We successfully created a new project and went ahead to open it in Visual Studio Code. What we did and always can do is to launch a new instance of Code and open the project folder by navigating to it in the Finder dialog window. While this approach works, I will show you a quicker way to do it.
Essentially, all that is needed to be done is to invoke a command that will do all the work for us.
Launch Visual Studio
Press Command + Shift + P, which will bring up the Command Palette.
You should be presented with two results, one of them being “Shell Command: Install “code” command in PATH”. Click on this option and wait until the operation has completed. This usually takes no more that a second.
All is now setup. Let’s head to the usage!
So far, all seems a little easy, doesn’t it? Well…this part will be of no exception. Simply navigate to your project folder in a Terminal window and enter
code. . This will instantly open a new Visual Studio Code instance with the project loaded. No further hassle.
This tweak helped me and I hope it will make your workflow a bit snappier, as well.
For this article I decided that it would be appropriate to show off the process of installing and creating an ASP.NET Core MVC project on macOS. Also I will explain what you have to do differently when creating a web project instead of a console application.
Microsoft’s ASP.NET Core website explains the installation part thoroughly. Nevertheless, here I prepared a short summary of what you have to perform prior to running the project.
Install Homebrew (if not already present on your machine)
mkdir <dirName> – creates a new directory with a name of <dirName>
cd <dirName> – mounts the <dirName> directory
Now since this article is about ASP.NET Core MVC you shall not follow the whole third step, because it advises to use
dotnet new. This would, by default, create a .NET Core Hello World console application and it’s respective project structure. Instead, enter
dotnet new-tweb into the Terminal window.
After the command is executed you may proceed to step 4 (
dotnet restore — which will restore NuGet packages for the project and ensure that installed packages and it’s versions comply to those of the project.json file int the root folder — and
dotnet run which will start serving the project under http://localhost:5000).
Testing YOUR Project
If you now navigate to the above-mentioned localhost URL in your browser, you are presented with a default ASP.NET page known for many years as part of ASP.NET MVC.
Working with the project
At this point you can edit each file of your project as you like. When the page gets refreshed, all changes will be applied instantly — without the need to run
dotnet run in your Terminal window — and seen in your browser window.
I myself have struggled to create web application instead of a console application when it came to .NET Core CLI. Now I hope the process has been properly explained. However, if you ever get lost, feel free to use the
dotnet--help command. From there you will sure get to the bottom of your problem.