How to Set Up VS Code for Web Development

Visual Studio Code has dominated the code editor landscape since its release, and in 2026 it remains the go-to choice for web developers worldwide. Its combination of speed, extensibility, and built-in features like IntelliSense and an integrated terminal make it ideal for front-end, back-end, and full-stack development. This guide shows you how to set up VS Code from scratch so you can write HTML, CSS, and JavaScript (or TypeScript) as efficiently as possible.

Downloading and Installing VS Code

Visit code.visualstudio.com and download the installer for your operating system. On Windows, run the .exe file and follow the wizard. During installation, check these options:

• Add "Open with Code" action to Windows Explorer file context menu – Lets you right-click any file to open it in VS Code.
• Add "Open with Code" action to Windows Explorer directory context menu – Lets you right-click any folder to open it as a workspace.
• Register Code as an editor for supported file types – Associates common file types with VS Code.
• Add to PATH – Lets you open VS Code from the terminal by typing code . in any directory.

On macOS, drag the application to your Applications folder and then open VS Code and press Cmd+Shift+P to open the Command Palette, type "shell command," and select Install 'code' command in PATH.

Essential Extensions for Web Development

VS Code's real power comes from its extension marketplace. Open the Extensions panel by pressing Ctrl+Shift+X (or Cmd+Shift+X on Mac) and install the following:

1. Live Server

Live Server launches a local development server with hot reload for static HTML, CSS, and JavaScript files. Right-click any HTML file and select "Open with Live Server" to instantly preview your page in the browser. Any time you save a file, the browser refreshes automatically. This is indispensable for front-end work.

2. Prettier – Code Formatter

Prettier automatically formats your code on save, enforcing consistent indentation, quote styles, and line lengths. It supports HTML, CSS, JavaScript, TypeScript, JSON, Markdown, and more. After installing, set it as your default formatter (covered in the settings section below).

3. ESLint

ESLint analyzes your JavaScript and TypeScript code for potential errors and style violations. It integrates directly with VS Code to underline problems in real time and can auto-fix many issues on save. For the best experience, pair ESLint with Prettier by installing the eslint-config-prettier npm package in your project.

4. Auto Rename Tag

When you rename an opening HTML or JSX tag, this extension automatically renames the matching closing tag. It sounds simple, but it saves a surprising amount of time and prevents mismatched tags.

5. Path Intellisense

Path Intellisense autocompletes file names and paths as you type in import statements, src attributes, and href values. No more guessing whether the file is in ../components or ../../components.

6. CSS Peek

CSS Peek lets you hover over a class name in your HTML and see the associated CSS rules in a tooltip. You can also Ctrl+Click to jump directly to the CSS definition. This is especially useful in larger projects with many stylesheets.

7. GitLens

GitLens supercharges the built-in Git capabilities of VS Code. It shows inline blame annotations, a rich commit history, file and line history, and comparison views. If you use Git (and you should), GitLens is essential.

8. Thunder Client

Thunder Client is a lightweight REST API client built into VS Code. It replaces the need for external tools like Postman for testing API endpoints during development. Create requests, organize them into collections, and view responses without leaving your editor.

9. Error Lens

Error Lens highlights errors and warnings inline, right next to the line of code that caused them. Instead of having to hover over a squiggly underline or check the Problems panel, you see the error message immediately. This speeds up debugging significantly.

10. ES7+ React/Redux/React-Native Snippets

If you work with React, this extension provides shortcuts for common patterns. Type rafce and press Tab to generate a complete React arrow function component with an export. It includes dozens of snippets for hooks, Redux, and more.

Recommended Settings Configuration

Press Ctrl+, (or Cmd+, on Mac) to open Settings, then click the small document icon in the top right to open settings.json directly. Add or modify these settings:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.linkedEditing": true,
  "editor.stickyScroll.enabled": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "workbench.startupEditor": "none",
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

What These Settings Do

