Visual Studio Code Complete Guide: From Installation to Practice (2025 Edition)

What tools do you use for document creation and everyday tasks? For a long time, I only used simple note-taking features. However, since I started using Visual Studio Code (VSCode), a full-fledged editor, my work efficiency has changed dramatically.

This article provides a beginner-friendly guide to VSCode, from installation to practical use, based on the latest information as of October 2025. It’s a powerful tool that can be used not only for programming and web development but also for document creation in Markdown.

What is Visual Studio Code?

Visual Studio Code (VSCode) is a free code editor developed by Microsoft. Its greatest feature is being “free yet highly functional,” earning overwhelming support from developers worldwide.

5 Reasons Why VSCode is Chosen

1. Completely Free: All features are free to use, including for commercial purposes
2. Lightweight and Fast: Quick startup and smooth operation even with large files
3. Rich Extensions: Over 60,000 extensions for customization to your liking
4. Multi-platform: Works on Windows, Mac, and Linux
5. Active Community: Abundant information when you need help, making solutions easy to find

What I particularly like is the code completion feature when writing HTML or Markdown. It suggests candidates as you type, significantly reducing typos. Furthermore, using the Code Spell Checker extension provides real-time spell checking, preventing mistakes in English words.

Installation Method (Time Required: About 5 Minutes)

For Windows

1. Access the VSCode Official Site
2. Click the “Download for Windows” button
3. Run the downloaded VSCodeUserSetup-x64-x.xx.x.exe
4. When the setup wizard starts, click “Next”
5. Agree to the license agreement and click “Next”
6. Important: On the “Select Additional Tasks” screen, we recommend checking the following:
   • ☑ Create a desktop icon
   • ☑ Add “Open with Code” action to Windows Explorer file context menu
   • ☑ Add “Open with Code” action to Windows Explorer directory context menu
   • ☑ Register Code as an editor for supported file types
7. Click the “Install” button
8. After installation completes, check “Launch Visual Studio Code” and click “Finish”

Tip: Adding to the context menu allows you to right-click a folder and select “Open with Code,” which is very convenient.

For Mac

1. Access the VSCode Official Site
2. Click the “Download for Mac” button (automatically detects Apple Silicon/Intel)
3. Extract the downloaded VSCode-darwin-universal.zip
4. Drag and drop the extracted Visual Studio Code.app to the “Applications” folder
5. Launch “Visual Studio Code” from Launchpad or the Applications folder

Mac-specific setup: If the first launch shows “Cannot be opened because the developer cannot be verified,” right-click (or Control + click) → “Open” to launch it.

Initial Setup: Japanese Language Support (Essential)

VSCode displays in English immediately after installation. The Japanese language setup is simple and takes about 1 minute.

1. Launch VSCode
2. Click the “Extensions” icon (four squares overlapping) in the activity bar on the left
   • Shortcut: Windows Ctrl + Shift + X / Mac ⌘ + Shift + X
3. Type “Japanese” in the search bar
4. Find “Japanese Language Pack for Visual Studio Code” (Publisher: Microsoft) and click “Install”
5. A “Change Language and Restart” button will appear in the bottom right, click it
6. VSCode will restart and display in Japanese

If the button doesn’t appear, manually restart and it will be in Japanese.

Understanding the VSCode Interface

When you open VSCode, it may seem complex at first, but once you learn the basic structure, you’ll get used to it quickly.

Main Interface Elements

1. Menu Bar (Top) Standard menus like File, Edit, View are lined up.

2. Activity Bar (Vertical Bar on the Left) Quick access to main features:

• Explorer: File and folder management
• Search: Search strings throughout the project
• Source Control: Version control with Git
• Run and Debug: Program execution and debugging
• Extensions: Plugin management to add features

3. Side Bar (Next to Activity Bar) Displays the content selected in the activity bar.

4. Editor Area (Large Central Area) Where you actually write code. You can open multiple files with tabs.

5. Panel (Bottom) Displays terminal, output, problems, debug console, etc.

• Toggle visibility: Windows Ctrl + J / Mac ⌘ + J

6. Status Bar (Bottom) Displays current status:

• Line and column numbers
• Character encoding (UTF-8, etc.)
• Line endings (LF, CRLF, etc.)
• File format (HTML, Markdown, etc.)
• Git information (branch name, etc.)

Useful Keyboard Shortcuts

You don’t need to memorize all of them from the start, but knowing even these shortcuts will significantly improve your work efficiency.

Basic Operations

View Toggle

Editing Operations

My Experience: At first, I thought “memorizing shortcuts is troublesome,” but once I learned just Ctrl + S (save) and Ctrl + B (toggle sidebar), mouse operations decreased dramatically and it became comfortable.

7 Recommended Extensions for Beginners

The true value of VSCode lies in its extensions. Here are some useful extensions.

