Recommended VS Code Extensions

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:

{
  "recommendations": [
    "aaron-bond.better-comments",
    "biomejs.biome",
    "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

• Biome (biomejs.biome) - Fast formatter, linter, and more for JavaScript, TypeScript, JSX, and JSON
• 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 ( Command + Shift + X CommandShiftX Control + Shift + X ControlShiftX Control + Shift + X ControlShiftX )
   • 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.