Back to Tutorials
TOOLS & TIPS

VS Code Setup for Web Development

20 min read Beginner

Visual Studio Code (VS Code) is the most popular code editor in the world, and for good reason. It is free, open-source, fast, and incredibly extensible. Whether you are writing HTML, CSS, JavaScript, Python, or any other language, VS Code has you covered.

But out of the box, VS Code is a blank canvas. The real power comes from configuring it with the right extensions, settings, and shortcuts. This tutorial will turn your fresh VS Code installation into a finely tuned web development machine.

Installing VS Code

Download VS Code from code.visualstudio.com. It is available for Windows, macOS, and Linux.

# Or install via command line:

# macOS (Homebrew)
$ brew install --cask visual-studio-code

# Ubuntu/Debian
$ sudo snap install code --classic

# Windows (winget)
$ winget install Microsoft.VisualStudioCode

After installation, open VS Code and take a moment to explore the interface. The key areas are:

  • Activity Bar (left side) — Icons for Explorer, Search, Source Control, Extensions, etc.
  • Side Bar — Shows the contents of the selected activity (file tree, search results, etc.).
  • Editor — The central area where you write code. Supports multiple tabs and split views.
  • Terminal — The integrated terminal at the bottom (toggle with Ctrl+`).
  • Status Bar (bottom) — Shows file info, language mode, line/column, and more.

Essential Extensions

Extensions are what make VS Code special. Open the Extensions panel (Ctrl+Shift+X) and install these must-haves for web development:

1. Live Server

Launches a local development server with live reload. Every time you save a file, your browser automatically refreshes. This is indispensable for front-end development.

  • Right-click any HTML file and select "Open with Live Server"
  • Or click "Go Live" in the status bar
  • Your browser opens and refreshes on every save

2. Prettier - Code Formatter

Prettier automatically formats your code to a consistent style. It handles indentation, line breaks, quotes, semicolons, and more. No more arguing about formatting — let Prettier decide.

// Add to your settings.json to format on save:
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "prettier.singleQuote": true,
    "prettier.tabWidth": 2,
    "prettier.semi": true
}

3. ESLint

ESLint catches JavaScript errors and enforces coding standards as you type. It underlines problems in red/yellow and can auto-fix many issues on save. Requires ESLint to be installed in your project (npm install eslint --save-dev).

4. Auto Rename Tag

When you rename an HTML opening tag, this extension automatically renames the matching closing tag (and vice versa). A small feature that saves constant frustration.

5. Bracket Pair Colorizer (Built-in)

VS Code now has built-in bracket pair colorization. Each pair of brackets, parentheses, and curly braces gets a matching color, making it easy to see where blocks begin and end. Enable it in settings:

{
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active"
}

6. GitLens

GitLens supercharges VS Code's built-in Git support. It shows who changed each line of code (git blame inline), visualizes code history, and makes comparing branches and commits effortless. Essential if you work with Git regularly.

7. HTML CSS Support

Provides CSS class name auto-completion in HTML files. As you type a class attribute, it suggests class names from your linked stylesheets. This eliminates typos and saves time looking up class names.

Other Recommended Extensions

  • Path Intellisense — Auto-completes file paths as you type them.
  • CSS Peek — Ctrl+click a class name in HTML to jump to its CSS definition.
  • Color Highlight — Displays color swatches next to CSS color values.
  • Image Preview — Shows image previews in the gutter and on hover for image paths.
  • Error Lens — Shows error and warning messages inline, right next to the problematic code.
Tip: Do not install too many extensions. Each one adds to VS Code's memory usage and startup time. Start with the essentials listed above and only add more when you have a specific need. You can disable extensions per workspace if some are only needed for certain projects.

Themes

A good theme reduces eye strain during long coding sessions and makes syntax easier to parse. VS Code has thousands of themes available. Here are some of the most popular and well-regarded ones:

  • One Dark Pro — Based on Atom's iconic One Dark theme. Warm, balanced colors with excellent contrast.
  • GitHub Theme — Clean light and dark themes matching GitHub's design language.
  • Dracula — A popular dark theme with vibrant purples and greens.
  • Tokyo Night — A calming dark theme inspired by Tokyo's night cityscape.
  • Catppuccin — A pastel-colored theme with light and dark variants. Easy on the eyes.

To change themes: open the Command Palette (Ctrl+Shift+P), type "Color Theme", and browse the options. You can preview each theme before applying it.

Essential Keyboard Shortcuts

Learning keyboard shortcuts is the single biggest productivity boost in VS Code. These are the shortcuts you will use dozens of times every day:

Navigation

Windows/Linux macOS Action
Ctrl+PCmd+PQuick Open — find and open any file by name
Ctrl+Shift+PCmd+Shift+PCommand Palette — access any VS Code command
Ctrl+GCmd+GGo to a specific line number
Ctrl+Shift+FCmd+Shift+FSearch across all files in the project
Ctrl+`Cmd+`Toggle integrated terminal

Editing

Windows/Linux macOS Action
Ctrl+DCmd+DSelect the next occurrence of current selection
Alt+Up/DownOpt+Up/DownMove the current line up or down
Shift+Alt+Up/DownShift+Opt+Up/DownDuplicate the current line up or down
Ctrl+Shift+KCmd+Shift+KDelete the entire current line
Ctrl+/Cmd+/Toggle line comment
Ctrl+Shift+ACmd+Shift+AToggle block comment
Tip: Ctrl+D is one of the most powerful shortcuts. Select a word, then press Ctrl+D repeatedly to select the next occurrence. Each occurrence gets its own cursor, so you can edit them all simultaneously. This is multi-cursor editing at its best.

Emmet Abbreviations

Emmet is built into VS Code and lets you write HTML and CSS at lightning speed using shorthand abbreviations. Type the abbreviation and press Tab to expand it.



!


div.container


ul>li*5


nav>ul>li*4>a{Link $}


div.card>img.card-img+div.card-body>h3{Title}+p{Description}



m10          
p20-30       
df           
jcc          
aic          
fz16         
bgc#333      
w100p
Tip: Emmet is one of the biggest time-savers in web development. Spend 20 minutes learning the most common abbreviations and you will save hours over the course of a project. The Emmet cheat sheet is a great reference.

The Integrated Terminal

VS Code has a built-in terminal so you never need to leave the editor to run commands. Press Ctrl+` (backtick) to toggle it open.

Key features of the integrated terminal:

  • Automatically opens in your project's root directory.
  • You can have multiple terminal instances (click the + icon).
  • Split terminals side by side for running multiple processes (e.g., a dev server and a test watcher).
  • Supports different shell types — you can configure it to use Bash, Zsh, PowerShell, or any other shell.
  • Terminal links: Ctrl+click on file paths and URLs in terminal output to open them.
// Set your preferred default shell in settings.json:
{
    // Linux/Mac
    "terminal.integrated.defaultProfile.linux": "zsh",
    "terminal.integrated.defaultProfile.osx": "zsh",

    // Windows
    "terminal.integrated.defaultProfile.windows": "Git Bash",

    // Increase terminal font size if needed
    "terminal.integrated.fontSize": 14
}

Essential settings.json Tweaks

VS Code settings can be configured through the GUI (Ctrl+,) or by editing settings.json directly (Ctrl+Shift+P, type "settings json"). Here is a recommended configuration for web development:

{
    // Editor
    "editor.fontSize": 14,
    "editor.fontFamily": "'Fira Code', 'JetBrains Mono', Consolas, monospace",
    "editor.fontLigatures": true,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": false,
    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.smoothScrolling": true,
    "editor.linkedEditing": true,
    "editor.renderWhitespace": "boundary",
    "editor.stickyScroll.enabled": true,

    // Formatting
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": false,

    // Bracket colorization (built-in)
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",

    // Files
    "files.autoSave": "onFocusChange",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.exclude": {
        "**/.git": true,
        "**/node_modules": true,
        "**/.DS_Store": true
    },

    // Explorer
    "explorer.confirmDelete": false,
    "explorer.compactFolders": false,

    // Terminal
    "terminal.integrated.fontSize": 13,

    // Workbench
    "workbench.startupEditor": "none",
    "workbench.tree.indent": 16,
    "breadcrumbs.enabled": true
}

