[VSCode for Beginners] What is Visual Studio Code? A Complete Guide from Installation to Basic Setup

"I want to start web development or programming, but which editor should I use?"

Hello! Just a few months ago, I was a writer with zero programming knowledge, just like many of you. But now, with the help of AI, I've been able to single-handedly launch websites like buyonjapan.com and copicode.com.

It's no exaggeration to say that the biggest contributor to this success is the editor I'm introducing today: Visual Studio Code (or VSCode for short).

In this article, based on my own stumbling blocks and "if only I knew sooner" moments, I'll explain everything from installing VSCode to the "must-do" initial settings, using as little jargon as possible, as if I were teaching my past beginner self.

By the time you finish this article, you won't just have VSCode installed; you'll have a comfortable development environment and will be ready to take your first step into the joy of writing and running your own code.

So, What Exactly is Visual Studio Code (VSCode)?

VSCode is a free "text editor" developed by Microsoft. As the name suggests, a text editor is software for writing and editing text. Think of it as a super-powered version of Windows' "Notepad" or Mac's "TextEdit".

There are many editors out there, but why do developers worldwide choose VSCode? Here are the three main benefits I've personally experienced:

• Free and Super Powerful: It's honestly amazing that all these features are available for free. It really shows Microsoft's commitment.
• Lightweight Performance: Despite being feature-rich, it starts up and runs smoothly. It was a huge plus that I could use it without stress, even on an older computer.
• Customizable with "Extensions": This is VSCode's greatest charm. I'll explain more later, but by installing useful add-ons (extensions) created by developers around the world, you can build your own ultimate development tool.

There's a similarly named software called "Visual Studio," but that's a different beast—an "Integrated Development Environment (IDE)" for large-scale projects, which is a bit more complex and heavyweight. For your first step in web development, you can't go wrong choosing the light and user-friendly VSCode.

[Hands-On] Let's Install VSCode

Now, let's get VSCode installed on your computer. The process is very simple.

First, visit the official VSCode website.

When you get there, it should automatically detect your OS (Windows, Mac, Linux) and prominently display the best download button for you. Generally, you just need to click that button to download the installer and follow the on-screen instructions.

*The design of the official website may change.

For Windows Users

Run the downloaded .exe file. You'll see a few checkboxes during the installation. If you don't have any specific preferences, I recommend checking the following options:

• "Add to PATH": You should definitely check this one. It allows you to launch VSCode from the command prompt or terminal with the simple command code, which is extremely convenient later on.
• "Add 'Open with Code' action to Windows Explorer file context menu"
• "Add 'Open with Code' action to Windows Explorer directory context menu"

Checking the last two options will add an "Open with Code" choice when you right-click on a file or folder. It's a small thing that will definitely improve your workflow.

Also, if you're on a recent version of Windows 10/11, you can install it using the "winget" command. Just open Command Prompt or PowerShell and type the following command:

winget install Microsoft.VisualStudioCode

For Mac Users

Unzip the downloaded .zip file, and you'll get a file named Visual Studio Code.app. Drag and drop this into your "Applications" folder, and the installation is complete.

For Mac users, I also recommend installing via the command-line tool "Homebrew". Open Terminal and run the following command:

brew install --cask visual-studio-code

For Linux Users

Download the appropriate .deb (for Debian/Ubuntu based) or .rpm (for Red Hat/Fedora/SUSE based) package from the official website and install it. It's also available through the software centers of many distributions.

For example, on Ubuntu, you can use the following command in the terminal:

sudo apt install code

[Crucial] The Initial Setup You Absolutely Must Do

Once the installation is complete, it's time for configuration. This is the most important part. I've hand-picked the settings that made me regret not doing them sooner. Just setting these up will make a world of difference to your development experience.

Step 1: First Things First, Switch to English!

By default, VSCode is in English. While you can use it as is, reading error messages and settings in English can be exhausting, especially for beginners. Let's switch it to your preferred language first to lower the mental barrier. (This article assumes you want English, but the process is the same for other languages).

(Editor's Note: The original article described installing the Japanese Language Pack. Since this article is in English, we'll assume the English default is desired. If you need a different language, follow these steps.)

1. Click the icon with four squares in the left sidebar (the Extensions view).
2. In the search box at the top, type the name of the language you want, e.g., "Japanese", "Spanish", etc.
3. Click the "Install" button on the corresponding "Language Pack" (e.g., Japanese Language Pack for Visual Studio Code).
4. After installation, a message will appear in the bottom right corner prompting you to restart. Click "Restart".

That's it! Your VSCode menus should now be in your chosen language. Easy, right?

Step 2: Open the Settings File (`settings.json`)

Detailed settings in VSCode are configured by writing in a special file called settings.json. You can also configure things through the UI, but getting used to editing this file directly will make managing and sharing your settings much easier later on.

The fastest way to open settings.json is with a keyboard shortcut:

• Windows: Ctrl + Shift + P
• Mac: Command + Shift + P

Pressing this will open the "Command Palette" at the top of the screen. Type "settings json" into it and select "Preferences: Open User Settings (JSON)".

An empty (or lightly populated) file enclosed in {} will open. This is your settings.json. You'll copy and paste the settings I'm about to show you into here.

Step 3: Copy & Paste the Ultimate Starter Settings!

The wait is over. These are the "can't-go-wrong" initial settings I've arrived at after much trial and error. Copy and paste the entire code block below inside the {} of the settings.json file you just opened.

(If there are already some settings, add a comma , before the last } and then paste. The JSON format requires a comma to separate each setting.)

