Tabla de contenido

Pasas horas al día frente a tu editor de código. Que se vea bien no es vanidad: un buen tema reduce la fatiga visual, una buena fuente hace más legible el código, y un entorno que te gusta te hace más cómodo trabajar. Además, personalizarlo te da una sensación de control sobre tu herramienta de trabajo.

¿Por qué personalizar tu editor?

Un editor bien configurado:

  • Reduce errores de lectura: buen contraste y sintaxis clara evitan que confundas caracteres similares como 0 y O, l y 1
  • Mejora la velocidad: íconos que identifican tipos de archivo de un vistazo, fuentes con ligaduras que hacen el código más expresivo
  • Cuida tu vista: temas oscuros bien balanceados reducen el cansancio en sesiones largas

Los mejores temas de color

One Dark Pro — El más popular de la comunidad. Basado en el tema de Atom, con excelente contraste y soporte para casi todos los lenguajes.

Dracula Official — Oscuro con acentos vibrantes (púrpura, rosa, verde). Muy reconocible y muy querido en la comunidad.

Andromeda — Mi favorito personal. Colores saturados pero no agresivos, excelente para JavaScript y PHP. Oscuro con acentos dorados y verdes.

GitHub Dark — Para quien prefiere algo más sobrio y familiar. El mismo tema que usa github.com.

Catppuccin — Más suave que otros temas oscuros, con tonos pasteles. Cuatro variantes: Latte (claro), Frappé, Macchiato y Mocha.

Night Owl — Diseñado específicamente pensando en accesibilidad y reducción de fatiga. Muy recomendado para sesiones largas.

Cómo instalar un tema:

  1. Cmd+Shift+P → “Extensions: Install Extensions”
  2. Busca el nombre del tema
  3. Instala y activa

O directamente: Cmd+K Cmd+T para abrir el selector de temas.

Fuentes para programar

No todas las fuentes son iguales para código. Las mejores tienen:

  • Ligaduras: combinan caracteres como =>, !==, >= en un solo símbolo visual
  • Ancho fijo (monoespaciada): todos los caracteres tienen el mismo ancho, el código se alinea correctamente
  • Distinción clara entre caracteres confundibles: 0 vs O, l vs 1 vs I

Fira Code — La más popular. Gratis, open source, excelentes ligaduras. Es la que uso.

JetBrains Mono — De los creadores de IntelliJ. Diseñada específicamente para reducir fatiga en sesiones largas.

Cascadia Code — La fuente oficial de Microsoft para VS Code y Windows Terminal.

Hack — Minimalista, muy legible, sin ligaduras (para quienes las prefieren desactivadas).

Instalar Fira Code en Mac:

brew install --cask font-fira-code

Instalar en Ubuntu:

sudo apt install fonts-firacode

En Windows: descarga desde github.com/tonsky/FiraCode e instala.

Paquetes de íconos

Los paquetes de íconos le añaden íconos a los archivos en el explorador de VS Code, lo que hace mucho más fácil identificar los tipos de archivo de un vistazo.

Material Icon Theme — El más completo y popular. Tiene íconos para prácticamente cualquier extensión de archivo y tipo de carpeta.

VSCode Icons — Alternativa con estilo diferente, también muy completo.

Para instalarlo: busca en extensiones y actívalo con Cmd+Shift+P → “File Icon Theme”.

Configuración del settings.json

Toda la personalización de VS Code se guarda en settings.json. Para abrirlo: Cmd+Shift+P → “Open User Settings (JSON)”.

{
  // Fuente y tipografía
  "editor.fontFamily": "Fira Code, 'Cascadia Code', Menlo, monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontLigatures": true,        // activa las ligaduras

  // Cursor y edición
  "editor.cursorStyle": "line",
  "editor.cursorBlinking": "smooth",
  "editor.wordWrap": "on",             // ajusta líneas largas
  "editor.minimap.enabled": false,     // desactiva el minimapa (ahorra espacio)

  // Formateo automático
  "editor.formatOnSave": true,         // formatea al guardar
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Indentación
  "editor.tabSize": 2,
  "editor.insertSpaces": true,

  // Explorador
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Andromeda",

  // Terminal
  "terminal.integrated.fontFamily": "Fira Code",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.osx": "zsh",

  // Comportamiento del editor
  "files.autoSave": "onFocusChange",   // guarda al cambiar de archivo
  "editor.bracketPairColorization.enabled": true,  // colorea pares de corchetes
  "editor.guides.bracketPairs": true,

  // Extensiones específicas
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  }
}

Mi configuración completa

Esta es la configuración que uso diariamente:

  • Tema: Andromeda (oscuro, acentos dorados)
  • Fuente: Fira Code 14px con ligaduras activadas
  • Íconos: Material Icon Theme
  • Format on save: activado con Prettier
  • Minimap: desactivado (prefiero más espacio de código)
  • Bracket colorization: activado (hace mucho más fácil ver los pares de llaves)

Un tip importante: no copies configuraciones de otros sin entender qué hace cada opción. Empieza con lo básico (tema, fuente, formateo) y ve añadiendo opciones conforme las necesites.