IDE

Plainform includes VS Code configuration for consistent formatting, debugging, and development experience.

Recommended Extensions

Install these extensions for the best development experience:

Essential:

• ESLint (dbaeumer.vscode-eslint) - Linting and auto-fix
• Prettier (esbenp.prettier-vscode) - Code formatting
• Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) - Tailwind autocomplete

Highly Recommended:

• Prisma (Prisma.prisma) - Database schema syntax
• MDX (unifiedjs.vscode-mdx) - MDX file support
• TypeScript Error Translator (mattpocock.ts-error-translator) - Better TS errors
• Pretty TypeScript Errors (yoavbls.pretty-ts-errors) - Readable type errors

Optional:

• GitLens (eamodio.gitlens) - Git history and blame
• Error Lens (usernamehw.errorlens) - Inline error display
• Import Cost (wix.vscode-import-cost) - Bundle size awareness

VS Code Settings

The .vscode/settings.json file configures formatting and linting:

{
  "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"
  },
  "typescript.autoClosingTags": false
}

What this does:

• Formats code with Prettier on save
• Auto-fixes ESLint issues on save
• Uses Prettier for .tsx and .json files
• Disables auto-closing tags (personal preference)

Debugging Configuration

The .vscode/launch.json provides three debug modes:

{
  "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"
  }
}

How to Debug

1. Set breakpoints by clicking left of line numbers
2. Press F5 or click "Run and Debug" in sidebar
3. Select debug configuration
4. Code pauses at breakpoints
5. Inspect variables, step through code

Useful Shortcuts

Workspace Settings

Add these to your personal settings.json for better DX:

{
  // Auto-save files
  "files.autoSave": "onFocusChange",
  
  // Organize imports on save
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  },
  
  // Tailwind CSS sorting
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  
  // TypeScript settings
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  
  // File nesting (cleaner explorer)
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.ts": "${capture}.test.ts, ${capture}.spec.ts",
    "*.tsx": "${capture}.test.tsx, ${capture}.spec.tsx"
  }
}

Troubleshooting

Next Steps

• Environment Variables - Configure your environment
• Git Workflow - Commit conventions and hooks
• Build & Deploy - Production deployment