{
    // ----- Appearance Settings -----
    "editor.fontFamily": "'UDEV Gothic NF', 'Source Han Code JP', 'Menlo', 'Monaco', 'Courier New', monospace",
    "editor.fontSize": 16,
    "editor.lineHeight": 1.8,
    "editor.wordWrap": "on",
    "workbench.colorTheme": "Default Dark+",
    "workbench.iconTheme": "material-icon-theme",

    // ----- File Operation Settings -----
    "files.autoSave": "onFocusChange",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,

    // ----- Editor Behavior Settings -----
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "editor.cursorStyle": "line",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "breadcrumbs.enabled": true,

    // ----- Settings for "Prettier" Extension -----
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,

    // ----- Terminal Settings -----
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "monospace"
}

A Quick Explanation of the Settings

You don't need to memorize all of this at once. Just skim through it to get an idea of what's possible.

• editor.fontFamily: Specifies recommended programming fonts. A readable font improves code legibility and makes bugs easier to spot. (You might need to install these fonts separately.)
• editor.fontSize: The size of the text. Adjust to your preference.
• editor.lineHeight: The height of each line. A little extra space makes code easier to read.
• editor.wordWrap: Wraps long lines at the edge of the screen. This eliminates horizontal scrolling and is essential.
• files.autoSave: Automatically saves a file when you switch focus to another window. Prevents forgetting to press Ctrl+S/Cmd+S. This is truly convenient!
• files.insertFinalNewline, files.trim...: Automatically adds a blank line at the end of files and removes unnecessary trailing spaces on save. These settings keep your code clean.
• editor.tabSize: The number of spaces a Tab key inserts. Two is the standard in web development.
• editor.renderWhitespace: Displays spaces and tabs as symbols. Helps you immediately spot mistakes like extra spaces or mixed-in full-width spaces.
• editor.minimap.enabled: Hides the code "minimap" on the right side. This gives you a cleaner interface.
• editor.bracketPairColorization.enabled: Color-codes matching brackets like (), {}, and []. When you have deeply nested structures, you can see at a glance which brackets are a pair.
• editor.defaultFormatter, editor.formatOnSave: This is a god-tier setting. It works with the "Prettier" extension (discussed later) to automatically format your entire code according to a set of rules every time you save. You'll no longer have to worry about code indentation.

[Hand-Picked] Essential Extensions to Install

After the initial setup, it's time for extensions. This is where VSCode truly shines. There are thousands to choose from, which can be overwhelming, but for a beginner, these three are more than enough to start.

Just like with the language pack, search for their names in the Extensions view on the left and install them.

1. Prettier - Code formatter

   This is the "code formatter" mentioned in the settings. The formatOnSave setting won't work without it. It instantly formats code for various languages like HTML, CSS, and JavaScript into a beautiful, industry-standard style. It frees you from trivial worries like "Is this indent tabs or spaces?" or "Should I add a semicolon?", allowing you to focus on the logic.

2. Live Server

   This extension revolutionizes HTML/CSS coding. When activated, it automatically reloads your browser display the moment you save a file. The tedious cycle of "edit code -> save -> switch to browser -> click refresh" becomes obsolete. It dramatically improves development efficiency, so you should absolutely install it.

3. Material Icon Theme

   This one isn't about functionality but aesthetics. It displays beautiful icons next to filenames in the explorer based on the file type (HTML, CSS, JS, etc.). It makes it easier to visually distinguish file types and find the file you're looking for. It's also great for motivation!

*Since you set "workbench.iconTheme": "material-icon-theme" in settings.json, the icons should be applied automatically as soon as you install this.

[Experience] Let's See It in Action!

Congratulations! Your VSCode is now a development environment that rivals a pro's. Finally, let's use this new setup to experience something "working."

1. Open a Workspace Folder
   First, create a new folder somewhere easy to find, like your desktop, and name it something like "vscode-test". Then, from the VSCode menu, select "File" -> "Open Folder..." and open the folder you just created.
2. Create a File
   In the Explorer view on the left, hover over the folder name and click the "New File" icon. Create a file named "index.html".
3. Copy & Paste the Code
   Copy and paste the following code into the index.html file you created.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VSCode Test</title>
  <style>
    body {
      display: grid;
      place-content: center;
      min-height: 100vh;
      background-color: #282c34;
      color: #ffffff;
      font-family: sans-serif;
      text-align: center;
    }
    h1 {
      font-size: 3rem;
      color: #61dafb;
    }
  </style>
</head>
<body>

  <h1>Hello, VSCode!</h1>
  <p>Welcome to my development environment!</p>
  
</body>
</html>

4. Start Live Server
   You should see a "Go Live" button in the bottom-right corner of the window. Click it.

How did it go? A browser should have automatically launched and displayed the HTML you just created!

Now, go back to VSCode and change the content of the h1 tag to something like "Hello, World!" and save the file (Ctrl+S / Cmd+S). Did you see the display in the browser change instantly without you having to switch back and refresh?

That is the power of "Live Server" and the power of the new development environment you've just set up.

Conclusion: To You, Who Now Wields a Powerful Weapon

In this article, we've covered everything from installing VSCode to my most heartfelt recommended initial settings, and even experienced seeing our code "in action".

The settings you configured today will serve as a powerful foundation for your future web development and programming journey. It might seem like a lot to remember at first, but all the settings and extensions introduced today are designed to automate "tedious tasks" and help you focus on "thinking" and "creating".

Now that you have the powerful weapon that is VSCode, you're no longer a beginner. You are a "developer". Go forth and use this comfortable environment to write lots of code and create amazing things!