Personaliza VS Code como un pro

Guía completa para transformar VS Code en tu editor ideal. Desde los ajustes esenciales en settings.json hasta perfiles, atajos y sincronización.

settings.json: el corazón de la configuración

El archivo settings.json es donde ocurre la magia. Puedes abrirlo con Cmd+Shift+P y buscar "Preferences: Open User Settings (JSON)". Aquí tienes una configuración de partida sólida:

{
  "editor.fontFamily": "'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,
  "editor.letterSpacing": 0.5,

  "editor.minimap.enabled": true,
  "editor.minimap.side": "right",
  "editor.minimap.scale": 1,

  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.smoothScrolling": true,
  "editor.renderWhitespace": "boundary",
  "editor.rulers": [80, 100],

  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always",
    "source.organizeImports": "always"
  },

  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.autoSave": "onFocusChange",
  "workbench.startupEditor": "none",
  "extensions.ignoreRecommendations": false
}

Tema y color

VS Code permite personalizar cada aspecto visual. Puedes elegir un tema de la tienda y luego sobreescribir colores concretos:

"workbench.colorTheme": "One Dark Pro Darker",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
  "[One Dark Pro Darker]": {
    "editor.background": "#1a1a1a",
    "sideBar.background": "#141414",
    "activityBar.background": "#111111",
    "tab.activeBackground": "#1a1a1a",
    "editorLineNumber.activeForeground": "#abb2bf"
  }
}

El objeto workbench.colorCustomizations te permite afinar colores por tema. Usa Cmd+Shift+P → "Developer: Generate Color Theme From Current Settings" para ver todos los tokens disponibles.

keybindings.json: tus atajos, tu ritmo

Los atajos por defecto están bien, pero los mejores son los tuyos. Abre Cmd+K Cmd+S y busca "Open Keyboard Shortcuts (JSON)":

[
  {
    "key": "ctrl+shift+up",
    "command": "editor.action.insertCursorAbove",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+down",
    "command": "editor.action.insertCursorBelow",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+up",
    "command": "editor.action.moveLinesUpAction",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+down",
    "command": "editor.action.moveLinesDownAction",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+shift+7",
    "command": "editor.action.commentLine",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "cmd+d",
    "command": "editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus"
  }
]

Estos atajos cubren el 90% del día a día: cursores múltiples, mover líneas, comentar y selección incremental. Memorízalos y notarás la diferencia.

Workspace vs User settings

VS Code tiene tres niveles de configuración:

• User settings — globales, aplican a todos los proyectos. Ideal para fuente, tema, atajos.
• Workspace settings — en .vscode/settings.json dentro del proyecto. Se comparte en el repo. Ideal para formatter, linter, reglas del equipo.
• Folder settings — cuando tienes proyectos multi-root, cada carpeta puede tener sus propios settings.

Las workspace settings sobreescriben a las user settings. Es buena práctica poner en workspace solo lo que es específico del proyecto:

// .vscode/settings.json (se comparte en el repo)
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "tailwindCSS.experimental.configRegex": [],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Recomendaciones de extensiones por proyecto

Puedes recomendar extensiones a tu equipo desde .vscode/extensions.json. Cuando alguien abra el proyecto, VS Code le sugerirá instalarlas:

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "github.copilot"
  ]
}

Perfiles (Profiles)

Desde VS Code 1.76 puedes crear perfiles independientes con su propio conjunto de settings, keybindings y extensiones. Son ideales si trabajas en varios roles:

• Frontend — extensiones: ESLint, Prettier, Tailwind CSS IntelliSense, ES7+ React snippets. Tema: One Dark Pro.
• Backend — extensiones: Thunder Client, SQLTools, Docker, YAML. Tema: Catppuccin Mocha.
• IA / Data — extensiones: GitHub Copilot, Continue.dev, Jupyter, Python. Tema: GitHub Dark Default.
• General — el perfil por defecto, limpio y minimalista.

Para crear un perfil: Cmd+Shift+P → "Profiles: Create Profile". Puedes exportarlo a un archivo y compartirlo con tu equipo.

Settings Sync

Activa Settings Sync con tu cuenta de GitHub para llevar la configuración a todas tus máquinas. Sincroniza:

• settings.json y keybindings.json
• Extensiones instaladas
• Fragmentos (snippets)
• Temas y configuraciones de UI
• Tiles (layouts de ventana)

Actívalo desde Cmd+Shift+P → "Settings Sync: Turn On". VS Code sube los cambios automáticamente. Si algo se rompe, puedes recuperar versiones anteriores desde el comando "Settings Sync: Show Synced Data".

Checklist rápido

Si empiezas de cero, por este orden:

• 1. Elige un tema de la tienda (One Dark Pro, Catppuccin, GitHub Dark)
• 2. Configura fuente con ligaduras (JetBrains Mono, Cascadia Code)
• 3. settings.json básico: formatOnSave, bracket pair colors, font
• 4. Instala tus extensiones imprescindibles
• 5. Añade keybindings personalizados
• 6. Activa Settings Sync
• 7. Crea perfiles si trabajas en múltiples roles

VS Code es tuyo. Cada ajuste que hagas es tiempo que recuperas mañana. Dedica una hora a configurarlo bien y te cambiará el día a día.