How to Install and Setup VS Code for Web Development (Beginner Guide)
If you want to start learning web development, one of the most important tools you need is a code editor. A code editor allows you to write, edit, and manage your code efficiently.
One of the most popular code editors used by developers today is Visual Studio Code (VS Code).
VS Code is:
- Free
- Lightweight
- Highly customizable
- Supported by thousands of extensions
In this guide, you will learn how to install and configure VS Code for web development.
Visual Studio Code is used by millions of developers worldwide and supports almost every programming language.
What is Visual Studio Code?
Visual Studio Code (VS Code) is a powerful source-code editor developed by Microsoft. It provides features that help developers write code faster and more efficiently.
Some of the features include:
- Syntax highlighting
- Code suggestions (IntelliSense)
- Integrated terminal
- Git integration
- Extensions marketplace
These features make VS Code an excellent tool for web developers, software engineers, and programmers.
Step 1: Download Visual Studio Code
To install VS Code, follow these steps:
- Open your web browser
- Go to the official VS Code website
https://code.visualstudio.com
- Click the Download button for your operating system.
Available versions include:
- Windows
- macOS
- Linux
Always download VS Code from the official website to avoid security risks.
Step 2: Install VS Code
Once the installer is downloaded:
Windows Installation
- Open the downloaded .exe installer
- Accept the license agreement
- Click Next until installation begins
- Select recommended options such as:
- Add to PATH
- Add "Open with Code" to context menu
- Click Install
After installation is complete, launch Visual Studio Code.
Step 3: Explore the VS Code Interface
When you open VS Code for the first time, you will see the main interface.
The important sections include:
Activity Bar
Located on the left side, it includes icons for:
- Explorer
- Search
- Source Control
- Extensions
- Run & Debug
Editor Area
This is where you write and edit your code files.
Terminal
VS Code includes a built-in terminal where you can run commands.
You can open the terminal using:
Ctrl + `
Step 4: Install Important Extensions
Extensions allow you to add extra functionality to VS Code.
To install extensions:
- Click the Extensions icon on the left sidebar
- Search for the extension name
- Click Install
Below are some essential extensions for web development.
Live Server
Live Server allows you to run your HTML files in a local development server and automatically refresh the browser when you save changes.
Benefits:
- Instant preview of your website
- Automatic browser reload
- Faster development workflow
To install:
- Open the Extensions panel
- Search for:
Live Server
- Install the extension by Ritwick Dey
After installing, right-click your HTML file and select:
JavaScript Code Snippets
This extension provides useful JavaScript shortcuts and snippets to speed up coding.
Example snippet:
clg
expands to:
console.log()
To install:
Search for:
JavaScript (ES6) Code Snippets
Author: Charalampos Karypidis
Bootstrap 4 Snippets
If you build websites using Bootstrap, this extension provides ready-to-use Bootstrap code snippets.
Example:
container
expands to:
<div class="container"></div>
Install by searching:
Bootstrap 4 Snippets
Author: Ashok Koyi
Step 5: Create Your First Project Folder
Organizing your projects properly is important.
Create a project folder:
web-projects
Then open it in VS Code.
Steps:
- Click File
- Select Open Folder
- Choose your project folder
Now you are ready to start coding.
Step 6: Create Your First HTML File
Inside your project folder:
Create a file named:
index.html
Add the following code:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to my first website.</p>
</body>
</html>
Save the file and open it using Live Server.
Watch the Full Setup Tutorial
You can also follow the full setup tutorial on the EdhuvaTech YouTube channel.
Recommended VS Code Extensions for Web Developers
Here are some additional useful extensions:
- Prettier (Code Formatter)
- Tailwind CSS IntelliSense
- Auto Rename Tag
- Path IntelliSense
- GitLens
These extensions can significantly improve your productivity and coding workflow.
Final Thoughts
Setting up a proper development environment is the first step toward becoming a successful web developer.
Visual Studio Code provides everything you need to start building websites and applications.
Once your editor is configured, the next step is to begin learning:
- HTML
- CSS
- JavaScript
- Git and GitHub
- Frontend frameworks like React
With consistent practice, you will become more comfortable with the tools and start building real-world projects.
Coming Next on EdhuvaTech
In the next tutorial, we will learn:
How to Create Your First Website Using HTML and CSS
You will build a simple webpage step-by-step while learning the fundamentals of web development.