React, Emmet, Visual Studio Code et CSS-Modules

Question

Existe-t-il un moyen de configurer emmet dans le code Visual Studio pour utiliser les modules CSS de React?

Quand je tape ... div.container et appuyez sur tab, il devient <div className="container"></div>

Le problème ici est qu'il n'utilise pas de modules CSS. J'aimerais qu'il devienne ceci: <div className={styles.container}></div>

Existe-t-il un moyen d'obtenir cette fonctionnalité dans le code VS?

Answer 1

Oui, vous pouvez le faire, mais je pense que vous devez créer votre propre SNIPPET. De la documentation VSCODE:

SUR MAC: Code -> Préférences -> Extraits d'utilisateur et appelez-le comme vous voulez

Lorsque vous ouvrez ce fichier d'extrait, regardez ceci:

{
    "For_Loop": {
        "prefix": "for",
        "scope": "javascript,TypeScript",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}

Vous pouvez faire de nombreux espaces réservés ou toute autre variable, voici le lien: https://code.visualstudio.com/docs/editor/userdefinedsnippets

Je pense que vous pouvez utiliser cette variable

TM_CURRENT_LINE - The contents of the current line

J'espère que ça aide

Answer 2

Je ne pense pas qu'emmet supporte encore les modules CSS. Même dans ce cas, vous devrez toujours avoir un objet styles que l'éditeur ne pourra pas déduire. C'est très faisable mais je pense que la meilleure approche serait d'utiliser un plugin babel personnalisé.

Answer 3

En utilisant le plugin emmet/en suivant les étapes ci-dessous dans votre code VS, vous pouvez résoudre le problème.

1) Maintenez ctrl+shift+p dans votre code VS

2) Tapez settings.json et choisissez Open Setting (JSON)

3) Une fois que vous avez ouvert le fichier settings.json, ajoutez les lignes ci-dessous au fichier.

    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
     }

J'espère que ça aide!