Markdown en VS Code - Extensiones, atajos y trucos

Visual Studio Code es uno de los mejores editores para trabajar con Markdown. Con las extensiones adecuadas se convierte en un entorno de escritura profesional con vista previa, autocompletado, linting y exportación.

Soporte nativo de Markdown

VS Code incluye soporte de Markdown sin instalar nada:

Vista previa

• Abrir vista previa: Ctrl+Shift+V (o Cmd+Shift+V en Mac)
• Vista previa lado a lado: Ctrl+K V (abre la previa a la derecha del editor)
• La vista previa se actualiza en tiempo real mientras escribes

Funcionalidades incluidas

• Resaltado de sintaxis para archivos .md y .mdx
• Vista previa con renderizado de tablas, código, imágenes y fórmulas
• Outline (esquema) del documento en el panel lateral
• Navegación por encabezados con Ctrl+Shift+O
• Autocompletado de enlaces a otros archivos Markdown
• Soporte de drag & drop para imágenes

Extensiones esenciales

Markdown All in One

La extensión más popular para Markdown. Añade:

• Atajos de teclado: Ctrl+B para negrita, Ctrl+I para cursiva
• Tabla de contenidos automática: Genera un TOC basado en tus encabezados
• Autocompletado de listas: Al pulsar Enter, continúa la lista automáticamente
• Formateo de tablas: Alinea columnas automáticamente con Alt+Shift+F
• Pegar enlaces: Pega una URL sobre texto seleccionado y crea un enlace [texto](url)

Markdown Lint (markdownlint)

Detecta problemas de estilo y consistencia en tus archivos Markdown:

• Encabezados sin orden correcto (h1 seguido de h3)
• Líneas demasiado largas
• Espacios inconsistentes
• Listas mal formateadas
• Links vacíos

Puedes configurar las reglas creando un archivo .markdownlint.json en la raíz de tu proyecto. En este ejemplo desactivamos tres reglas comunes: la longitud máxima de línea (que molesta al escribir prosa), la restricción de HTML inline (necesaria si usas etiquetas como <details> o <kbd>) y la exigencia de que la primera línea sea un h1 (incompatible con frontmatter YAML):

{
  "MD013": false,
  "MD033": false,
  "MD041": false
}

Markdown Preview Enhanced

Vista previa avanzada con soporte de:

• Diagramas Mermaid, PlantUML, WaveDrom
• Fórmulas LaTeX con KaTeX/MathJax
• Importar archivos externos
• Exportar a PDF, HTML, EPUB, DOCX
• Presentaciones con reveal.js
• Ejecutar bloques de código

Paste Image

Pega imágenes del portapapeles directamente en tu Markdown con Ctrl+Alt+V. La extensión guarda la imagen en el directorio del proyecto y genera la sintaxis ![](ruta) automáticamente.

Markdown Table

Facilita la creación y edición de tablas:

• Crear tablas desde cero con un asistente visual
• Convertir CSV/TSV a tablas Markdown
• Navegar entre celdas con Tab
• Alinear columnas automáticamente

Atajos de teclado

Con Markdown All in One instalado:

Snippets personalizados

Los snippets son plantillas que se expanden automáticamente al escribir un atajo. Si escribes documentación Markdown a menudo, los snippets te ahorran mucho tiempo en tareas repetitivas como crear frontmatter, tablas o bloques de código. Para configurarlos, ve a File > Preferences > User Snippets y selecciona markdown.json:

{
  "Frontmatter": {
    "prefix": "front",
    "body": [
      "---",
      "title: $1",
      "description: $2",
      "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      "---",
      "",
      "$0"
    ],
    "description": "Frontmatter YAML"
  },
  "Code Block": {
    "prefix": "code",
    "body": [
      "```${1:javascript}",
      "$0",
      "```"
    ],
    "description": "Bloque de codigo"
  },
  "Table": {
    "prefix": "table",
    "body": [
      "| ${1:Col 1} | ${2:Col 2} | ${3:Col 3} |",
      "|${1/./:/g}|${2/./:/g}|${3/./:/g}|",
      "| $4 | $5 | $6 |"
    ],
    "description": "Tabla Markdown"
  },
  "Details": {
    "prefix": "details",
    "body": [
      "<details>",
      "<summary>${1:Titulo}</summary>",
      "",
      "$0",
      "",
      "</details>"
    ],
    "description": "Seccion colapsable"
  },
  "Alerta GitHub": {
    "prefix": "alert",
    "body": [
      "> [!${1|NOTE,TIP,IMPORTANT,WARNING,CAUTION|}]",
      "> $0"
    ],
    "description": "Alerta de GitHub"
  }
}