Multi-Cursor Editing

Multi-cursor editing lets you type in multiple places simultaneously. Once you master it, you will wonder how you ever lived without it.

Action How to do it
Add cursor at click pointAlt+Click (Opt+Click on Mac)
Add cursor above/belowCtrl+Alt+Up/Down (Cmd+Opt+Up/Down)
Select next occurrenceCtrl+D (Cmd+D) — repeat for more
Select ALL occurrencesCtrl+Shift+L (Cmd+Shift+L)
Column/box selectionShift+Alt+Drag (Shift+Opt+Drag)

A practical example: you have a list of items that need to be wrapped in <li> tags. Place a cursor at the beginning of each line (Ctrl+Alt+Down repeated), type <li>, then press End to jump to the end of each line and type </li>. All lines are wrapped simultaneously.

Custom Snippets

Snippets are reusable code templates. VS Code comes with built-in snippets for most languages, but you can also create your own. Go to File > Preferences > Configure User Snippets.

// Example: Create a custom snippet for HTML
// File > Preferences > Configure User Snippets > html.json
{
    "Section with Container": {
        "prefix": "section",
        "body": [
            "
",
            "    
",
            "        
${2:Heading}
",
            "        
${3:Content goes here}
",
            "    
",
            "
"
        ],
        "description": "HTML section with container"
    },
    "Console Log": {
        "prefix": "cl",
        "body": "console.log('${1:message}', ${2:variable});",
        "description": "Console log with label"
    }
}

// Usage: type "section" and press Tab to expand
// Tab through the placeholders ($1, $2, $3) to fill in values
Tip: Pay attention to patterns in your coding. If you find yourself typing the same structure repeatedly (a component template, a function pattern, a test structure), turn it into a snippet. The time investment pays off quickly.

Key Takeaways

  • Install essential extensions: Live Server, Prettier, ESLint, Auto Rename Tag, GitLens, and HTML CSS Support.
  • Choose a theme that is comfortable for long coding sessions.
  • Learn the top keyboard shortcuts: Ctrl+P (quick open), Ctrl+Shift+P (command palette), Ctrl+D (select next), Alt+Up/Down (move line).
  • Master Emmet abbreviations to write HTML and CSS at speed. Type abbreviation + Tab.
  • Use the integrated terminal (Ctrl+`) to run commands without leaving VS Code.
  • Configure settings.json for format-on-save, word wrap, bracket colorization, and font ligatures.
  • Learn multi-cursor editing — it is a superpower for repetitive edits.
  • Create custom snippets for code patterns you use frequently.
  • Keep your extension count lean — only install what you actually use.
Command Line End of Series