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 :
- Créez un répertoire
.vscodeà la racine du projet. - Créez un fichier
settings.jsondans le répertoire.vscode. - 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 :
- Ajoutez le code suivant à la racine du fichier
package.jsondu 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 | ||
| 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 |