Cómo usar VS Code como un profesional: extensiones y atajos esenciales

Visual Studio Code se ha convertido en el editor de código más usado del mundo, y no es casualidad. Es gratuito, rápido, altamente configurable y tiene un ecosistema de extensiones enorme. Pero la mayoría de los desarrolladores usa solo una fracción de su potencial: instalan dos o tres extensiones populares y escriben código de la misma manera que lo harían en el Bloc de notas.

En esta guía vas a ver las extensiones que marcan una diferencia real en el día a día, los atajos de teclado que más tiempo ahorran, y las configuraciones que hacen de VS Code un entorno verdaderamente profesional.

Configuración base antes de empezar

Antes de instalar extensiones, hay una configuración inicial que mejora la experiencia de trabajo considerablemente. Abre el archivo de configuración con Ctrl+Shift+P y escribe "Open User Settings JSON".

// settings.json — configuración recomendada como punto de partida
{
  // Editor
  "editor.fontSize": 14,
  "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,           // activa las ligaduras de fuentes programación
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,        // desactiva el minimapa (distracción para muchos)
  "editor.renderWhitespace": "boundary",  // muestra espacios en blanco al inicio/final
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.linkedEditing": true,           // edita etiquetas HTML de apertura/cierre a la vez
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  // Guardado automático
  "files.autoSave": "onFocusChange",      // guarda al cambiar de archivo

  // Formato automático
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Terminal integrada
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "bash",

  // Explorador de archivos
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/__pycache__": true,
    "**/.DS_Store": true
  },

  // Workbench
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  "breadcrumbs.enabled": true
}

Atajos de teclado esenciales

Los atajos son lo que más separa a un desarrollador que "escribe en VS Code" de uno que realmente lo domina. Estos son los que más tiempo ahorran en el día a día. Los ejemplos usan la notación de Windows/Linux; en macOS sustituye Ctrl por Cmd y Alt por Option.

Navegación y apertura de archivos

Edición de texto

Búsqueda y reemplazo

Código inteligente

El atajo más infrautilizado: multicursor

El multicursor es una de las funciones más potentes de VS Code. Permite editar múltiples lugares del código simultáneamente.

// Ejemplo: tienes esta lista y quieres añadir comillas a todos los valores
const frutas = [manzana, banana, cereza, dátil, kiwi];

// Paso 1: selecciona "manzana"
// Paso 2: Ctrl+D para seleccionar la siguiente ocurrencia, repite para todas
// Paso 3: pulsa F2 o escribe directamente
// Resultado: todos los valores se editan a la vez

// Otro uso: Ctrl+Shift+L selecciona TODAS las ocurrencias de golpe
// Selecciona "const" y Ctrl+Shift+L → selecciona todos los "const" del archivo
// Útil para cambiar un nombre de variable en todo el archivo sin usar buscar/reemplazar

Extensiones esenciales por categoría

Calidad de código y formato

Prettier — Code Formatter (esbenp.prettier-vscode)

El formateador de código más usado en el ecosistema JavaScript/TypeScript. Formatea automáticamente al guardar y garantiza un estilo consistente en todo el equipo sin discusiones sobre tabs vs espacios.

// .prettierrc — configuración en la raíz del proyecto
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

ESLint (dbaeumer.vscode-eslint)

Analiza tu código JavaScript/TypeScript en busca de errores y problemas de estilo en tiempo real, subrayando los problemas directamente en el editor. Funciona con cualquier configuración de ESLint del proyecto.

Error Lens (usernamehw.errorlens)

Muestra los errores y advertencias de ESLint, TypeScript y otros linters directamente en la línea del código que los contiene, en lugar de solo subrayarlos. Hace que los errores sean mucho más visibles.

// Con Error Lens, en lugar de solo ver un subrayado rojo en la variable, ves:
const nombre = "Ana"
//            ^^^^^^^ 'nombre' is assigned a value but never used. ts(6133)

// El mensaje aparece en la misma línea, en rojo, sin necesidad de hover

SonarLint (SonarSource.sonarlint-vscode)

Análisis estático de código que detecta bugs, vulnerabilidades de seguridad y code smells en tiempo real. Soporta JavaScript, TypeScript, Python, Java, PHP y más. Va más allá de ESLint: detecta problemas de lógica y seguridad que ESLint no cubre.

Git e integración con GitHub

GitLens (eamodio.gitlens)

La extensión de Git más completa. Muestra en cada línea quién la modificó y cuándo (git blame inline), permite explorar el historial de un archivo o función, comparar ramas y mucho más. La función de blame inline es especialmente útil en equipos.

// GitLens muestra al final de cada línea (en gris, discretamente):
const usuarios = await db.findAll()   // Ana García, hace 3 días • feat: optimizar consulta

Git Graph (mhutchie.git-graph)

