Skip to main content
Configure Visual Studio Code for the best development experience with the Starter Kit. Install these extensions for optimal development:

​
Essential

ES7+ React/Redux/React-Native snippets
  • Publisher: dsznajder
  • Quick React component scaffolding
Tailwind CSS IntelliSense
  • Publisher: Bradlc
  • Autocomplete for Tailwind classes
  • Class name validation
TypeScript and JavaScript Language Features
  • Built-in with VS Code
  • Enable strict type checking
Prettier - Code formatter
  • Publisher: esbenp
  • Consistent code formatting
  • Auto-format on save
ESLint
  • Publisher: dbaeumer
  • Real-time linting
  • Auto-fix on save
Path Intellisense
  • Publisher: christian-kohler
  • Autocomplete for file paths
Auto Rename Tag
  • Publisher: formulahendry
  • Sync HTML/JSX tag editing

​
VS Code settings

Create .vscode/settings.json in your project:
.vscode/settings.json
{
  // Editor settings
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  
  // TypeScript settings
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.preferences.importModuleSpecifier": "relative",
  
  // Tailwind CSS
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "classList",
    ".*Class.*"
  ],
  
  // Files to exclude
  "files.exclude": {
    "**/.git": true,
    "**/.next": true,
    "**/node_modules": true,
    "**/.DS_Store": true
  },
  
  // Search settings
  "search.exclude": {
    "**/node_modules": true,
    "**/.next": true,
    "**/dist": true,
    "**/build": true
  }
}

​
Project-specific tasks

Create .vscode/tasks.json for quick actions:
.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev",
      "type": "shell",
      "command": "npm run dev",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "test",
      "type": "shell",
      "command": "npm run test",
      "problemMatcher": [],
      "group": {
        "kind": "test",
        "isDefault": true
      }
    },
    {
      "label": "build",
      "type": "shell",
      "command": "npm run build",
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}
Run tasks with Cmd+Shift+B (macOS) or Ctrl+Shift+B (Windows/Linux).

​
Launch configuration

Create .vscode/launch.json for debugging:
.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3004"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

​
Code snippets

Create .vscode/snippets.code-snippets for custom snippets:
.vscode/snippets.code-snippets
{
  "Server Component": {
    "prefix": "rsc",
    "body": [
      "export default async function ${1:ComponentName}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "React Server Component"
  },
  "Client Component": {
    "prefix": "rcc",
    "body": [
      "'use client'",
      "",
      "export function ${1:ComponentName}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "React Client Component"
  },
  "Server Action": {
    "prefix": "rsa",
    "body": [
      "'use server'",
      "",
      "export async function ${1:actionName}(formData: FormData) {",
      "  $0",
      "}"
    ],
    "description": "React Server Action"
  }
}

​
Keyboard shortcuts

Optimize your workflow with these shortcuts: Mac:
  • Cmd+P: Quick file open
  • Cmd+Shift+P: Command palette
  • Cmd+B: Toggle sidebar
  • Cmd+Shift+F: Global search
  • Cmd+Shift+B: Run build task
Windows/Linux:
  • Ctrl+P: Quick file open
  • Ctrl+Shift+P: Command palette
  • Ctrl+B: Toggle sidebar
  • Ctrl+Shift+F: Global search
  • Ctrl+Shift+B: Run build task

​
Workspace tips

If you have multiple related projects, create a workspace file:
my-workspace.code-workspace
{
  "folders": [
    { "path": "./my-app" },
    { "path": "./shared-components" }
  ],
  "settings": {}
}
Enable automatic formatting:
  1. Install Prettier extension
  2. Add to settings: "editor.formatOnSave": true
  3. Configure Prettier with .prettierrc
Sort imports automatically:
"editor.codeActionsOnSave": {
  "source.organizeImports": "explicit"
}

​
Troubleshooting

Common issues:
  • TypeScript not working: Reload window (Cmd+Shift+P → “Reload Window”)
  • Prettier conflicts: Disable other formatters for JavaScript/TypeScript
  • IntelliSense slow: Restart TS server (Cmd+Shift+P → “TypeScript: Restart TS Server”)

​
Next steps

AI Assistants

Set up AI coding assistants

Testing

Configure testing in VS Code