🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【Recommended Extensions】10 Popular Extensions to Boost Your VSCode Productivity

Hello! I'm someone who went from zero programming knowledge to launching a website by self-studying with the help of AI. I was a complete beginner, just like you.

Have you just installed VSCode (Visual Studio Code) and thought, "Alright, I'm going to start coding!" but then found yourself stuck, not knowing what to do next? Or are you wondering, "How can I code more efficiently?"

I know that feeling all too well. I was the same at the beginning. Staring at a blank screen, I was completely lost. But the true power of VSCode is unlocked by adding "extensions". By installing them, your development efficiency will dramatically improve, and coding will become many times more enjoyable.

In this article, I've carefully selected just 10 truly useful extensions that made me think, "I can't work without these!" while I was building my website. There's nothing complicated here. Just follow along and copy-paste, and your VSCode will transform into the ultimate development tool. Let's experience things "just working" together and enjoy the thrill of skyrocketing productivity!

1. Japanese Language Pack for Visual Studio Code - Feel at Home with a Familiar UI

Screenshot of the VSCode UI localized in Japanese

Who this is for:

My Experience: Overcoming the Language Barrier

When I started programming, my first hurdle wasn't the technical jargon, but that "everything was in English." I could sort of understand `File`, `Edit`, `Selection`, but my brain would freeze when I tried to tackle complex settings. I was scared to click anything, fearing I'd break something. This extension was the first thing that eased my anxiety. Just having the menus in my native language significantly lowered the mental barrier, and I felt like I could "become friends with VSCode."

Basic Usage

  1. Click the square icon (Extensions view) on the left side of VSCode.
  2. In the search bar, type "Japanese Language Pack".
  3. Click the "Install" button for the extension that appears at the top.
  4. After installation, click the "Change Language and Restart" button that appears in the bottom right to restart VSCode.

That's it! The VSCode UI will now switch to Japanese. Simple, right? Start here to get comfortable with VSCode.

2. Live Server - The Magical Experience of Seeing Your Code Run Instantly

Who this is for:

My Experience: Freedom from Mashing the F5 Key

When I first started learning HTML, I'd change a single heading, save the file with Ctrl+S, switch to the browser, and hit F5 to refresh. This tedious cycle was driving me crazy. When I asked an AI, "Isn't there an easier way?", the first recommendation was Live Server. The moment I saved my code and saw the browser next to me instantly refresh, I seriously thought, "This is magic!" This "it just works" experience supercharged my motivation to learn programming.

【Try it with Copy & Paste】Get a Taste of the Magic