Con estos snippets, escribir front + Tab genera el frontmatter completo con la fecha del día, code + Tab crea un bloque de código con el cursor posicionado para elegir el lenguaje, y alert + Tab genera una alerta de GitHub con un menú desplegable para elegir el tipo.

Configuración recomendada

VS Code tiene muchas opciones que mejoran la experiencia de escritura en Markdown. Las más importantes son activar el word wrap (para que las líneas largas no se salgan de la pantalla), aumentar el tamaño de fuente y el interlineado (para reducir fatiga visual), y desactivar el minimapa (que no aporta nada en archivos de texto). Añade estas opciones a tu settings.json:

{
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "other": true,
      "comments": false,
      "strings": false
    },
    "editor.rulers": [80],
    "editor.fontSize": 15,
    "editor.lineHeight": 1.8,
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "boundary"
  },
  "markdown.preview.fontSize": 15,
  "markdown.preview.lineHeight": 1.8
}

Fuentes recomendadas

Para escribir Markdown, una buena fuente monoespaciada marca la diferencia:

• JetBrains Mono: Ligaduras, excelente legibilidad
• Fira Code: Popular, con ligaduras de programación
• Cascadia Code: La fuente de Microsoft Terminal
• Source Code Pro: Adobe, limpia y neutral

Flujos de trabajo avanzados

Workspace dedicado para escritura

Si trabajas en un proyecto de documentación, puedes crear un workspace de VS Code con configuración específica para escritura. Esto te permite tener una fuente más grande, un tema más suave y el modo centrado activado sin afectar tu configuración habitual para programar:

{
  "folders": [{ "path": "." }],
  "settings": {
    "workbench.colorTheme": "Quiet Light",
    "editor.fontFamily": "'JetBrains Mono', monospace",
    "editor.fontSize": 16,
    "editor.lineHeight": 2,
    "editor.wordWrap": "on",
    "zenMode.centerLayout": true,
    "zenMode.hideLineNumbers": true
  }
}

Modo Zen para escritura

Pulsa Ctrl+K Z para entrar en modo Zen: pantalla completa, sin barras laterales ni tabs. Ideal para concentrarse en la escritura.

Buscar y reemplazar en múltiples archivos

Ctrl+Shift+H permite buscar y reemplazar texto en todos los archivos Markdown del proyecto. Útil para renombrar secciones o actualizar enlaces.

Tasks para build y deploy

Si usas un generador de sitios como MkDocs, Docusaurus o VitePress, puedes definir tasks en VS Code para compilar y servir la documentación sin salir del editor. Estas tasks se configuran en .vscode/tasks.json y se ejecutan desde Terminal > Run Task:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build docs",
      "type": "shell",
      "command": "mkdocs build",
      "group": "build"
    },
    {
      "label": "Serve docs",
      "type": "shell",
      "command": "mkdocs serve",
      "group": "test",
      "isBackground": true
    }
  ]
}

Consejos de productividad

1. Usa el Outline: El panel Outline muestra la estructura de encabezados. Haz clic en cualquiera para navegar.
2. Arrastra imágenes: Arrastra una imagen al editor y VS Code genera la sintaxis automáticamente.
3. Pega URLs sobre texto: Selecciona texto, pega una URL y se crea un enlace.
4. Usa multi-cursor: Alt+Click para editar múltiples líneas a la vez (útil para tablas).
5. Formatea al guardar: Con Markdown All in One, habilita editor.formatOnSave para tablas.
6. Previsualiza con Mermaid: La extensión Markdown Preview Mermaid añade soporte de diagramas a la vista previa.
7. Git integrado: Revisa cambios en tu documentación directamente en el editor con el panel Source Control.

Para aprender la sintaxis de Markdown que necesitas en VS Code, consulta nuestra guía de sintaxis básica o practica con el Tutor IA.