---
title: "Recommended VS Code Extensions"
description: "A list of recommended Visual Studio Code extensions for enhanced productivity and development."
date: "2025-11-15"
lastUpdated: "2026-05-22"
tags: ["vscode","extensions","tools","productivity"]
canonical: "/reference/tools/vscode-extensions"
---

import { Kbd } from 'starlight-kbd/components'

## Overview

This document lists recommended VS Code extensions for web development that
enhance productivity and the development experience. These are generic
extensions suitable for most web development projects.

## Extensions Configuration

You can use the following configuration in your own projects by creating a
`.vscode/extensions.json` file:

```json
{
  "recommendations": [
    "aaron-bond.better-comments",
    "oxc.oxc-vscode",
    "bradgashler.htmltagwrap",
    "chakrounanas.turbo-console-log",
    "christian-kohler.npm-intellisense",
    "christian-kohler.path-intellisense",
    "clinyong.vscode-css-modules",
    "dbaeumer.vscode-eslint",
    "dotiful.dotfiles-syntax-highlighting",
    "dsznajder.es7-react-js-snippets",
    "esbenp.prettier-vscode",
    "foxundermoon.shell-format",
    "github.copilot",
    "github.copilot-chat",
    "github.vscode-pull-request-github",
    "mgmcdermott.vscode-language-babel",
    "naumovs.color-highlight",
    "oderwat.indent-rainbow",
    "p42ai.refactor",
    "phoenisx.cssvar",
    "pucelle.vscode-css-navigation",
    "stkb.rewrap",
    "streetsidesoftware.code-spell-checker",
    "streetsidesoftware.code-spell-checker-french",
    "stylelint.vscode-stylelint",
    "wix.vscode-import-cost",
    "xabikos.javascriptsnippets"
  ]
}
```

## Extension Categories

### Code Quality & Formatting

- **OXC** (`oxc.oxc-vscode`) - Oxlint integration for fast JavaScript and
  TypeScript linting
- **Oxfmt** (`oxc.oxfmt-vscode`) - High-performance formatter for the
  JavaScript ecosystem
- **ESLint** (`dbaeumer.vscode-eslint`) - Integrates ESLint JavaScript into VS
  Code
- **Prettier** (`esbenp.prettier-vscode`) - Code formatter using prettier
- **Stylelint** (`stylelint.vscode-stylelint`) - Modern linter that helps you
  avoid errors and enforce conventions in styles

### Productivity & Code Assistance

- **GitHub Copilot** (`github.copilot`) - AI pair programmer
- **GitHub Copilot Chat** (`github.copilot-chat`) - Chat with GitHub Copilot
- **Better Comments** (`aaron-bond.better-comments`) - Improve your code
  commenting by annotating with alert, informational, TODOs, and more
- **Code Spell Checker** (`streetsidesoftware.code-spell-checker`) - Spelling
  checker for source code
- **Code Spell Checker French** (`streetsidesoftware.code-spell-checker-french`)
  - French language support for Code Spell Checker
- **Turbo Console Log** (`chakrounanas.turbo-console-log`) - Automating the
  process of writing meaningful log messages
- **P42 Refactor** (`p42ai.refactor`) - JavaScript refactoring assistant

### IntelliSense & Navigation

- **npm Intellisense** (`christian-kohler.npm-intellisense`) - Autocomplete npm
  modules in import statements
- **Path Intellisense** (`christian-kohler.path-intellisense`) - Autocomplete
  filenames
- **Import Cost** (`wix.vscode-import-cost`) - Display import/require package
  size in the editor
- **CSS Navigation** (`pucelle.vscode-css-navigation`) - Allows Go to Definition
  from HTML to CSS

### HTML & CSS

- **HTML Tag Wrap** (`bradgashler.htmltagwrap`) - Wrap selected code with HTML
  tags
- **CSS Modules** (`clinyong.vscode-css-modules`) - CSS Modules support
- **CSS Variables** (`phoenisx.cssvar`) - CSS Variables IntelliSense
- **Color Highlight** (`naumovs.color-highlight`) - Highlight web colors in your
  editor

### JavaScript & React

- **Babel JavaScript** (`mgmcdermott.vscode-language-babel`) - JavaScript syntax
  highlighting for ES201x, React JSX, Flow and GraphQL
- **JavaScript (ES6) code snippets** (`xabikos.javascriptsnippets`) - Code
  snippets for JavaScript in ES6 syntax
- **ES7+ React/Redux/React-Native snippets** (`dsznajder.es7-react-js-snippets`)
  - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax

### Git & GitHub

- **GitHub Pull Requests** (`github.vscode-pull-request-github`) - Review and
  manage GitHub pull requests and issues

### Shell & Configuration

- **Shell Format** (`foxundermoon.shell-format`) - Code formatter for shell
  scripts, Dockerfiles, properties, gitignore, dotenv, hosts, jvmoptions...
- **Dotfiles Syntax Highlighting** (`dotiful.dotfiles-syntax-highlighting`) -
  Syntax highlighting for dotfiles

### Visual Enhancements

- **Indent Rainbow** (`oderwat.indent-rainbow`) - Makes indentation easier to
  read
- **Rewrap** (`stkb.rewrap`) - Hard word wrapping for comments and other text

## Installation

To use these recommended extensions in your project:

1. Create a `.vscode/extensions.json` file in your project root with the
   configuration shown above
2. When you open your project in VS Code, you'll be prompted to install the
   recommended extensions
3. Alternatively, you can manually install extensions:
   - Open the Extensions view (<Kbd mac="Command+Shift+X"
     windows="Control+Shift+X" linux="Control+Shift+X" />)
   - Type `@recommended` in the search box to see workspace recommendations
   - Install the extensions you need

## Using the Configuration

Copy the JSON configuration above into a `.vscode/extensions.json` file in your
project. This will prompt team members to install these extensions when they
open the project, ensuring consistent tooling across the team.