MDUIDocs
Copier le lien llms.txtCopier le lien llms-full.txtVoir cette page en MarkdownDiscuter de cette page avec ChatGPTDiscuter de la documentation complète avec ChatGPT
Couleurs prédéfinies
Couleur personnalisée
Extraire du fond d'écran
Veuillez sélectionner un fond d'écran
Premiers pas
Aperçu Installation Démarrage rapide Prise en charge TypeScript Prise en charge des IDE Localisation Questions fréquentes
Développement assisté par l'IA
Styles
Intégration avec les frameworks
Composants
Fonctions
Bibliothèques

Prise en charge des IDE

mdui est optimisé pour VS Code et WebStorm et offre des fonctionnalités telles que l'autocomplétion de code et les infobulles dans ces IDE.

VS Code

mdui installé via npm

Pour activer le support IDE avec une installation via npm, suivez ces étapes dans votre projet :

  1. Créez un répertoire .vscode à la racine du projet.
  2. Créez un fichier settings.json dans le répertoire .vscode.
  3. Ajoutez le code suivant au fichier settings.json :
    {
      "html.customData": ["./node_modules/mdui/html-data.en.json"],
      "css.customData": ["./node_modules/mdui/css-data.en.json"]
    }
    

Si le fichier settings.json existe déjà, ajoutez simplement ces deux lignes à la racine du document JSON. Redémarrez VS Code après la modification.

mdui utilisé via CDN

Si vous utilisez mdui via CDN, vous pouvez installer l'extension mdui pour VS Code afin d'obtenir le support IDE.

Recherchez mdui dans la place de marché des extensions de VS Code et installez le premier résultat, ou cliquez ici pour l'installer. Une fois installée, le support IDE est activé pour tous les projets.

Il est recommandé d'installer via npm et de configurer le fichier settings.json plutôt que d'installer l'extension, afin de garantir la cohérence du support IDE avec la version de mdui utilisée.

WebStorm

mdui installé via npm

Pour activer le support IDE avec une installation via npm, suivez ces étapes dans votre projet :

  1. Ajoutez le code suivant à la racine du fichier package.json du projet :
    {
      "web-types": ["./node_modules/mdui/web-types.en.json"]
    }
    

Si la propriété web-types existe déjà à la racine du fichier package.json, ajoutez simplement ./node_modules/mdui/web-types.en.json au tableau web-types. Redémarrez WebStorm après la modification.

mdui utilisé via CDN

Si vous utilisez mdui via CDN, vous pouvez installer le plugin mdui pour WebStorm afin d'obtenir le support IDE.

Recherchez mdui dans la place de marché des plugins de WebStorm et installez le premier résultat. Une fois installé, le support IDE est activé pour tous les projets.

Il est recommandé d'installer via npm pour le support IDE plutôt que d'installer le plugin WebStorm, afin de garantir la cohérence avec la version de mdui utilisée.

Différences de support entre VS Code et WebStorm

Il existe quelques différences dans la prise en charge de mdui entre VS Code et WebStorm. Le tableau suivant détaille ces différences :

Emplacement avec autocomplétion et infobulle VS Code WebStorm
Noms de balises HTML
Noms d'attributs dans les balises HTML
Valeurs énumérées des attributs HTML (pas de prise en charge des commentaires)
Noms d'événements dans les balises HTML
Valeurs de l'attribut name des slots HTML
Noms des part dans le sélecteur CSS ::part()
Noms des propriétés CSS personnalisées internes aux composants
Noms des propriétés CSS personnalisées globales
Noms des classes CSS globales
Sur cette page