IDE & Tooling

Cursor/VS Code extensions, formatters, and debug configurations.

UXDL standardizes on Cursor (VS Code–compatible). These settings keep formatting, linting, and debugging consistent across teams.

Recommended extensions

Extension	ID	Purpose
ESLint	`dbaeumer.vscode-eslint`	Lint on save
Prettier	`esbenp.prettier-vscode`	Code formatting
Tailwind CSS IntelliSense	`bradlc.vscode-tailwindcss`	Tailwind class completion
GitLens	`eamodio.gitlens`	Blame and history
Error Lens	`usernamehw.errorlens`	Inline errors
MDX	`unifiedjs.vscode-mdx`	MDX syntax (docs repos)
Docker	`ms-azuretools.vscode-docker`	Compose and Dockerfile support
Thunder Client	`rangav.vscode-thunder-client`	REST API testing (optional)

Backend-specific (install as needed):

Extension	Purpose
Drizzle ORM snippets / SQLTools	PostgreSQL query exploration
MongoDB for VS Code	Document inspection

Workspace settings

Add to .vscode/settings.json in your repo (or user settings):

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "files.exclude": {
    "**/.next": true,
    "**/dist": true
  }
}

Debug configurations

Add to .vscode/launch.json:

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "pnpm",
      "runtimeArgs": ["dev"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Express API (tsx)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "pnpm",
      "runtimeArgs": ["exec", "tsx", "watch", "src/server.ts"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Attach to process",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Config	Use when
Next.js: debug server	Stepping through SSR, API routes, middleware
Express API (tsx)	Backend breakpoints in routes, services, middleware
Attach to process	Debugging a already-running `node --inspect` process

Cursor-specific tips

Use the workspace Rules file (.cursor/rules) if your repo has one — it encodes UXDL conventions for AI assistance
Index large monorepos once after clone (Cursor: Resync Index)
Prefer workspace TypeScript version over the editor bundled version (setting above)

Shell aliases (optional)

Add to ~/.zshrc:

bash

alias p="pnpm"
alias pd="pnpm dev"
alias pl="pnpm lint && pnpm typecheck"
alias dc="docker compose"
alias uxdl="cd ~/uxdl"

Git hooks

All UXDL repos use Husky pre-commit hooks for lint and typecheck. Do not bypass with --no-verify unless your team lead approves it for a hotfix.

bash

# Hooks install automatically on pnpm install via "prepare" script
pnpm install

CLI tools worth knowing

Tool	Install	Purpose
`gh`	`brew install gh`	PRs, checks, repo clone
`aws`	`brew install awscli`	SSO, S3, ECS
`docker`	Docker Desktop	Local databases
`pnpm`	`corepack enable`	Package management