在VSCode中为JSX配置Emmet [英] Configure Emmet for JSX in VSCode

问题描述

我这样使用CSS:

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

<div className={styles.foo} />

，我希望emmet将.foo扩展到<div className={styles.foo}></div>

and I want emmet to expand .foo to <div className={styles.foo}></div>

在还调查了 preferences.json ，但没有找到解决方案.

Also looked into preferences.json and didn't find a solution.

这似乎很简单. 我在这里想念什么?

It seems very simple to do. What am I missing here?

我的代码编辑器是vscode.

my code editor is vscode.

在此先感谢您的帮助:)

Thanks in advance for help :)

推荐答案

Emment配置或启用是特定于编辑器的.在VSCode中，您需要为当前工作空间启用它.遵循这些步骤. (如果您很忙，请遵循粗体字母.)

Emment configuration or enabling is editor specific. In VSCode, You need to enable it for current work space. Follow theses steps. (If you are busy, follow bold letters.)

1. 按Ctrl + ,或Cmd + ,或文件>偏好设置>设置.这将打开设置"窗口.
2. 转到工作区标签>扩展名> Emmet .您会在首选项"下看到 Edit in settings.json .

1. Press Ctrl + , or Cmd + , or File > Preferences > Settings. This will open Settings window.
2. Go to Workspace tab > Extensions > Emmet. You'll see Edit in settings.json under Preferences.

1. 默认情况下，您将看到以下内容(我的版本为1.35.0)为新版本，请参见

2. 将内容更改为以下

   {
       "folders": [],
       "settings": {
           "emmet.includeLanguages": {
              "javascript": "javascriptreact"
           }
        }
   }
   

   • 查看更多关于Emmet配置
   • See more about emmet configuration

   保存文件 Ctrl + S.

   转到您的.jsx文件，键入.myClass.按下标签.它应该扩展为以下内容.

   Go to your .jsx file, type .myClass. Press tab. It should expand to following.

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

   要获取{myClass}而不是"myClass"

   Currently it's a pending [feature request][3]. But you can go to `VSCodeInstallationDir/resources/app/extensions/emmet` and apply the patch. (using `npm i`)
   

   这篇关于在VSCode中为JSX配置Emmet的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！