📝 Configuración VS Code

Setup profesional de VS Code para desarrollo Next.js con TypeScript y Tailwind.

📋 Contexto

VS Code con la configuración correcta compite con cualquier IDE. Esta guía optimiza el entorno para Next.js.

🎯 Objetivo

Configurar VS Code con:

• Extensiones esenciales
• ESLint + Prettier integrados
• TypeScript estricto
• Tailwind IntelliSense
• shadcn/ui

📦 Extensiones

Instalación por CLI

# Esenciales Next.js/React
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension ms-vscode.vscode-typescript-next

# Utilidades
code --install-extension christian-kohler.path-intellisense
code --install-extension eamodio.gitlens
code --install-extension usernamehw.errorlens

⚙️ Configuración

settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
  "files.exclude": {
    "**/.next": true,
    "**/node_modules": true
  }
}

ESLint (.eslintrc.json)

{
  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_"
      }
    ],
    "no-console": ["warn", { "allow": ["warn", "error"] }]
  }
}

Prettier (.prettierrc)

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

🎨 Tailwind Config

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./src/app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
      },
    },
  },
};

export default config;

✅ Checklist

• Extensiones instaladas
• settings.json creado
• ESLint configurado
• Prettier configurado
• TypeScript stricto
• Tailwind IntelliSense funciona
• Format on save activado

📚 Referencias

• VS Code
• ESLint
• Prettier