Tema 3 · settings.json

3. Configuración Profesional: settings.json, Auto Save, Perfiles y Settings Sync

Personaliza el comportamiento del editor mediante JSON, diferencia ajustes globales de ajustes de proyecto y sincroniza tu cuenta en la nube.

2. Anatomía de la Interfaz, Activity Bar y la Paleta de Comandos (Ctrl+Shift+P) 4. Atajos de Teclado Esenciales: Navegación, Movimiento y Duplicación de Líneas

El Poder de settings.json: Ajustes de Usuario vs Espacio de Trabajo

Aunque VS Code ofrece una interfaz gráfica de configuración al presionar Ctrl + , (Control + Coma), todos los ajustes se guardan internamente en un archivo llamado settings.json. Los desarrolladores profesionales prefieren editar este archivo directamente porque permite copiar, respaldar y compartir toda su configuración en segundos.

VS Code maneja dos niveles de configuración con prioridad en cascada:

  • User Settings (Configuración de Usuario): Aplica globalmente a todos los proyectos que abras en tu computadora (tema visual, fuente, tamaño de letra, autoguardado).
  • Workspace Settings (.vscode/settings.json): Se guarda dentro de la carpeta del proyecto actual y sobreescribe los ajustes globales. Es ideal para estandarizar reglas de equipo (ej: 4 espacios en PHP y 2 espacios en HTML/JS).

Ajustes Esenciales que Todo Desarrollador Web Debe Activar

Propiedad en settings.json Valor Recomendado Beneficio Inmediato
files.autoSave "afterDelay" (1000 ms) o "onFocusChange" Evita perder cambios o recargar el navegador olvidando presionar Ctrl+S.
editor.formatOnSave true Indenta y ordena el código automáticamente cada vez que se guarda el archivo.
editor.wordWrap "on" Ajusta las líneas largas al ancho de la pantalla sin tener que hacer scroll horizontal.
editor.linkedEditing true Al renombrar una etiqueta HTML de apertura (ej. <div> a <section>), cambia sola la de cierre.
editor.bracketPairColorization.enabled true Pinta cada par de llaves {} y paréntesis () de un color distinto de forma nativa.
☁️ Settings Sync (Sincronización en la Nube): Haz clic en el icono de engranaje inferior izquierdo y selecciona Backup and Sync Settings... iniciando sesión con tu cuenta de GitHub. Tus atajos, temas, snippets y extensiones viajarán contigo a cualquier computadora que uses.

⚡ Archivo settings.json Optimizado para Desarrollo Web Full-Stack

Configuración profesional lista para copiar y pegar en Preferences: Open User Settings (JSON).

settings.json
Solo lectura 
{
  // --- Guardado y Formato Automático ---
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // --- Tipografía, Cursores y Ayudas Visuales ---
  "editor.fontSize": 15,
  "editor.lineHeight": 24,
  "editor.fontLigatures": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.linkedEditing": true,
  "editor.minimap.enabled": false,

  // --- Reglas Específicas por Lenguaje ---
  "[html]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[php]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },

  // --- Emmet y Explorador de Archivos ---
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "php": "html"
  },
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.compactFolders": false
}
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Qué propiedad nativa de settings.json actualiza automáticamente la etiqueta HTML de cierre cuando editas la etiqueta de apertura, sin necesitar extensiones externas?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Visual Studio Code & GitHub Copilot Profesional y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.