visual-studio-code - 在 VSCode 中为 JSX 配置 Emmet

Question

我像这样使用 CSS:

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

<div className={styles.foo} />

我想让 emmet 扩展 .foo至 <div className={styles.foo}></div>我没有看到任何对 class 的引用或 className在 emmet's config file .
还看了 preferences.json 并没有找到解决方案。
做起来似乎很简单。
我在这里缺少什么？
我的代码编辑器是 vscode。

Answer 1

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

按 Ctrl + ,或 Cmd + ,或 文件 > 首选项 > 设置 .这将打开设置窗口。

转至 工作区选项卡 > 扩展 > Emmet .你会看到 Edit in settings.json 在首选项下。

新版本默认会看到以下内容(我的版本是1.35.0)请看Kevin's comment

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

将内容改为以下

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

查看更多 about emmet configuration

保存文件 Ctrl + S .

转到您的 .jsx文件，类型 .myClass .按选项卡。它应该扩展到以下。

<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`)