Settings json

Personalizar VSCode en settings.json

El archivo settings.json representa el núcleo de la personalización avanzada de Visual Studio Code, permitiendo acceder a configuraciones que no están disponibles en la interfaz gráfica. Este archivo utiliza el formato JSON estándar y ofrece un control granular sobre prácticamente todos los aspectos del editor.

Acceso al archivo settings.json

Para acceder al archivo de configuración JSON, utiliza la paleta de comandos con Ctrl+Shift+P y busca "Open Settings JSON". Esta acción abrirá directamente el archivo de configuración en formato JSON, donde podrás realizar modificaciones avanzadas.

{
    "editor.fontSize": 14,
    "workbench.colorTheme": "Dark+ (default dark)",
    "terminal.integrated.fontSize": 12
}

Alternativamente, puedes acceder desde la interfaz de configuración haciendo clic en el icono de archivo que aparece en la esquina superior derecha cuando tienes abierta la pestaña de Settings.

Diferencias entre User Settings y Workspace Settings

VSCode maneja dos niveles de configuración que siguen una jerarquía específica:

User Settings se aplican globalmente a todas las instancias de VSCode y se almacenan en:

• Windows: %APPDATA%\Code\User\settings.json
• macOS: ~/Library/Application Support/Code/User/settings.json
• Linux: ~/.config/Code/User/settings.json

Workspace Settings tienen prioridad sobre las configuraciones de usuario y se almacenan en .vscode/settings.json dentro de la carpeta del proyecto. Estas configuraciones solo afectan al workspace actual.

// User Settings (globales)
{
    "editor.tabSize": 4,
    "editor.insertSpaces": true
}

// Workspace Settings (específicas del proyecto)
{
    "editor.tabSize": 2,
    "python.defaultInterpreterPath": "./venv/bin/python"
}

Estructura y sintaxis del archivo JSON

El archivo settings.json sigue la estructura JSON estándar con pares clave-valor. Cada configuración utiliza una notación de puntos para organizar las opciones jerárquicamente:

{
    "editor.wordWrap": "on",
    "editor.minimap.enabled": false,
    "workbench.startupEditor": "none",
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000
}

Las claves de configuración siguen el patrón categoria.subcategoria.opcion, lo que facilita la organización y búsqueda de opciones específicas.

Configuraciones avanzadas del editor

El namespace editor contiene configuraciones que no están disponibles en la interfaz gráfica:

{
    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.smoothScrolling": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.inlineSuggest.enabled": true,
    "editor.suggest.preview": true
}

Para mejorar la experiencia de escritura, puedes configurar opciones avanzadas de autocompletado:

{
    "editor.acceptSuggestionOnCommitCharacter": false,
    "editor.acceptSuggestionOnEnter": "smart",
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "on"
}

Personalización del workbench

Las configuraciones del workbench controlan la apariencia y comportamiento de la interfaz:

{
    "workbench.editor.enablePreview": false,
    "workbench.editor.showTabs": "multiple",
    "workbench.editor.tabSizing": "shrink",
    "workbench.activityBar.location": "top",
    "workbench.statusBar.visible": true,
    "workbench.tree.indent": 20
}

Para optimizar el flujo de trabajo, puedes configurar el comportamiento de las pestañas y paneles:

{
    "workbench.editor.limit.enabled": true,
    "workbench.editor.limit.value": 10,
    "workbench.editor.closeOnFileDelete": true,
    "workbench.panel.defaultLocation": "right"
}

Configuración avanzada del terminal

El terminal integrado ofrece opciones de personalización extensas a través de JSON:

{
    "terminal.integrated.fontFamily": "Fira Code",
    "terminal.integrated.fontSize": 13,
    "terminal.integrated.lineHeight": 1.2,
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.cursorStyle": "line",
    "terminal.integrated.scrollback": 10000
}

Para configuraciones específicas por sistema operativo:

{
    "terminal.integrated.profiles.windows": {
        "PowerShell": {
            "source": "PowerShell",
            "args": ["-NoProfile"]
        }
    },
    "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Configuraciones específicas por lenguaje

VSCode permite configuraciones específicas por lenguaje utilizando la sintaxis de corchetes:

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.tabSize": 2
    },
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter",
        "editor.formatOnSave": true,
        "editor.tabSize": 4
    },
    "[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": {
            "comments": "off",
            "strings": "off",
            "other": "off"
        }
    }
}

Configuración de keybindings.json

El archivo keybindings.json permite personalizar atajos de teclado de forma avanzada. Accede a él mediante Ctrl+Shift+P y busca "Open Keyboard Shortcuts JSON":

[
    {
        "key": "ctrl+shift+alt+f",
        "command": "editor.action.formatDocument"
    },
    {
        "key": "ctrl+k ctrl+d",
        "command": "editor.action.duplicateSelection"
    },
    {
        "key": "alt+up",
        "command": "editor.action.moveLinesUpAction",
        "when": "editorTextFocus"
    }
]

Para deshabilitar atajos existentes:

[
    {
        "key": "ctrl+shift+p",
        "command": "-workbench.action.showCommands"
    }
]

Validación y corrección de errores

VSCode proporciona validación automática del JSON. Los errores aparecen subrayados en rojo con información detallada al pasar el cursor:

{
    "editor.fontSize": 14,
    "invalid.setting": true, // Error: configuración no válida
    "editor.tabSize": "4"    // Error: tipo incorrecto (debería ser número)
}