Visualiza el historial de Git como un grafo visual interactivo directamente en VS Code. Mucho más claro que git log en terminal para entender la historia de las ramas y los merges.

GitHub Pull Requests and Issues (GitHub.vscode-pull-request-github)

Gestiona Pull Requests y Issues de GitHub directamente desde VS Code. Puedes revisar código de una PR, dejar comentarios, aprobar y hacer merge sin salir del editor.

Productividad general

Path Intellisense (christian-kohler.path-intellisense)

Autocompletado de rutas de archivos al escribir imports. Cuando escribes ./ o ../, muestra una lista de los archivos disponibles en esa ruta.

Auto Rename Tag (formulahendry.auto-rename-tag)

Al renombrar una etiqueta HTML de apertura, renombra automáticamente la etiqueta de cierre correspondiente. Indispensable para trabajo con HTML y JSX.

Bracket Pair Colorizer (built-in)

Desde VS Code 1.67 está integrado de serie. Colorea los pares de paréntesis, corchetes y llaves con colores que hacen muy fácil identificar qué cierra qué en código anidado. Actívalo en settings:

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active"

Todo Tree (Gruntfussel.todo-tree)

Busca en todo el proyecto comentarios como TODO, FIXME, HACK, BUG y los lista en un panel lateral, agrupados y con navegación directa. Imprescindible para no perder el rastro de las deudas técnicas.

// Los comentarios que detecta por defecto:
// TODO: refactorizar esta función cuando haya tiempo
// FIXME: este cálculo falla con valores negativos
// HACK: solución temporal hasta que el equipo decida la arquitectura
// BUG: el orden no se conserva si hay elementos con la misma fecha

WakaTime (WakaTime.vscode-wakatime)

Registra automáticamente cuánto tiempo pasas programando en cada proyecto, lenguaje y archivo. Los dashboards semanales son muy útiles para entender dónde va el tiempo de desarrollo.

Extensiones por lenguaje

Para Python:

• ms-python.python — extensión oficial: IntelliSense, linting, debugging, entornos virtuales.
• ms-python.black-formatter — formateador Black integrado.
• ms-python.pylint o ms-python.flake8 — linting de Python.
• ms-toolsai.jupyter — soporte completo para notebooks Jupyter dentro de VS Code.

Para JavaScript y TypeScript:

• dsznajder.es7-react-js-snippets — snippets de React, Redux y componentes.
• bradlc.vscode-tailwindcss — autocompletado y documentación de clases de Tailwind.
• prisma.prisma — sintaxis, formato y autocompletado para archivos .prisma.

Para Java:

• vscjava.vscode-java-pack — el pack oficial de Microsoft: IntelliSense, debug, Maven, Gradle y tests.
• vmware.vscode-spring-boot — soporte de Spring Boot con autocompletado de propiedades.

Para PHP:

• bmewburn.vscode-intelephense-client — IntelliSense completo para PHP, mucho mejor que la extensión oficial básica.
• onecentlin.laravel5-snippets — snippets de Laravel.

Apariencia y experiencia visual

One Dark Pro (zhuangtongfa.material-theme)

El tema más descargado de VS Code. Colores equilibrados que funcionan bien con prácticamente todos los lenguajes y durante sesiones largas.

Material Icon Theme (PKief.material-icon-theme)

Iconos coloridos y distintos para cada tipo de archivo en el explorador. Hace mucho más fácil identificar archivos de un vistazo, especialmente en proyectos con muchos tipos distintos.

Indent Rainbow (oderwat.indent-rainbow)

Colorea los niveles de indentación con colores alternos. Especialmente útil en Python, YAML y HTML, donde la indentación es semánticamente significativa.

Better Comments (aaron-bond.better-comments)

Colorea los comentarios según su tipo: ! en rojo para alertas, ? en azul para preguntas, * en verde para destacados, TODO en naranja. Hace los comentarios mucho más legibles.

// ! Este método no debe llamarse desde un hilo secundario
// ? ¿Deberíamos mover esto a un servicio separado?
// * Optimizado para reducir las consultas de O(n) a O(1)
// TODO: añadir tests unitarios para los casos límite
// Comentario normal sin colorear

Funciones poco conocidas que cambian el flujo de trabajo

Multi-root workspaces

Si trabajas con proyectos que tienen varios repositorios relacionados (frontend + backend, por ejemplo), puedes abrirlos juntos en un único workspace.

// Archivo .code-workspace — define el workspace multi-root
{
  "folders": [
    { "name": "Frontend", "path": "../mi-app-frontend" },
    { "name": "Backend",  "path": "../mi-app-backend" },
    { "name": "Docs",     "path": "../mi-app-docs" }
  ],
  "settings": {
    "editor.fontSize": 14
  }
}

Tasks: automatizar comandos repetitivos

