Skip to main content
L’extension Mintlify MDX ajoute la prise en charge du langage pour les projets Mintlify à VS Code, Cursor, Devin Desktop et aux autres éditeurs compatibles avec l’API d’extensions de VS Code. L’extension connaît chaque composant intégré et chaque propriété, vous bénéficiez donc de l’autocomplétion pendant la saisie, et elle signale les composants inconnus, les propriétés invalides et les imports de snippets non résolus. L’extension exécute également une prévisualisation en direct dans votre éditeur, ce qui vous permet de rédiger et de voir le rendu sans passer par un navigateur.

​
Prérequis

  • VS Code 1.85.0 ou plus récent
  • Un répertoire de documentation avec un fichier docs.json valide
  • La CLI Mintlify, uniquement pour la prévisualisation dans l’éditeur

​
Installer l’extension

Installez depuis la ligne de commande :
Ou installez depuis votre éditeur :
  1. Ouvrez la vue Extensions.
  2. Recherchez @id:mintlify.mintlify-snippets.
  3. Cliquez sur Install.
Vous pouvez également l’installer depuis le Visual Studio Marketplace. L’extension s’active lorsque vous ouvrez un fichier .mdx ou un espace de travail contenant un fichier docs.json.

​
Autocomplétion

Tapez < pour afficher tous les composants intégrés. L’autocomplétion suggère les propriétés et les valeurs des composants à l’intérieur des balises. L’extension suggère les composants que vous importez depuis des snippets réutilisables aux côtés des composants intégrés.

​
Diagnostics

L’extension signale les problèmes dans le panneau Problèmes et les souligne dans votre fichier pendant que vous rédigez :
  • Composants inconnus.
  • Propriétés inconnues ou en double.
  • Valeurs invalides pour les propriétés énumérées.
  • Propriétés requises manquantes.
  • Balises non fermées ou mal appariées.
  • Imports de snippets non résolus.
Ces classes d’erreurs provoquent des échecs de build, corrigez-les donc au fil de la rédaction pour éviter des déploiements en échec. Pour désactiver les diagnostics, définissez mintlify.diagnostics.enabled sur false.

​
Documentation au survol

Survolez un composant ou une propriété pour voir sa fonction et un lien vers sa page dans la documentation Mintlify. Le survol d’un composant de snippet prévisualise le contenu du fichier de snippet.

​
Atteindre la définition

Maintenez CMD (macOS) ou CTRL (Windows) et cliquez pour accéder à la définition :
  • des composants de snippet ;
  • des chemins d’import ;
  • des attributs href et src qui pointent vers des pages locales.
L’extension trouve la racine de votre documentation en remontant depuis le fichier ouvert jusqu’à trouver docs.json, de sorte que les imports absolus comme /snippets/example.mdx se résolvent correctement. Le projet détecté apparaît dans la barre d’état. Pour vérifier quelle racine l’extension utilise, exécutez Mintlify: Show detected docs root depuis la palette de commandes.

​
Validation de la configuration

L’extension valide docs.json par rapport au schéma Mintlify.

​
Prévisualisation dans votre éditeur

Ouvrez un fichier .mdx et sélectionnez l’icône de prévisualisation dans la barre de titre de l’éditeur, ou faites un clic droit sur le fichier et sélectionnez Preview Mintlify. Un panneau de prévisualisation s’ouvre à côté de votre éditeur et affiche le rendu de la page. Les prévisualisations dans l’éditeur nécessitent la CLI Mintlify. L’URL du serveur en cours d’exécution apparaît dans la barre d’état. Sélectionnez-la pour arrêter le serveur, ou exécutez Mintlify: Stop preview server. Pour voir la sortie du processus mint dev sous-jacent, ouvrez le canal de sortie Mintlify Preview.
Utilisez la prévisualisation dans l’éditeur pendant que vous rédigez des pages individuelles, et mint dev dans un navigateur lorsque vous voulez tester la navigation, la recherche ou l’authentification sur l’ensemble de votre site.

​
Encadrer du contenu dans des composants

L’extension inclut des snippets qui encadrent le texte sélectionné dans un composant, plutôt que d’insérer un composant vide à remplir. Pour les utiliser, sélectionnez le contenu à encadrer, puis exécutez Snippets: Surround With depuis la palette de commandes et choisissez un composant. Des snippets sont disponibles pour AccordionGroup, CardGroup, CodeGroup, Expandable, Frame, RequestExample, ResponseExample et les blocs de code délimités.

​
Paramètres

mintlify.preview.command est un paramètre utilisateur, un espace de travail ne peut donc pas le remplacer. Cela empêche un dépôt cloné d’exécuter une commande arbitraire sur votre machine lorsque vous ouvrez une prévisualisation.

​
Commandes

Exécutez-les depuis la palette de commandes :

​
Extensions en conflit

D’autres extensions MDX fournissent leur propre coloration syntaxique et leurs propres fonctionnalités de langage pour les fichiers .mdx, ce qui entre en conflit avec cette extension. Désactivez les autres extensions MDX pour éviter les suggestions en double et une coloration incohérente. Pour le formatage du code, utilisez Prettier aux côtés de cette extension ou exécutez mint format.

​
Dépannage

L’extension résout les composants par rapport à la racine de votre documentation. Exécutez Mintlify: Show detected docs root pour confirmer qu’elle a trouvé le bon fichier docs.json. Si la racine est incorrecte ou manquante, ouvrez le dossier contenant votre fichier docs.json comme espace de travail.Si la racine est correcte, exécutez Mintlify: Restart language server.
Une autre extension MDX est probablement active elle aussi. Ouvrez la vue Extensions, recherchez mdx et désactivez toute autre extension MDX dans cet espace de travail.
Ouvrez le canal de sortie Mintlify Preview pour voir l’erreur de mint dev.
  • could not run "mint dev --no-open" : la CLI n’est pas installée. Installez-la avec npm i -g mint.
  • Trust the workspace first : faites confiance à l’espace de travail via Manage Workspace Trust.
  • no docs.json found above this file : ouvrez le dossier contenant votre fichier docs.json comme espace de travail.
  • Invalid docs.json : exécutez mint validate pour trouver l’erreur de configuration.
Les chemins d’import absolus se résolvent depuis la racine de votre documentation, pas depuis votre fichier. Vérifiez que le chemin correspond à l’emplacement du fichier de snippet par rapport à votre fichier docs.json, et que la racine détectée est correcte.

Sujets connexes

Installer la CLIMintlify CLIPrévisualisation locale