Как заменить кавычки на фигурные скобки после className при работе с react+ts/js в vs code?

Question

[PochemuIKak]

Emmet в vs code автоматически добавляет кавычки после className, хотя мне это не нужно, ведь я подключаю стили как модули и приходится ручками заменять эти кавычки на фигурные скобки, что крайне не удобно.
Поискал решения, но все что нашел это "typescript.preferences.jsxAttributeCompletionStyle": "braces" добавил это в user settings.json и не проканало.
Желательно чтобы эта настройка работала только с jsx/tsx файлами, а остальные не трогала.

Answer 1

[PochemuIKak]

Нашел решение проблемы, которое мне кажется идеальным. Теперь вместо h1.title ----- <h1 className="title"></h1> я получаю <h1 className={styles.title}></h1>. Все что нужно сделать это:
1) В setting.json файл добавить

"emmet.syntaxProfiles": {
    "jsx": {
      "markup.attributes": {
        "class*": "className",
      }
    }
  },

2) Писать вместо h1.tile ----- h1..title (+1 точка)

Минусом такого решение является то, что когда вы раньше писали h1..title у вас вместо className появлялся styleName, а теперь styleName появляться не будет (сам никогда не пользовался им, поэтому без понятия зачем он нужен). Да и в принципе если хорошенько покопаться в настройках его также можно вывести с другим префиксом.