Skip to main content
La extensión Mintlify MDX agrega compatibilidad de lenguaje para proyectos de Mintlify a VS Code, Cursor, Devin Desktop y otros editores compatibles con la API de extensiones de VS Code. La extensión conoce todos los componentes y propiedades integrados, por lo que obtienes autocompletado mientras escribes, y reporta componentes desconocidos, propiedades inválidas e importaciones de snippets sin resolver. La extensión también ejecuta una previsualización en vivo dentro de tu editor, para que puedas escribir y ver el resultado renderizado sin cambiar a un navegador.

​
Requisitos previos

  • VS Code 1.85.0 o más reciente
  • Un directorio de documentación con un archivo docs.json válido
  • La CLI de Mintlify, solo para la previsualización en el editor

​
Instalar la extensión

Instala desde la línea de comandos:
O instala desde tu editor:
  1. Abre la vista de Extensiones.
  2. Busca @id:mintlify.mintlify-snippets.
  3. Haz clic en Install.
También puedes instalarla desde el Visual Studio Marketplace. La extensión se activa cuando abres un archivo .mdx o un espacio de trabajo que contiene un archivo docs.json.

​
Autocompletado

Escribe < para ver todos los componentes integrados. El autocompletado sugiere las propiedades y los valores de los componentes dentro de las etiquetas. La extensión sugiere los componentes que importas desde snippets reutilizables junto con los integrados.

​
Diagnósticos

La extensión reporta problemas en el panel de Problemas y los subraya en tu archivo mientras escribes:
  • Componentes desconocidos.
  • Propiedades desconocidas o duplicadas.
  • Valores inválidos para propiedades enumeradas.
  • Propiedades requeridas faltantes.
  • Etiquetas sin cerrar o mal emparejadas.
  • Importaciones de snippets sin resolver.
Estas clases de errores causan fallos de compilación, así que corrígelos mientras escribes para evitar despliegues fallidos. Para desactivar los diagnósticos, establece mintlify.diagnostics.enabled en false.

​
Documentación al pasar el cursor

Pasa el cursor sobre un componente o una propiedad para ver qué hace y un enlace a su página en la documentación de Mintlify. Al pasar el cursor sobre un componente de snippet se previsualiza el contenido del archivo de snippet.

​
Ir a la definición

Mantén presionado CMD (macOS) o CTRL (Windows) y haz clic para navegar a la definición de:
  • Componentes de snippet.
  • Rutas de importación.
  • Atributos href y src que apuntan a páginas locales.
La extensión encuentra la raíz de tu documentación subiendo desde el archivo abierto hasta encontrar docs.json, por lo que las importaciones absolutas como /snippets/example.mdx se resuelven correctamente. El proyecto detectado aparece en la barra de estado. Para comprobar qué raíz está usando la extensión, ejecuta Mintlify: Show detected docs root desde la paleta de comandos.

​
Validación de configuración

La extensión valida docs.json contra el esquema de Mintlify.

​
Previsualización en tu editor

Abre un archivo .mdx y selecciona el icono de previsualización en la barra de título del editor, o haz clic derecho en el archivo y selecciona Preview Mintlify. Un panel de previsualización se abre junto a tu editor y renderiza la página. Las previsualizaciones en el editor requieren la CLI de Mintlify. La URL del servidor en ejecución aparece en la barra de estado. Selecciónala para detener el servidor, o ejecuta Mintlify: Stop preview server. Para ver la salida del proceso mint dev subyacente, abre el canal de salida Mintlify Preview.
Usa la previsualización en el editor mientras escribes páginas individuales, y mint dev en un navegador cuando quieras probar la navegación, la búsqueda o la autenticación en todo tu sitio.

​
Envolver contenido en componentes

La extensión incluye snippets que envuelven el texto seleccionado en un componente, en lugar de insertar un componente vacío para que lo completes. Para usarlos, selecciona el contenido que quieres envolver, luego ejecuta Snippets: Surround With desde la paleta de comandos y elige un componente. Hay snippets disponibles para AccordionGroup, CardGroup, CodeGroup, Expandable, Frame, RequestExample, ResponseExample y bloques de código delimitados.

​
Configuración

mintlify.preview.command es una configuración de usuario, por lo que un espacio de trabajo no puede sobrescribirla. Esto evita que un repositorio clonado ejecute un comando arbitrario en tu máquina cuando abres una previsualización.

​
Comandos

Ejecútalos desde la paleta de comandos:

​
Extensiones en conflicto

Otras extensiones MDX proporcionan su propio resaltado de sintaxis y funciones de lenguaje para archivos .mdx, que entran en conflicto con esta extensión. Desactiva otras extensiones MDX para evitar sugerencias duplicadas y resaltado inconsistente. Para el formato de código, usa Prettier junto con esta extensión o ejecuta mint format.

​
Solución de problemas

La extensión resuelve los componentes en relación con la raíz de tu documentación. Ejecuta Mintlify: Show detected docs root para confirmar que encontró el archivo docs.json correcto. Si la raíz es incorrecta o falta, abre la carpeta que contiene tu archivo docs.json como tu espacio de trabajo.Si la raíz es correcta, ejecuta Mintlify: Restart language server.
Es probable que otra extensión MDX también esté activa. Abre la vista de Extensiones, busca mdx y desactiva cualquier otra extensión MDX en este espacio de trabajo.
Abre el canal de salida Mintlify Preview para ver el error de mint dev.
  • could not run "mint dev --no-open": La CLI no está instalada. Instálala con npm i -g mint.
  • Trust the workspace first: Confía en el espacio de trabajo a través de Manage Workspace Trust.
  • no docs.json found above this file: Abre la carpeta que contiene tu archivo docs.json como tu espacio de trabajo.
  • Invalid docs.json: Ejecuta mint validate para encontrar el error de configuración.
Las rutas de importación absolutas se resuelven desde la raíz de tu documentación, no desde tu archivo. Confirma que la ruta coincide con la ubicación del archivo de snippet en relación con tu archivo docs.json, y que la raíz detectada es correcta.

Temas relacionados

Mintlify CLIInstalar la CLIPrevisualización local