• formatOnSave – Runs Prettier every time you save a file, so your code is always clean.
• tabSize: 2 – The standard indentation for web development projects (HTML, CSS, JS).
• wordWrap – Wraps long lines so you do not have to scroll horizontally.
• minimap.enabled: false – Disables the code minimap on the right side, giving you more screen space for code.
• bracketPairColorization – Colors matching brackets so you can visually trace nested code blocks.
• linkedEditing – When you edit an HTML tag name, the matching tag is updated automatically (built into VS Code, no extension needed).
• stickyScroll – Pins function and block headers to the top of the editor as you scroll, helping you stay oriented in large files.
• emmet.includeLanguages – Enables Emmet abbreviations inside JSX files, so you can type div.container and press Tab to expand it.

Must-Know Keyboard Shortcuts

Learning shortcuts is one of the fastest ways to boost your productivity. Here are the ones every web developer should memorize:

• Ctrl+P – Quick Open. Start typing a file name to jump to it instantly.
• Ctrl+Shift+P – Command Palette. Access any VS Code command by name.
• Ctrl+D – Select the next occurrence of the current selection. Press repeatedly to select multiple instances and edit them simultaneously.
• Ctrl+Shift+L – Select all occurrences of the current selection at once.
• Alt+Up/Down – Move the current line up or down.
• Shift+Alt+Up/Down – Duplicate the current line above or below.
• Ctrl+/ – Toggle line comment.
• Ctrl+` – Toggle the integrated terminal.
• Ctrl+B – Toggle the sidebar.
• Ctrl+Shift+K – Delete the entire current line.
• Alt+Click – Place multiple cursors for simultaneous editing.

Using the Integrated Terminal

VS Code includes a built-in terminal that you can open with Ctrl+`. This is where you run your development server, install npm packages, run tests, and use Git commands without switching to a separate application.

You can open multiple terminal instances by clicking the + icon, and split the terminal view horizontally. To change the default shell, open settings and modify terminal.integrated.defaultProfile.windows to your preferred shell (PowerShell, Command Prompt, Git Bash, or WSL).

A useful tip: when you open a folder in VS Code, the terminal automatically sets its working directory to that folder. This means you are always in the right place to run project commands.

Choosing a Theme and Icon Pack

While aesthetics are subjective, a good theme reduces eye strain during long coding sessions. Here are some popular choices in 2026:

• One Dark Pro – A faithful port of Atom's iconic dark theme with well-balanced colors.
• Catppuccin – A soothing pastel theme available in four flavor variants.
• GitHub Theme – The official GitHub theme with both light and dark variants.
• Tokyo Night – A clean, dark blue theme that is easy on the eyes.

For file icons, install the Material Icon Theme extension. It assigns distinct icons to different file types and folders, making the explorer sidebar much easier to navigate at a glance.

Workspace Setup Tips

VS Code workspaces let you group related folders together and apply settings on a per-project basis.

Project-Level Settings

Create a .vscode folder in your project root and add a settings.json file. Any settings here override your global settings for this project only. For example, a React project might use 2-space tabs while a Python project uses 4-space tabs.

Recommended Extensions File

Create .vscode/extensions.json to recommend extensions to anyone who opens the project:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ritwickdey.liveserver"
  ]
}

When a team member opens the project, VS Code will prompt them to install these extensions.

Snippets

Create custom snippets for code you type frequently. Go to File > Preferences > Configure User Snippets and choose a language. For example, a custom HTML boilerplate snippet can save you from typing the same doctype, head, and body structure for every new file.

Emmet for Faster HTML and CSS

Emmet is built into VS Code and is a game-changer for writing HTML. Instead of typing out full tags, you type abbreviations and press Tab:

• ! – Generates a complete HTML5 boilerplate.
• ul>li*5 – Creates an unordered list with five list items.
• div.container>header+main+footer – Creates a div with a container class containing header, main, and footer elements.
• .card>img+h3+p – Creates a div with a card class containing an image, heading, and paragraph.

Emmet also works in CSS files. Type m10 and press Tab to get margin: 10px;, or df for display: flex;. Learning Emmet abbreviations can cut your HTML and CSS writing time in half.

Conclusion

Setting up VS Code for web development is about more than just installing an editor. By adding the right extensions, configuring your settings for automatic formatting and linting, learning keyboard shortcuts, and organizing your workspace properly, you create an environment that actively helps you write better code faster. Take the time to customize VS Code to your workflow, and it will pay dividends across every project you build.