isual Studio Code (VS Code) is currently the most popular code editor in the world. It is free, lightweight, and created by Microsoft. Unlike the massive "Visual Studio" IDE, VS Code is a streamlined text editor that you can customize with "extensions" to do almost anything, from web development to Python coding.

Follow this guide to get it running on your Windows 10 or Windows 11 computer.

Step 1: Download Visual Studio Code

  1. Open your web browser (Edge, Chrome, Firefox, etc.).

  2. Navigate to the official website: code.visualstudio.com

  3. On the homepage, you will see a large blue button that says "Download for Windows"

    • Note: The website automatically detects your operating system. It will typically download the "User Installer" version, which is recommended for most users.

  4. Click the button. The download (VSCodeUserSetup-x64...exe) will start automatically. Save it to your Downloads folder.

Step 2: Install the Application

  1. Go to your Downloads folder and double-click the installer file you just downloaded.

  2. License Agreement: A window will pop up. Select "I accept the agreement" and click Next.

  3. Select Destination Location: It will ask where to install the program usually ```C:\Users\YourName\AppData\Local\Programs\Microsoft VS Code```

    • Action: Leave this as the default and click Next.

  4. Select Start Menu Folder: Click Next (Default is fine).

  5. Select Additional Tasks (IMPORTANT):

    • This is the most critical step. You will see several checkboxes. I highly recommend you check ALL of them:

Create a desktop icon (Optional, but useful).

Add "Open with Code" action to Windows Explorer file context menu (Allows you to right-click a file and open it in VS Code immediately).
 
Add "Open with Code" action to Windows Explorer directory context menu (Allows you to right-click a folder to open it as a project).
 
Register Code as an editor for supported file types.
 
Add to PATH (requires shell restart) (Crucial for running VS Code from the command line).
    • Click Next.
  2. Ready to Install: Click Install.

  3. Finish: Once the progress bar completes, ensure "Launch Visual Studio Code" is checked and click Finish.

Step 3: Initial Setup & The "Get Started" Wizard

When VS Code opens for the first time, you will see a "Get Started" tab. This wizard helps you configure the look and feel.

  1. Choose a Theme:

    • You will see options like "Dark Modern," "Light Modern," "High Contrast," etc.

    • Recommendation: Most developers prefer Dark Modern to reduce eye strain. Click the one you like.

  2. Sync Settings (Optional):

    • You may see an option to "Turn on Settings Sync." This allows you to sign in with a GitHub or Microsoft account so your settings follow you to other computers. You can click "Mark Done" to skip this for now if you prefer.

  3. Workspace Trust:

    • As you open files later, you might see a shield icon or a pop-up asking if you "Trust the authors of this folder."

    • Rule of Thumb: If you created the folder or downloaded it from a safe source, click Yes, I trust the authors. This enables all features (like auto-complete) for that project.

Step 4: Install Essential Extensions

VS Code is a "bare-bones" editor out of the box. You make it powerful by installing Extensions.

  • Look at the Activity Bar on the far left side of the screen (a narrow strip of icons).

  • Click the icon that looks like four squares/blocks (or press Ctrl + Shift + X). This is the Extensions Marketplace.

  • Here are the top 3 extensions recommended for almost all beginners:

    • Prettier - Code formatter:

      • Search for: "Prettier"

      • Click: Install

      • What it does: automatically fixes your spacing and indentation every time you save your file, making your code look professional.

    • Material Icon Theme:

      • Search for: "Material Icon"

      • Click: Install

      • What it does: Changes the boring default file icons to colorful, recognizable icons (e.g., a blue "C" for CSS files, a yellow "JS" for JavaScript).

    • Live Server (For Web Developers):

      • Search for: "Live Server" (by Ritwick Dey)

      • Click: Install

      • What it does: Allows you to right-click an HTML file and select "Open with Live Server" to see your website in a browser that updates automatically as you type.

Step 5: Create Your First Project

Let's test if everything is working correctly by creating a simple HTML file.

  1. Create a Folder:

    • Minimize VS Code.

    • On your Desktop, right-click and create a new folder named MyFirstCode.

  2. Open in VS Code:

    • Right-click that new folder.

    • Because you checked the boxes in Step 2, you should see an option "Open with Code". Click it.

    • (Alternatively, inside VS Code, go to File > Open Folder and select it).

  3. Create a File:

    • On the left sidebar (the "Explorer"), hover over the name of your folder.

    • Click the "New File" icon (a page with a plus sign).

    • Name the file index.html and press Enter.

  4. Write Code:

    • Type ! (an exclamation mark) and press Enter.

    • VS Code will automatically generate a basic HTML skeleton.

    • Inside the <body> tags, type: <h1>Hello World</h1>.

    Run It:

     

    If you installed Live Server (from Step 4): Right-click anywhere in your code and choose "Open with Live Server".

    • Your web browser will pop up displaying your "Hello World" text.

     

 

Congratulations! You have successfully installed and set up Visual Studio Code on Windows.