If you’re stepping into the world of web development or software engineering, Visual Studio Code (VS Code) is one of the best tools to have in your toolkit. Lightweight, powerful, and packed with features, it’s become the go-to code editor for many developers around the world.

In this tutorial, we’ll walk you through:

• How to install VS Code

• How to install useful extensions like Prettier, Live Preview, and more

• How to configure your environment for maximum productivity

Step 1: Download and Install Visual Studio Code

1. Go to the VS Code website:

   Visit https://code.visualstudio.com/ and click the download button. The site automatically detects your operating system (Windows, macOS, or Linux).
   
   
   

2. Run the installer:

   • For Windows, run the downloaded .exe file and follow the installation wizard.

   • For macOS, open the downloaded .zip file and drag Visual Studio Code to your Applications folder.

   • For Linux, follow the instructions specific to your distro (deb, rpm packages, or snap).

3. Launch VS Code:

   Once installed, open VS Code. You will see a welcome screen with helpful links and tips.

Step 2: Install Essential Extensions

Extensions enhance the functionality of VS Code. Let’s install some popular and useful ones.

1. Prettier – Code Formatter

Prettier automatically formats your code to look clean and consistent.

• Open the Extensions View by clicking the square icon in the Activity Bar, or pressing Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).

• In the search box, type Prettier.

• Find Prettier – Code formatter by Prettier and click Install.

• Once installed, you can configure Prettier in your workspace or user settings to format your code on save.

Enable format on save:

• Go to File > Preferences > Settings (or Code > Preferences > Settings on macOS).

• Search for format on save.

• Check the box for Editor: Format On Save.

2. Live Preview

This extension allows you to instantly preview your HTML files right inside VS Code.

• In Extensions View, search for Live Preview.

• Install Live Preview by Microsoft.

  ▶ How to Use Live Server

  1. Open your HTML file in VS Code.

  2. Right-click in the editor and select "Open with Live Server".

  3. Your default browser will open, and any saved changes to the file will reflect automatically.

Step 3: Customize Your VS Code Experience

VS Code is highly customizable:

• Themes: Search for themes like One Dark Pro, Dracula Official, or Material Theme in Extensions to change the look.

• Keyboard Shortcuts: Customize shortcuts via File > Preferences > Keyboard Shortcuts.

• Settings Sync: Sync your settings, extensions, and keyboard shortcuts across devices by signing in with your Microsoft or GitHub account.

Summary

You’ve now:

• Installed Visual Studio Code.

• Added key extensions like Prettier for formatting and Live Preview for real-time HTML preview.

• Explored other useful extensions to enhance your workflow.

VS Code is a versatile editor, and these steps get you started on a powerful setup that can grow with your skills.

Bonus: Create a Simple Test Project

1. Create a new folder, e.g., my-first-project

2. Open it in VS Code (File > Open Folder)

3. Create an index.html file with the following:

   

4. Right-click the file and select "Open with Live Server" to see it in action.

Got Questions?

Leave a comment or reach out if you need help configuring your VS Code or choosing extensions for specific projects!