Para verificar la sintaxis, utiliza Ctrl+Shift+P y busca "Validate JSON" o simplemente observa los indicadores visuales en el editor.

Backup y restauración de configuraciones

Para crear un backup de configuraciones, copia los archivos:

• settings.json
• keybindings.json
• Carpeta .vscode (para configuraciones de workspace)

# Ejemplo de backup en sistemas Unix
cp ~/.config/Code/User/settings.json ~/backup/settings-backup.json
cp ~/.config/Code/User/keybindings.json ~/backup/keybindings-backup.json

La restauración consiste en reemplazar los archivos originales con las copias de seguridad. VSCode aplicará automáticamente los cambios al reiniciar.

Configuraciones avanzadas de rendimiento

Para optimizar el rendimiento en proyectos grandes:

{
    "files.watcherExclude": {
        "**/node_modules/**": true,
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/*.code-search": true
    },
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/node_modules": true
    }
}

Estas configuraciones JSON te permiten personalizar VSCode más allá de las opciones disponibles en la interfaz gráfica, creando un entorno de desarrollo verdaderamente adaptado a tus necesidades específicas.

Contexto histórico: del .ini al JSON con esquema

Durante décadas, la configuración de aplicaciones en Windows se almacenaba en archivos INI, con una sintaxis sencilla pero limitada. Más tarde llegaron los archivos XML, más expresivos pero verbosos. La irrupción de JSON como formato universal para intercambio de datos en la web lo convirtió en la elección natural para editores modernos. Visual Studio Code dio un paso más al añadir un esquema JSON público con miles de claves documentadas, lo que habilita autocompletado, validación en tiempo real y documentación al pasar el ratón. Esta combinación ha establecido un nuevo estándar de facto en la configuración de herramientas de desarrollo.

Atajos de teclado adicionales

Además del atajo principal, existen comandos útiles para trabajar con settings.json:

• Ctrl + ,: abre Settings en modo gráfico.
• Ctrl + Shift + P y Preferences: Open User Settings (JSON): abre el settings.json del usuario.
• Ctrl + Shift + P y Preferences: Open Workspace Settings (JSON): abre el settings.json del workspace actual.
• Ctrl + Shift + P y Preferences: Open Default Settings (JSON): muestra los valores por defecto de todas las claves.
• Ctrl + Shift + P y Preferences: Configure Language Specific Settings: crea un bloque [language] preconfigurado.
• Ctrl + Espacio dentro del archivo: dispara el autocompletado con todas las claves disponibles.
• F1 sobre una clave: muestra la documentación asociada.

Ejemplo paso a paso: configurar un workspace para un proyecto Vue 3

Imagina que empiezas un proyecto Vue 3 con TypeScript y quieres establecer reglas comunes para todo el equipo:

1. Crea la carpeta .vscode/ en la raíz del proyecto.
2. Añade un archivo settings.json con la siguiente configuración base:

   {
     "editor.tabSize": 2,
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[vue]": {
       "editor.defaultFormatter": "Vue.volar"
     },
     "[typescript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "files.exclude": {
       "**/node_modules": true,
       "**/dist": true
     },
     "typescript.tsdk": "node_modules/typescript/lib"
   }
   

3. Haz commit del archivo en Git para que todos los miembros del equipo lo reciban.
4. Añade .vscode/extensions.json con las extensiones recomendadas (Volar, ESLint, Prettier).
5. Al abrir el proyecto en otro equipo, VS Code detectará automáticamente las reglas y sugerirá instalar las extensiones.

Tabla comparativa: User Settings frente a Workspace Settings

| Aspecto | User Settings | Workspace Settings | |---------|---------------|---------------------| | Ubicación | Carpeta del usuario | .vscode/settings.json | | Alcance | Todas las instancias | Solo el proyecto actual | | Prioridad | Baja | Alta (sobrescribe user) | | Versionado | No (salvo dotfiles) | Sí (en Git) | | Uso típico | Preferencias personales | Reglas del proyecto | | Comparte con equipo | No | Sí |

Errores comunes al editar settings.json

Varios tropiezos habituales:

• Comas finales: JSON estándar no las permite, aunque VS Code es tolerante; pueden causar problemas en otros lectores.
• Comillas simples: no son válidas en JSON; usa siempre comillas dobles.
• Rutas de Windows sin escapar: hay que usar \\ en lugar de \, o preferiblemente /.
• Olvidar las llaves al bloque por lenguaje: la sintaxis correcta es "[python]": { ... }, no "python": { ... }.
• Configuraciones duplicadas: si defines la misma clave dos veces, solo la última tiene efecto; el editor avisa con una advertencia.

Mejores prácticas en equipos

Para sacar partido al máximo en entornos colaborativos:

• Mantener un .vscode/settings.json mínimo y enfocado en reglas del proyecto, evitando configuraciones personales.
• Documentar en el README.md qué claves contiene y por qué, especialmente si son poco habituales.
• Versionar extensions.json junto a settings.json para garantizar entornos coherentes.
• Revisar el archivo en pull requests: un cambio en las reglas de formato afecta a todo el equipo y merece discusión.
• Usar settingsSync.ignoredSettings para excluir claves que dependen de la ruta local (python.pythonPath, java.home) y evitar que contaminen otros equipos.