EditorConfig y configuración de VS Code

Asegura un comportamiento consistente del editor en tu equipo con EditorConfig, configuración del espacio de trabajo de VS Code y extensiones recomendadas.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

# Crea los tres archivos de configuración
touch .editorconfig
mkdir -p .vscode
touch .vscode/settings.json
touch .vscode/extensions.json

Cuándo usarlo: Cualquier proyecto con múltiples contribuyentes, especialmente cuando los miembros del equipo usan diferentes editores o configuraciones de VS Code.

Ejemplo de Trabajo

# .editorconfig
root = true
 
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
 
[*.md]
trim_trailing_whitespace = false
 
[Makefile]
indent_style = tab

// .vscode/settings.json
{
  // Formateo
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
 
  // Formateadores específicos del idioma
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
 
  // ESLint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
 
  // Archivos
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/.next": true,
    "**/node_modules": true,
    "**/out": true
  },
 
  // TypeScript
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "yoavbls.pretty-ts-errors",
    "streetsidesoftware.code-spell-checker"
  ]
}

Lo que esto demuestra:

• .editorconfig asegura que la configuración básica del editor (indentación, finales de línea) funcione en todos los editores
• .vscode/settings.json configura formateo al guardar, integración con ESLint y preferencias de TypeScript
• .vscode/extensions.json solicita a los miembros del equipo instalar extensiones recomendadas

Análisis Profundo

Cómo Funciona

• EditorConfig es un estándar compatible con la mayoría de editores (VS Code, IntelliJ, Vim, etc.) sin plugins (VS Code necesita la extensión EditorConfig.EditorConfig)
• .vscode/settings.json en la raíz del proyecto actúa como configuración del espacio de trabajo, anulando la configuración del usuario para este proyecto
• .vscode/extensions.json activa un mensaje de "extensiones recomendadas" cuando los miembros del equipo abren el proyecto
• Formateo al guardar ejecuta el formateador configurado cada vez que guardas un archivo
• source.fixAll.eslint ejecuta la auto-corrección de ESLint al guardar, arreglando problemas de linting junto con el formateo

Variaciones

Para Biome en lugar de Prettier + ESLint:

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

// .vscode/extensions.json
{
  "recommendations": [
    "biomejs.biome",
    "bradlc.vscode-tailwindcss"
  ]
}

Desabilitar formateo al guardar para lenguajes específicos:

{
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

Referencia de opciones de EditorConfig:

Notas de TypeScript

// Configuración de VS Code que mejoran la experiencia de desarrollo de TypeScript:
// - "typescript.preferences.importModuleSpecifier": "non-relative"
//   → Usa alias de ruta (@/components) en lugar de ../../../
//
// - "typescript.suggest.autoImports": true
//   → Sugerencias de auto-importación mientras escribes
//
// - "typescript.tsdk": "node_modules/typescript/lib"
//   → Usa la versión de TypeScript del proyecto, no la integrada de VS Code

Trampas

Cosas que te pueden morder. Cada trampa incluye qué sale mal, por qué sucede y la solución.

• EditorConfig vs conflictos de Prettier - EditorConfig establece indent_size = 4 pero Prettier usa tabWidth: 2. Prettier gana para archivos formateados, pero nuevos archivos creados por el editor usan el valor de EditorConfig. Solución: Mantén la configuración de EditorConfig y Prettier sincronizadas.

• .vscode/ en .gitignore - Algunas plantillas agregan .vscode/ a .gitignore. Solución: Realiza commit de .vscode/settings.json y .vscode/extensions.json para consistencia del equipo. Agrega .vscode/*.code-workspace y .vscode/launch.json a .gitignore en su lugar (esos son personales).

• Formateo al guardar no funciona - Múltiples formateadores están instalados y VS Code no sabe cuál usar. Solución: Establece "editor.defaultFormatter" globalmente y por idioma. VS Code te solicita elegir cuando es ambiguo.

• Arreglado ESLint en guardado entra en conflicto con formateo al guardar - Ambos se ejecutan al guardar y pueden producir cambios competidores. Solución: Usa eslint-config-prettier para desabilitar las reglas de formateo de ESLint, para que ESLint solo arregle problemas de calidad de código al guardar.

Alternativas

Otras formas de resolver el mismo problema - y cuándo cada una es la mejor opción.

Preguntas Frecuentes

{
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

{ "typescript.tsdk": "node_modules/typescript/lib" }

{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true
}

Relacionado

• Configuración de Prettier - formateo al guardar necesita Prettier configurado
• Configuración de ESLint para Next.js - configuración de arreglado ESLint al guardar
• Integración de ESLint + Prettier - evita conflictos con formateo al guardar
• Husky & lint-staged - captura lo que formateo al guardar pierde