Important: When installing extensions, always verify the correct publisher. There have been actual incidents of fake extensions being distributed, posing security risks (details explained after the table).

⚠️ About Extension Security

In April 2025, malicious software disguised as VSCode extensions was confirmed, with a fake Prettier being downloaded nearly 1 million times. When installing extensions, always pay attention to the following:

Checkpoints for Safe Installation:

Correct Publishers for Extensions Introduced in This Article:

• Prettier → esbenp.prettier-vscode
• Live Server → ritwickdey.LiveServer
• Markdown All in One → yzhang.markdown-all-in-one
• Auto Rename Tag → formulahendry.auto-rename-tag
• Code Spell Checker → streetsidesoftware.code-spell-checker
• GitLens → eamodio.gitlens
• indent-rainbow → oderwat.indent-rainbow

Other Precautions:

• Install only the minimum necessary extensions (5-7 is sufficient initially)
• Check the permissions required during installation
• Confirm official documentation or GitHub repository is available

Practice: Creating an HTML File

Let’s not just learn theory but actually try it. Let’s create a simple HTML file.

Step 1: Open Folder

1. Select “File” → “Open Folder” in VSCode
2. Create a new folder for work (e.g., vscode-practice) and select it
3. Click “Select Folder”

Tip: The basic approach in VSCode is to work by “folder.” Managing projects by separate folders makes organization easier.

Step 2: Create New File

1. In the Explorer sidebar, click the “New File” icon next to the folder name
2. Enter the filename as index.html and press Enter

Step 3: Write Code

Try typing the following code. Type ! and press Tab to auto-generate an HTML template (Emmet feature).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VSCode Practice</title>
  </head>
  <body>
    <h1>Created with Visual Studio Code</h1>
    <p>This is my first HTML file.</p>
  </body>
</html>

Step 4: Save File

Save with Ctrl + S (Mac: ⌘ + S).

Step 5: View in Browser

Using Live Server: Right-click the file → Select “Open with Live Server” and the browser opens automatically.

Without Live Server: Double-click the file directly from Explorer to open it.

Writing Blog Posts in Markdown

Let me introduce what I usually do. I write this blog’s articles with VSCode too.

Creating a Markdown File

1. Create a new file: article.md
2. Try writing Markdown like this:

# How to Use VSCode

## Installation Method

VSCode can be downloaded from the official site.

### For Windows

1. Access the official site
2. Download the installer
3. Follow instructions to install

## Useful Features

- Code completion
- Syntax highlighting
- Git integration

Preview Display

Press Ctrl + Shift + V (Mac: ⌘ + Shift + V) to display the preview.

To display editing screen and preview side by side: Press Ctrl + K V (Mac: ⌘ + K V) and the preview appears on the right.

My Method: When writing blog posts, I edit Markdown on the left while checking the preview on the right. This method allows real-time confirmation of formatting, making it efficient.

Related Article: For those who want to know more about Markdown syntax, see “Markdown Guide & Cheat Sheet.” We comprehensively cover everything from basic syntax to practical considerations.

Common Troubles and Solutions

Author’s Use Cases

I use VSCode for the following purposes:

Stumbling Points and Solutions

2025 New Feature: AI Integration

In 2025, VSCode has significantly enhanced AI-powered development support features. The “GitHub Copilot” extension in particular is widely used from programming beginners to advanced users.

Main Features of GitHub Copilot

Advice for Beginners

GitHub Copilot is a very powerful tool, but we recommend getting familiar with basic features first before using it. The reasons are as follows:

• Without understanding basic syntax and logic, you can’t judge if AI suggestions are correct
• Writing yourself helps you learn programming thinking
• Free plan has a limit of 60 times per month (free for students)

When to Start Using:

1. After learning basic HTML or Markdown syntax
2. After becoming able to write simple code yourself
3. When you feel “I want to write more efficiently”

GitHub Copilot is available for $10 per month (free for students and educators). If interested, trying the free trial first is also good.

Summary

VSCode is a highly functional code editor that’s hard to believe is free. At first, the many features may be confusing, but once you learn the basic usage, work efficiency improves dramatically.

3 Steps to Start Today:

1. Install VSCode and set it to Japanese
2. Memorize just 3 shortcuts (save, toggle sidebar, command palette)
3. Create one simple HTML file

You don’t need to aim for perfection from the start. If you learn features gradually as you use it, it will naturally become familiar.

I also thought “Isn’t Notepad enough?” at first, but now I can’t imagine working without VSCode. I hope you’ll also make use of this convenient tool.

Reference Links

• Visual Studio Code Official Site
• VSCode Official Documentation (Japanese)
• VSCode Extension Marketplace
• Emmet Cheat Sheet
• VSCode Keyboard Shortcuts List (Official PDF)

I hope this article helps you get started with VSCode. If you have questions, try asking in the official documentation or community. VSCode users are often kind, so they’ll surely help you.