Developer Environment & VS Code Extension Setup Guide

A complete guide to setting up an optimized VS Code environment for modern web development, featuring code formatting, linting, git visualizations, and AI assistance.

---

1. Essential VS Code Extensions

Install the following key extensions from the VS Code Marketplace (Ctrl+P or Cmd+P, then paste the installation command):

ESLint

Integrates ESLint into VS Code to catch code quality issues and potential bugs on the fly.

• Extension ID: dbaeumer.vscode-eslint
• Quick Install: ext install dbaeumer.vscode-eslint

Prettier - Code Formatter

Enforces a consistent code style by parsing your code and re-printing it with its own rules.

• Extension ID: esbenp.prettier-vscode
• Quick Install: ext install esbenp.prettier-vscode

GitHub Copilot & Copilot Chat

AI-powered pair programmer to auto-complete code, write tests, and explain complex snippets.

• Extension ID: GitHub.copilot and GitHub.copilot-chat
• Quick Install: ext install GitHub.copilot

Git Graph

View a Git Graph of your repository, and easily perform Git actions right from the graph view.

• Extension ID: mhutchie.git-graph
• Quick Install: ext install mhutchie.git-graph

VSCode Icons

Adds clean, distinct file icons to the file explorer for quick visual navigation.

• Extension ID: vscode-icons-team.vscode-icons
• Quick Install: ext install vscode-icons-team.vscode-icons

---

2. Recommended settings.json Configuration

To ensure Prettier and ESLint work seamlessly together on every save, add the following configuration to your VS Code user or workspace settings (Ctrl+Shift+P -> Preferences: Open User Settings (JSON)):

codeCopy
{
  // Set Prettier as default formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

  // ESLint Auto-fix settings
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // Icon Theme
  "workbench.iconTheme": "vscode-icons",

  // Copilot Autocomplete
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true
  }
}