VS Code Configuration

Configure Visual Studio Code for the best development experience with the Starter Kit.

Recommended extensions

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

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

Multi-root workspace

If you have multiple related projects, create a workspace file:

my-workspace.code-workspace

{
  "folders": [
    { "path": "./my-app" },
    { "path": "./shared-components" }
  ],
  "settings": {}
}

Format on save

Enable automatic formatting:

Install Prettier extension
Add to settings: "editor.formatOnSave": true
Configure Prettier with .prettierrc

Organize imports

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”)

Recommended extensions

Essential

Recommended

VS Code settings

Project-specific tasks

Launch configuration

Code snippets

Keyboard shortcuts

Workspace tips

Troubleshooting

Next steps

AI Assistants

Testing

​Recommended extensions

​Essential

​Recommended

​VS Code settings

​Project-specific tasks

​Launch configuration

​Code snippets

​Keyboard shortcuts

​Workspace tips

​Troubleshooting

​Next steps

AI Assistants

Testing

Recommended extensions

Essential

Recommended

VS Code settings

Project-specific tasks

Launch configuration

Code snippets

Keyboard shortcuts

Workspace tips

Troubleshooting

Next steps