IDE

The .vscode folder standardizes the development environment for Visual Studio Code, ensuring consistent formatting and debugging for Next.js projects.

launch.json

This file defines debugging configurations for Next.js in Visual Studio Code.

It provides three tailored setups to debug different aspects of your application: server-side debugging runs npm run dev to troubleshoot server-side code, client-side debugging launches a Chrome browser instance to inspect the frontend at http://localhost:3000, and full-stack debugging combines both by starting the server and automatically opening Chrome when the app is ready.

These configurations simplify identifying and resolving issues in your Next.js application, ensuring a smooth development process.

{
  "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:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

settings.json

This file configures Visual Studio Code’s formatting and linting behavior to maintain consistent code style across your project.

It designates Prettier as the default formatter for TypeScript React (.tsx) and JSON files, enables format-on-save to automatically format code, and activates ESLint’s auto-fix feature to resolve linting issues on save.

These settings ensure that all team members produce code with uniform styling and fewer errors, improving readability and reducing merge conflicts.

By customizing these settings, you can adapt the IDE to support additional file types or align with your team’s preferred coding standards.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}