React, Emmet, код Visual Studio и CSS-модули

Question

Есть ли способ настроить emmet в коде Visual Studio для использования CSS-модулей React?

Когда я набираю ... div.container и нажимаю клавишу Tab, она становится <div className="container"></div>

Проблема здесь в том, что он не использует CSS-модули. Я бы хотел, чтобы это стало таким: <div className={styles.container}></div>

Есть ли способ получить эту функциональность в коде VS?

Answer 1

Да, вы можете сделать это, но я думаю, что вы должны создать свой собственный SNIPPET. Из документации VSCODE:

ON MAC: Код -> Настройки -> Пользовательские фрагменты и называйте его как хотите

Когда вы открываете этот фрагмент, посмотрите на это:

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

Вы можете сделать много заполнителей или любых других переменных, вот ссылка: https://code.visualstudio.com/docs/editor/userdefinedsnippets

Я думаю, вы можете использовать эту переменную

TM_CURRENT_LINE - The contents of the current line

Надеюсь, это поможет

Answer 2

Используя плагин emmet / следуя приведенным ниже шагам в вашем VS Code, можно решить проблему.

1) Удерживайте ctrl+shift+p в своем коде VS

2) Введите settings.json и выберите Open Setting (JSON)

3) После того, как вы откроете файл settings.json, добавьте в файл следующие строки:

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

Надеюсь, это поможет!

Answer 3

Я не думаю, что emmet пока поддерживает модули CSS. Даже в этом случае вам все равно придется иметь объект styles, который редактор не сможет определить. Это очень выполнимо, но я думаю, что лучшим подходом было бы использование собственного плагина babel.