Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions es.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"root": "es/cli/index",
"pages": [
"es/cli/install",
"es/cli/mdx-extension",
"es/cli/preview",
"es/cli/commands"
]
Expand Down
1 change: 1 addition & 0 deletions es/cli/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -86,5 +86,6 @@ https://mcp.mintlify.com
</div>

- [Instalar la CLI](/es/cli/install): Instala la CLI y prepárala para usarla.
- [Extensión Mintlify MDX](/es/cli/mdx-extension): Agrega autocompletado, verificación de errores en línea y una previsualización en el editor.
- [Previsualización local](/es/cli/preview): Ejecuta un servidor de desarrollo local con soporte de búsqueda y asistente.
- [Comandos](/es/cli/commands): Referencia completa de todos los comandos y flags.
12 changes: 7 additions & 5 deletions es/cli/install.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,16 @@ Si `mint update` no está disponible en tu versión, reinstala la CLI con la úl
```
</CodeGroup>

<div id="formatting">
## Formato
<div id="editor-support">
## Soporte para editores
</div>

Para resaltado de sintaxis y formato de código en archivos MDX, recomendamos usar las siguientes extensiones:
Para resaltado de sintaxis, autocompletado y verificación de errores en archivos MDX, usa las siguientes extensiones:

- **Cursor, Devin Desktop, VS Code**: [Extensión MDX para VS Code](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) y [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- **JetBrains**: [Plugin MDX para IntelliJ IDEA](https://plugins.jetbrains.com/plugin/14944-mdx) y [Prettier](https://prettier.io/docs/webstorm)
- **Cursor, Devin Desktop, VS Code**: [Extensión Mintlify MDX](/es/cli/mdx-extension) y [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) para el formato.
- **JetBrains**: [Plugin MDX para IntelliJ IDEA](https://plugins.jetbrains.com/plugin/14944-mdx) y [Prettier](https://prettier.io/docs/webstorm).

También puedes formatear archivos MDX con [`mint format`](/es/cli/commands#mint-format).

<div id="troubleshooting">
## Solución de problemas
Expand Down
169 changes: 169 additions & 0 deletions es/cli/mdx-extension.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
---
title: "Extensión Mintlify MDX"
description: "Instala la extensión Mintlify MDX para obtener autocompletado, diagnósticos en línea, documentación al pasar el cursor y una previsualización en el editor mientras escribes MDX localmente."
keywords: ["Cursor", "MDX", "autocompletado", "diagnósticos", "IntelliSense", "previsualización", "editor"]
---

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.

<div id="prerequisites">
## Requisitos previos
</div>

- 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](/es/cli/install), solo para la previsualización en el editor

<div id="install-the-extension">
## Instalar la extensión
</div>

Instala desde la línea de comandos:

```bash
code --install-extension mintlify.mintlify-snippets
```

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](https://marketplace.visualstudio.com/items?itemName=mintlify.mintlify-snippets).

La extensión se activa cuando abres un archivo `.mdx` o un espacio de trabajo que contiene un archivo `docs.json`.

<div id="autocomplete">
## Autocompletado
</div>

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](/es/create/reusable-snippets) junto con los integrados.

<div id="diagnostics">
## Diagnósticos
</div>

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`.

<div id="hover-documentation">
## Documentación al pasar el cursor
</div>

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.

<div id="go-to-definition">
## Ir a la definición
</div>