VS Code puede ejecutar cualquier comando de terminal como una tarea, accessible con Ctrl+Shift+B (build) o desde la paleta de comandos. Útil para compilar, testear o desplegar sin salir del editor.

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label":   "Iniciar servidor de desarrollo",
      "type":    "shell",
      "command": "npm run dev",
      "group":   "build",
      "presentation": {
        "reveal": "always",
        "panel":  "new"
      }
    },
    {
      "label":   "Ejecutar tests",
      "type":    "shell",
      "command": "npm test -- --coverage",
      "group":   "test"
    },
    {
      "label":   "Formatear y lint",
      "type":    "shell",
      "command": "npm run lint:fix && npm run format",
      "group":   "build"
    }
  ]
}

Launch configurations: debug sin configuración manual

// .vscode/launch.json — configuraciones de debug
{
  "version": "0.2.0",
  "configurations": [
    {
      "name":    "Iniciar aplicación Node.js",
      "type":    "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.js",
      "env":     { "NODE_ENV": "development" }
    },
    {
      "name":    "Debug Python",
      "type":    "debugpy",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    },
    {
      "name":     "Adjuntar a Chrome",
      "type":     "chrome",
      "request":  "attach",
      "port":     9222,
      "webRoot":  "${workspaceFolder}/src"
    }
  ]
}

Snippets personalizados

Puedes crear tus propios snippets para bloques de código que escribes frecuentemente. Accede desde la paleta de comandos con "Configure User Snippets".

// Snippets personalizados de JavaScript (javascript.json)
{
  "Función asíncrona con try-catch": {
    "prefix":  "trycatch",
    "body": [
      "async function ${1:nombre}(${2:params}) {",
      "  try {",
      "    $0",
      "  } catch (error) {",
      "    console.error('Error en ${1:nombre}:', error);",
      "    throw error;",
      "  }",
      "}"
    ],
    "description": "Función async con try-catch"
  },
  "Console log con etiqueta": {
    "prefix": "cll",
    "body":   ["console.log('${1:etiqueta}:', ${2:variable});"],
    "description": "Console log con etiqueta descriptiva"
  },
  "Importar React con useState": {
    "prefix":  "rimport",
    "body":    ["import React, { useState } from 'react';"],
    "description": "Import de React con useState"
  }
}

Remote Development: programar en servidores y contenedores

El pack ms-vscode-remote.vscode-remote-extensionpack es uno de los más transformadores de VS Code. Permite abrir carpetas en:

• SSH: conectarte a un servidor remoto y editar archivos como si fueran locales.
• Contenedores Docker: desarrollar dentro de un contenedor con el entorno exacto del proyecto, sin instalar nada en tu máquina.
• WSL: programar en Linux desde Windows con Windows Subsystem for Linux.

// .devcontainer/devcontainer.json — entorno de desarrollo reproducible
{
  "name":  "Node.js Development",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {}
  },
  "forwardPorts": [3000, 5432],
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "eamodio.gitlens"
      ]
    }
  }
}

Configuración de settings por proyecto

Puedes tener una configuración específica por proyecto que sobreescribe la configuración global. Crea la carpeta .vscode/ en la raíz del proyecto.

// .vscode/settings.json — configuración específica del proyecto
{
  "editor.tabSize": 4,                              // este proyecto usa 4 espacios
  "python.defaultInterpreterPath": "./venv/bin/python",
  "editor.defaultFormatter": "ms-python.black-formatter",
  "[python]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    }
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.exclude": {
    "**/__pycache__": true,
    "**/*.pyc": true,
    ".pytest_cache": true
  }
}

Añade .vscode/settings.json al repositorio para que todos los miembros del equipo compartan la misma configuración de editor. Añade .vscode/launch.json y .vscode/tasks.json también. Lo que no debes añadir al repositorio son los archivos de extensiones específicas de cada persona (.vscode/extensions.json puede estar, pero es opcional).

Resumen: el kit mínimo para empezar hoy

Si tuvieras que instalar solo las extensiones más importantes ahora mismo, estas serían:

• Prettier: formato automático al guardar.
• ESLint: errores de JavaScript/TypeScript en tiempo real.
• Error Lens: errores visibles inline.
• GitLens: git blame inline y exploración del historial.
• Material Icon Theme: iconos por tipo de archivo.
• La extensión del lenguaje principal que uses (Python, Java, PHP, etc.).

Y los cinco atajos que más van a cambiar tu velocidad de trabajo si todavía no los usas:

• Ctrl+P: buscar y abrir cualquier archivo al instante.
• Ctrl+D: seleccionar la siguiente ocurrencia para editar en múltiples lugares.
• Alt+Up/Down: mover líneas sin copiar, cortar y pegar.
• F2: renombrar un símbolo en todo el proyecto de una vez.
• Ctrl+Shift+P: acceso a cualquier comando de VS Code por su nombre.