在VSCode中为JSX配置Emmet

Question

我这样使用CSS：

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

<div className={styles.foo} />

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

我没有看到任何参考class或className在埃米特的配置文件。

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

这似乎很简单。我在这里想念什么？

我的代码编辑器是vscode。

在此先感谢您的帮助:)

Answer 1

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

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

1. 新版本默认会看到以下内容（我的版本是1.35.0）请看Kevin的评论

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

2. 把内容改成下面

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

   • 查看更多关于 emmet 配置

3. 保存文件 Ctrl + S。

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

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

编辑：获取 {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`)

Answer 2

按Ctrl +、 或Cmd + ,或File > Preferences > Settings。这将打开设置窗口。转到工作区选项卡 > 扩展 > Emmet。

对于新的 vs 代码版本，您将看到一个名为 Included Languages 的菜单。类似于：

进入后的JavaScript项目框中和类型后javascriptreact在值字段，最后按添加项目。您的最终输出必须如下图所示：