Mantén presionado <kbd>CMD</kbd> (macOS) o <kbd>CTRL</kbd> (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.

<div id="configuration-validation">
## Validación de configuración
</div>

La extensión valida `docs.json` contra el [esquema de Mintlify](https://mintlify.com/docs.json).

<div id="preview-in-your-editor">
## Previsualización en tu editor
</div>

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](/es/cli/install). 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**.

<Tip>
Usa la previsualización en el editor mientras escribes páginas individuales, y [`mint dev`](/es/cli/preview) en un navegador cuando quieras probar la navegación, la búsqueda o la autenticación en todo tu sitio.
</Tip>

<div id="wrap-content-in-components">
## Envolver contenido en componentes
</div>

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.

<div id="settings">
## Configuración
</div>

| Configuración | Valor predeterminado | Descripción |
| --- | --- | --- |
| `mintlify.diagnostics.enabled` | `true` | Reporta componentes desconocidos, propiedades desconocidas, propiedades requeridas faltantes e importaciones de snippets sin resolver. |
| `mintlify.warnAboutConflictingExtensions` | `true` | Advierte cuando tienes otra extensión MDX instalada junto a la extensión Mintlify MDX. |
| `mintlify.preview.command` | `mint dev --no-open` | Comando usado para iniciar el servidor de previsualización, ejecutado desde la raíz de tu proyecto. |
| `mintlify.preview.followScroll` | `true` | Desplaza la previsualización hasta el encabezado más cercano a la parte superior de tu editor. |

`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.

<div id="commands">
## Comandos
</div>

Ejecútalos desde la paleta de comandos:

| Comando | Descripción |
| --- | --- |
| **Mintlify: Preview Mintlify** | Abre el panel de previsualización para el archivo actual. |
| **Mintlify: Stop preview server** | Detiene el servidor de previsualización en ejecución. |
| **Mintlify: Show detected docs root** | Muestra qué archivo `docs.json` resolvió la extensión. |
| **Mintlify: Open component docs** | Abre la documentación del componente en tu cursor. |
| **Mintlify: Restart language server** | Reinicia el servidor de lenguaje. |

<div id="conflicting-extensions">
## Extensiones en conflicto
</div>

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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) junto con esta extensión o ejecuta [`mint format`](/es/cli/commands#mint-format).

<div id="troubleshooting">
## Solución de problemas
</div>

<AccordionGroup>
<Accordion title="Los componentes se reportan como desconocidos">
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**.
</Accordion>
<Accordion title="El autocompletado y el resaltado se comportan de forma inconsistente">
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.
</Accordion>
<Accordion title="La previsualización no se inicia">
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`](/es/cli/commands#mint-validate) para encontrar el error de configuración.
</Accordion>
<Accordion title="Las importaciones de snippets se reportan como sin resolver">
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.
</Accordion>
</AccordionGroup>
4 changes: 4 additions & 0 deletions es/cli/preview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ Para generar una previsualización sin instalar la CLI globalmente, ejecuta:
npx mint dev
```

<Tip>
Si escribes en VS Code o Cursor, la [extensión Mintlify MDX](/es/cli/mdx-extension) ejecuta esta previsualización en un panel junto a tu editor y la desplaza para coincidir con la página que estás editando.
</Tip>

<div id="log-in-for-search-and-assistant">
## Iniciar sesión para búsqueda y asistente
</div>
Expand Down
1 change: 1 addition & 0 deletions fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"root": "fr/cli/index",
"pages": [
"fr/cli/install",
"fr/cli/mdx-extension",
"fr/cli/preview",
"fr/cli/commands"
]
Expand Down
1 change: 1 addition & 0 deletions fr/cli/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -86,5 +86,6 @@ https://mcp.mintlify.com
</div>

- [Installer la CLI](/fr/cli/install) : Installez la CLI et préparez-la à l'utilisation.
- [Extension Mintlify MDX](/fr/cli/mdx-extension) : Ajoutez l'autocomplétion, la vérification des erreurs en ligne et une prévisualisation dans l'éditeur.
- [Prévisualisation locale](/fr/cli/preview) : Lancez un serveur de développement local avec la recherche et l'assistant.
- [Commandes](/fr/cli/commands) : Référence complète de toutes les commandes et options.
12 changes: 7 additions & 5 deletions fr/cli/install.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,16 @@ Si `mint update` n'est pas disponible dans votre version, réinstallez la CLI av
```
</CodeGroup>

<div id="formatting">
## Formatage
<div id="editor-support">
## Prise en charge des éditeurs
</div>

Pour la coloration syntaxique et le formatage du code dans les fichiers MDX, nous recommandons les extensions suivantes :
Pour la coloration syntaxique, l'autocomplétion et la vérification des erreurs dans les fichiers MDX, utilisez les extensions suivantes :

- **Cursor, Devin Desktop, VS Code** : [Extension MDX pour VS Code](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) et [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- **JetBrains** : [Plugin MDX pour IntelliJ IDEA](https://plugins.jetbrains.com/plugin/14944-mdx) et [Prettier](https://prettier.io/docs/webstorm)
- **Cursor, Devin Desktop, VS Code** : [Extension Mintlify MDX](/fr/cli/mdx-extension) et [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) pour le formatage.
- **JetBrains** : [Plugin MDX pour IntelliJ IDEA](https://plugins.jetbrains.com/plugin/14944-mdx) et [Prettier](https://prettier.io/docs/webstorm).

Vous pouvez également formater les fichiers MDX avec [`mint format`](/fr/cli/commands#mint-format).

<div id="troubleshooting">
## Dépannage
Expand Down
Loading