First, create a new file in VSCode and save it as index.html. Then, copy and paste the code below. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Server Test</title>
    <style>
        body {
            display: grid;
            place-content: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: #2d2d2d;
            color: #ffffff;
        }
        h1 {
            color: #669df6;
            font-size: 3rem;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

After pasting the code, right-click in the editor and select "Open with Live Server," or click the "Go Live" button in the bottom-right corner of the screen. Your browser should open automatically, displaying "Hello, World!".

Next, go back to VSCode, change the text inside the <h1> tag to something like "Live Server is Awesome!", and save the file (Ctrl+S). The display in your browser should change instantly without you having to switch to it. That's the power of Live Server!

A Point to Note

Live Server works when you have an HTML file open. Note that it cannot run server-side programs like PHP.

3. Prettier - Code formatter - For Beautiful Code, No Matter Who Writes It

Who this is for:

My Experience: Wasting Energy on Code "Appearance"

When I started coding, my indentation was messy, I'd forget semicolons ;, and my code was just plain ugly and hard to read later. I'd see other people's clean code and feel discouraged, wondering, "How can they write so neatly?" Prettier was like a cosmetic surgeon that saved me. The way it transforms messy code into something beautiful in an instant upon saving is truly spectacular. I was freed from the stress of worrying about my code's appearance and could finally focus on the logic.

【Try it with Copy & Paste】The Thrill of Instantly Clean Code

First, install Prettier. Next, open VSCode settings (Ctrl + ,), search for "Format On Save", and check the box. This will make it format automatically every time you save a file.

Now, let's give it a try. Create a new file named script.js and paste the following intentionally messy code. 

function  hello( name  ) {
console.log('Hello, '   + name + '!')
        }
hello( "World" )

Now, save the file (Ctrl+S). It should instantly be formatted into the clean code below. 

function hello(name) {
  console.log("Hello, " + name + "!");
}
hello("World");

Prettier takes care of all the minor rules like indentation, spacing, and semicolons. You no longer have to worry about the appearance of your code.

4. Auto Rename Tag - Say Goodbye to Mismatched Tags

Who this is for:

My Experience: The Journey to Find a Closing Tag

As my website structure got more complex, finding a closing tag dozens of lines down became a real chore. "Where on earth is the closing tag for this <div>?" I'd scroll and scroll, only to find it was the wrong one. I almost cried when I changed an <h2> to an <h3>, forgot the closing tag, and watched my entire layout collapse. Auto Rename Tag is the perfect partner that prevents these simple but critical mistakes.

【Try it with Copy & Paste】Automatic Paired Editing

This extension works right after installation. No special setup is needed. Open a file like index.html and try the following code. 

<div>
    <p>There is a lot of content here.</p>
    <p>There is a lot of content here.</p>
    <p>There is a lot of content here.</p>
</div>

After pasting the code, place your cursor on the opening <div> tag and rename "div" to "section". You'll see the closing </div> tag, located far away, automatically change to </section>. This small automation greatly reduces development stress.

5. HTML CSS Support - Prevent CSS Class Name Typos

Who this is for:

My Experience: "Why isn't my CSS working?" The Culprit Was Always a Typo.

I'd create a cool, long class name like .main-contents-wrapper in style.css, but when I went to use it in index.html, my memory would instantly fail. "Was it contents or content? Where did the hyphen go?" I'd end up having to go back and check the CSS file, and I was sick of this back-and-forth. 90% of the time my CSS didn't apply, it was because of a class name typo. HTML CSS Support suggests candidates from your CSS file as you start typing a class name in HTML, so you no longer need to memorize or double-check them.

【Try it with Copy & Paste】Accurate Class Name Completion

First, create two files in your project folder: index.html and style.css.

In style.css, copy and paste the following code. 

.container {
    width: 80%;
    margin: 0 auto;
}

.title-text {
    color: #669df6;
    font-size: 24px;
    border-bottom: 2px solid #5f6368;
}

.description-paragraph {
    line-height: 1.6;
}

Next, in index.html, paste the following code. At this point, the div tag doesn't have a class attribute yet. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Support Test</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="">
        <h1 class="">Test Title</h1>
        <p class="">This is a test paragraph.</p>
    </div>
</body>
</html>

Now, let's try it. Place your cursor between the double quotes of <div class=""> and press Ctrl + Space (or just start typing a letter like c or t). You should see suggestions like .container, .title-text, and .description-paragraph appear. You'll never mistype a class name again.

6. Path Intellisense - Freedom from the Nightmare of File Paths

Who this is for:

My Experience: The Hell of Broken Images

"Okay, let's add an image to the site!" I'd think, write <img src="">, and then the nightmare would begin. Inside the src attribute, I'd wonder, is it "./images/hero.png", "../images/hero.png", or "/images/hero.png"? I'd try one after another, check the browser, see the broken image icon, and sigh. This extension intelligently predicts and autocompletes folder and file names as you type within the quotes. The time I wasted on path errors went to zero.

【Try it with Copy & Paste】Foolproof Path Entry

This extension also works right after installation. Try creating the following folder structure in your project. 

my-project/
├── index.html
├── css/
│   └── style.css
└── images/
    └── logo.png

Open the index.html file and paste the following code. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Path Test</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <img src="" alt="Logo Image">
</body>
</html>

First, place your cursor inside the href="" of the <link> tag and type "c". The suggestion "css/" should immediately appear. Select it and type /, and now "style.css" will be suggested.

Next, do the same inside the src="" of the <img> tag. Typing "i" will suggest "images/", allowing you to enter the correct path easily.

7. indent-rainbow - Visualize Nested Code with a Rainbow

Who this is for:

My Experience: Getting Lost in Indentation

When writing HTML and CSS, code nesting tends to get deep. Indentation was my only guide, especially when I couldn't figure out where a closing tag should go. But when everything is the same color, it's incredibly difficult to tell which block is which. indent-rainbow adds color to your indents based on their depth, making the code's structure immediately obvious. Being able to visually confirm "this purple line corresponds to this block" helped me instantly notice closing tag mistakes and indentation errors.

【Try it with Copy & Paste】Colorful Indentation

This extension works right after installation. Try pasting the following complex HTML structure into VSCode. You'll see a world of difference between how it looks with and without indent-rainbow. 

<div class="container">
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Product A</a></li>
                        <li><a href="#">Product B</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <p>Content</p>
        </section>
    </main>
</div>

After installation, your editor's indentation area should be colored with red, yellow, blue, and purple, allowing you to intuitively understand which blocks are on the same level.

8. vscode-icons - Identify File Types at a Glance

Who this is for:

My Experience: The Minor Stress of Finding Files

As projects grow, the file list gets filled with similar-looking text: index.html, style.css, script.js, package.json, README.md... It was a small but constant stress to scan the list every time, thinking, "Where's that JavaScript file again?" After installing this extension, colorful and intuitive icons appeared next to the filenames. With specific icons like <> for HTML, # for CSS, and JS for JavaScript, I could instantly recognize file types by "color" and "shape," drastically reducing the time spent searching for files.

Basic Usage

  1. Install the extension.
  2. After installation, when a dialog appears, select "VSCode Icons" to activate the file icon theme.
  3. If the dialog doesn't appear, open the Command Palette with Ctrl + Shift + P, type "File Icon Theme," select it, and then choose VSCode Icons.

That's all it takes to transform the file icons in your sidebar explorer into something rich and easy to read. It's a lovely extension that makes daily development a little more fun.

9. Code Spell Checker - Eradicate Embarrassing Typos

Who this is for:

My Experience: A Bug Caused by... a Typo

As a non-native English speaker, I often made spelling mistakes in my variable names. For example, I once wrote "mesage" instead of "message" and spent over an hour wondering "why isn't this working...?" This extension, just like in Microsoft Word, highlights misspelled words with a blue squiggly line. That hour of agony would have been resolved in a second if I had installed this from the start. Especially when writing code that others will see or when working in a team, spelling mistakes can affect credibility, making this an essential extension.

【Try it with Copy & Paste】Instantly Spot Mistakes

English spell-checking is enabled just by installing it. Open a JavaScript file (like script.js) and paste the following code. 

// This is a functoin to display a mesage.
function showMesage(text) {
    const defaultMessage = "Hellow World!"; // "Hellow" is a typo.
    console.log(text || defaultMessage);
}

// Caling the functoin.
showMesage("Correct spelling is important.");

When you paste the code, you should immediately see blue squiggly lines under misspelled words like functoin, mesage, Hellow, and Caling. Hovering over the squiggly line will even suggest the correct spelling. Say goodbye to embarrassing mistakes!

10. GitLens — Git supercharged - Glimpse into Your Code's "Past"

Who this is for:

My Experience: A Time Machine to Help My Future Self

After adding a new feature, I'd often look back at it a month later and have no idea why I wrote the code the way I did. While I could trace it through the Git commit history, doing so in the terminal was a bit of a hassle. With GitLens, simply placing your cursor on any line of code in VSCode faintly displays who committed it, when, and with what message. It's like a time machine. I can instantly recall, "Oh, right, a month ago I added this line for this reason." It's a powerful ally that helps your future self in countless situations, whether you're hunting for the cause of a bug or confidently deleting old code.

Basic Usage

This extension requires your project to be managed with Git. If you've never used Git before, I recommend learning the basics first from resources like the official Git website.

When you open a Git-managed project in VSCode, GitLens is automatically enabled.

  1. Place your cursor on any line of code. The commit information (author, date, commit message) for the last change to that line will be faintly displayed at the end of the line.
  2. Click on that commit information to see the details of the change.
  3. A GitLens icon is also added to the sidebar, allowing you to intuitively browse repository history, compare branches, and more, all with a GUI.

It might seem a bit advanced for beginners, but once you start using Git, you'll surely appreciate how invaluable this extension is. Keep it in mind as a next step in your learning journey.

Summary: Extensions Are Your Best Partners

Today, I've introduced 10 extensions that I've been using since I was a programming beginner and that I can't live without now.

VSCode is an excellent editor on its own, but by adding extensions, you can infinitely evolve it to match your coding style. I encourage you to use the ones introduced here as a base to build your own ultimate development environment.

When you master extensions, coding becomes a more creative and enjoyable activity. Nothing would make me happier than if this article gives a powerful push to your first steps as a developer.

On to the Next Step

Are your VSCode menus still in English? If you'd like to learn more about localization, which was the first thing I introduced, please check out this article as well. It details the setup process and other useful tips related to changing the language.

→ 【Localize VSCode】How to Change the Menu and UI Language with Recommended Settings