Let’s master the text editor “Visual Studio Code” that accelerates HTML development!

There are many options for HTML development environments, from standard Notepad to IDEs (Integrated Development Environments).
This time, I will introduce the text editor “Visual Studio Code”, which has a lot of functions for developers.

What is Visual Studio Code (VS Code for short)

Visual Studio Code is a free text editor provided by Microsoft familiar with Windows and Office products, and has been established under the abbreviation “VS Code” .
Compared to conventional text editors such as Notepad, Sakura Editor, and Hidemaru, it has more functions for developers, so it can be used in a way similar to an IDE (Integrated Development Environment).
Therefore, it is an editor widely used by programming beginners to advanced users.

By using VS Code, you can easily develop HTML, CSS, and JavaScript.

How to install VSCode

Visual Studio Code can be downloaded from Microsoft’s official website.

You can access the above site and download the installer from “Download Now”.

After launching the installer, follow the instructions to complete the installation.

How to use VS Code

When you start VS Code, it is mainly divided into the following three areas.

・Activity bar
・Folder tree
・Editor

activity bar, icons are listed for each function, and by installing the extensions described later, the icons will increase as shown below.
By reading the folder, the file list inside isfile treeIt will be displayed in.
By selecting a file in the folder tree, the contents of that file areeditor, and you can edit the file.

The best “extensions” for editing HTML

You can edit HTML normally just by installing VS Code, but using “extensions” makes it even more convenient.
Extensions are provided for each programming language, so you can proceed with development conveniently by installing the extensions for the programming language you want to develop.

We will show you how to install extensions and recommended extensions.

How to install the extension

As an example, we will install useful extensions for HTML coding.
Click the “Extensions” icon in the activity bar and enter “HTML” in the search box at the top to display a list of extensions that support HTML development.
After that, press the “Install” button for the extension you want to install and you’re done.

Recommended extensions for HTML coding

I think there are many people who say, “I know it looks useful, but I don’t know which extension to install,”
so here are three extensions that I particularly recommend.
Please actually install it and check the usability.

HTML Snippets

An extension that supports HTML input.
It is a convenient extension that completes the tag input and automatically enters the closing tag.

You can also install from the link below.

IntelliSense for CSS class names in HTML

It completes linked CSS classes when you type CSS classes in your HTML.
This is especially useful when using long class names such as BEM.

You can also install from the link below.

HTML Preview

An extension that allows you to preview the HTML you are creating within VS Code.
By enabling this extension, you can check HTML without using a browser.

You can also install from the link below.

By installing the three extensions introduced, you can proceed with the creation of HTML conveniently as follows.

summary

A brief introduction to Visual Studio Code.

VS Code has many other useful features.
Find an extension that suits you and try using it.