Saltar a contenido

IDE con Visual Studio Code

Una vez que Git y GitHub están configurados, llega el momento de elegir un editor que integre todo el flujo de trabajo en una sola ventana. Hay muchas opciones excelentes:

En esta guía usamos VS Code porque:

  • Es gratuito y de código abierto.
  • Tiene integración nativa con Git (no requiere plugins).
  • Soporta Markdown con preview en vivo.
  • Corre en Windows, macOS y Linux.
  • Tiene un ecosistema enorme de extensiones.

Si Vim es lo tuyo

Vim y Neovim siguen siendo herramientas de primera línea, sobre todo en servidores remotos y para gente que vive en la terminal. Hay configuraciones como LazyVim o AstroNvim que los dejan como IDEs completos. Esta guía no los cubre, pero la elección es válida.

1. Instalación

  1. Descargá el instalador desde code.visualstudio.com/Download.
  2. Durante la instalación, tildá estas opciones:
  3. "Add to PATH" (suma code al PATH para usarlo desde la terminal).
  4. "Add 'Open with Code' action" (clic derecho en el Explorador).
  5. Al finalizar, abrí VS Code desde el menú inicio.

Con Homebrew:

brew install --cask visual-studio-code

O descargá el .dmg desde el sitio oficial.

Debian/Ubuntu:

sudo apt install ./code_1.85.0-1702772538_amd64.deb

Fedora:

sudo dnf install code

O desde la página oficial (hay .deb, .rpm y tarball).

2. Configuración inicial

Cambiar el shell por defecto

En Windows, la terminal integrada usa PowerShell por defecto. Para usar Git Bash (más cómodo con comandos Unix):

  1. Abrí la paleta de comandos con Ctrl+Shift+P.
  2. Escribí Terminal: Select Default Profile.
  3. Elegí Git Bash.

En macOS y Linux, el shell del sistema ya es Unix y funciona sin cambios.

Tema

VS Code viene con temas claros y oscuros. Para cambiar:

  1. Ctrl+K seguido de Ctrl+T (atajo directo).
  2. Elegí entre los temas preinstalados o instalá uno nuevo (más abajo).

Fuente

Para programadores, recomendamos una fuente con ligaduras tipo programming ligatures:

  1. Instalá JetBrains Mono o Fira Code.
  2. En VS Code: Ctrl+, (Settings).
  3. Buscá font family y configurá 'JetBrains Mono Ligatures', monospace.

3. Integración con Git

VS Code trae Git integrado de fábrica. Si tenés Git instalado en el sistema, todo funciona sin instalar nada extra.

Source Control panel

El ícono de Source Control (la rama de Git en la barra lateral izquierda) abre un panel donde podés:

  • Ver archivos modificados, agregados y eliminados.
  • Hacer stage de cambios (botón + al lado de cada archivo).
  • Escribir un mensaje de commit y confirmar.
  • Push, pull, sync.
  • Ver y resolver conflictos visualmente.

Status bar

La barra de estado (abajo) muestra:

  • La rama actual (ej. main, feature/login).
  • Si hay cambios pendientes (↓ para pull, ↑ para push, ⇅ para ambos).
  • El número de warnings y errores del archivo abierto.

Git Graph (extensión recomendada)

La extensión Git Graph agrega una visualización del historial de commits con colores por rama. Es muy útil para entender merges y rebase.

4. Extensiones recomendadas

Esenciales para Git/GitHub

Extensión Qué hace
GitLens Anota cada línea con autor y fecha del último commit.
GitHub Actions Resaltado y validación de workflows YAML.
GitHub Pull Requests Revisá y aprobá PRs sin salir del editor.

Esenciales para Markdown

Extensión Qué hace
Markdown All in One Atajos de teclado, TOC automático, preview mejorado.
markdownlint Linter en tiempo real para Markdown.
Mermaid Preview nativo de diagramas Mermaid.

Esenciales para productividad

Extensión Qué hace
Error Lens Errores y warnings inline en el código.
Project Manager Maneja múltiples repositorios como proyectos.
Settings Sync Sincroniza tu configuración entre máquinas.

Backup de tu configuración

En la nube, VS Code sincroniza automáticamente tu config si iniciás sesión con GitHub (icono de cuenta, abajo a la izquierda). Es la forma más simple de tener la misma experiencia en todos tus equipos.

5. Atajos de teclado productivos

Los atajos más útiles para el flujo de Git/Markdown:

Acción Windows / Linux macOS
Paleta de comandos Ctrl+Shift+P Cmd+Shift+P
Quick open (buscar archivo) Ctrl+P Cmd+P
Settings Ctrl+, Cmd+,
Toggle terminal Ctrl+` Ctrl+`
Markdown preview Ctrl+K + V Cmd+K + V
Format document Shift+Alt+F Shift+Option+F
Multi-cursor ++alt+click++ o Ctrl+Alt+Down ++option+click++ o Cmd+Option+Down
Move line up/down Alt+Up / Alt+Down Option+Up / Option+Down
Comment line Ctrl+/ Cmd+/
Go to definition F12 F12

Cheat sheet oficial

VS Code publica una cheat sheet PDF con todos los atajos. Imprimila y tenela a mano las primeras semanas.

6. Flujo de trabajo típico

Veamos un escenario real: estás editando documentación, querés commiteart los cambios y abrir un PR.

Editar archivos

  1. Abrí la carpeta del proyecto (File → Open Folder o code . en terminal).
  2. Navegá el árbol en la barra lateral.
  3. Editá los archivos. El panel de Source Control muestra los archivos modificados en tiempo real.

Revisar cambios antes de commitear

  1. Hacé clic en un archivo modificado desde Source Control.
  2. VS Code abre una vista de diff inline: las líneas agregadas en verde, las quitadas en rojo.
  3. Verificá que los cambios sean correctos.

Commitear

  1. En Source Control, escribí el mensaje.
  2. Ctrl+Enter para confirmar (o el botón ✓).
  3. Si está activado commit.gpgsign, el commit se firma automáticamente (ver Firma criptográfica con GPG).

Forzar commits firmados desde VS Code

Independientemente de si commiteás desde la terminal integrada o desde el panel Source Control de VS Code, la firma la decide Git, no el editor. Por eso alcanza con la configuración global:

git config --global commit.gpgsign true
git config --global user.signingkey 5F2A8B3C9D4E1F6A
git config --global tag.gpgsign true

Con commit.gpgsign true, todo commit queda firmado: los hechos desde el panel GUI y los hechos desde la terminal. No existe una opción separada en VS Code para "forzar firma solo en el GUI"; el flag se aplica a todos los commits del sistema porque es una configuración de Git, no del editor.

Windows y la ruta de GPG

En Windows con Git Bash, GPG se instala en C:\Program Files (x86)\GnuPG\bin\gpg.exe. Si al confirmar un commit desde VS Code ves gpg: failed to start... o cannot find gpg, declarale la ruta manualmente:

git config --global gpg.program "C:/Program Files (x86)/GnuPG/bin/gpg.exe"

Alternativa: declaralo en settings.json de VS Code para que use esa ruta sin tocar Git:

{
    "git.gpg": {
        "path": "C:/Program Files (x86)/GnuPG/bin/gpg.exe"
    }
}

Deshabilitar firma solo en un proyecto

Si querés firmar en la mayoría de tus repos pero no en uno puntual, usá el flag sin --global dentro de ese proyecto:

cd mi-proyecto-sin-firma
git config commit.gpgsign false

La firma obligatoria a nivel equipo se activa en GitHub desde branch protection con "Require signed commits". Más detalles en Firma criptográfica con GPG.

Push y Pull Request

  1. Después de commitear, aparece un botón "Sync Changes" en la status bar.
  2. Hacé clic y elegí Push.
  3. Si instalaste la extensión GitHub Pull Requests, aparece un botón "Create Pull Request" que abre el editor web de GitHub con la rama ya seleccionada.

7. Settings útiles

Configurá estas opciones en settings.json (Ctrl+Shift+P → Preferences: Open User Settings (JSON)):

{
    "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
    "editor.fontLigatures": true,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.minimap.enabled": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "git.autofetch": true,
    "git.confirmSync": false,
    "git.enableSmartCommit": true,
    "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
    "markdown.preview.fontSize": 14,
    "markdownlint.config": {
        "MD013": false,
        "MD033": false
    }
}

Versiona tu settings.json

Guardá tu settings.json en un repositorio dotfiles o sincronizá con Settings Sync. Así tenés la misma experiencia en cualquier máquina.

Próximo paso

Con el IDE configurado, podés pasar a Sintaxis documental con Markdown para aprender a escribir el contenido de la documentación, o saltar a Práctica para hacer ejercicios completos.