Настройте Emmet для JSX в VSCode - PullRequest
Новая
       43

Настройте Emmet для JSX в VSCode

7 голосов
/ 26 мая 2019

Я использую CSS так: 

const styles = {
  foo: {
    color: 'red'
  }
}

<div className={styles.foo} />

и я хочу, чтобы emmet расширился .foo до <div className={styles.foo}></div>

Я не вижу ссылки на class или className в файле конфигурации emmet .

Также заглянул в preferences.json и не нашел решения.

Кажется, это очень просто сделать. Что мне здесь не хватает?

мой редактор кода vscode.

Заранее спасибо за помощь:)

1 Ответ

4 голосов
/ 06 июня 2019

Конфигурация или включение Emment зависит от редактора.В VSCode Вам необходимо включить его для текущего рабочего пространства.Следуйте этим шагам.(Если вы заняты, следуйте полужирным буквам.)

  1. Нажмите Ctrl + , или Cmd + , или Файл> Настройки> Настройки .Откроется окно настроек.

  2. Перейдите на Вкладка Рабочее пространство> Расширения> Emmet .Вы увидите Edit in settings.json в разделе «Предпочтения».

    enter image description here

  3. Вы увидите следующее содержимое попо умолчанию (моя версия 1.35.0) 

    {
    "folders": [],
    "settings": {}
}

  4. Измените содержимое ниже 

    {
    "folders": [],
    "settings": {
        "emmet.includeLanguages": {
           "javascript": "javascriptreact"
        }
     }
}
  5. Сохраните файл Ctrl + S.

  6. Перейдите в файл .jsx,введите .myClass.Нажмите вкладку.Следует расширить до следующего.

    <div className="myClass"></div>

    РЕДАКТИРОВАТЬ: Чтобы получить {myClass} вместо «myClass»

    В настоящее время это ожидающий запрос функции .Но вы можете перейти к VSCodeInstallationDir/resources/app/extensions/emmet и применить патч.(используя npm i)

...