Monday, November 27, 2023
HomeITLet's master the text editor "Visual Studio Code" that accelerates HTML development!

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.

Table of contents

  • What is Visual Studio Code (VS Code for short)
  • How to install VSCode
  • How to use VS Code
  • The best “extensions” for editing HTML
    • How to install the extension
    • Recommended extensions for HTML coding
      • HTML Snippets
      • IntelliSense for CSS class names in HTML
      • HTML Preview
  • summary

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

Image explaining how to use VS Code

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.

Extension installation image

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.

HTML Snippets

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.

IntelliSense for CSS class names in HTML

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.

HTML Preview

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.

Image after installing the extension


A brief introduction to Visual Studio Code.

  • A text editor provided by Microsoft, abbreviated as “VS Code”
  • By installing extensions, you can easily write HTML and CSS.

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


Leave a reply

Please enter your comment!
Please enter your name here

Recent Posts

Popular Posts

Most Popular

Recent Comments