在 VSCode 中为 JSX 配置 Emmet

Question

我使用CSS的方式如下：

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

<div className={styles.foo} />

我希望Emmet将.foo扩展为<div className={styles.foo}></div>

在Emmet的配置文件中，我没有看到任何关于class或className的参考。

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

这似乎很简单。

我错过了什么吗？

我的代码编辑器是vscode。

- goldylucks

---

对于 TypeScript，我需要将文件扩展名从 .ts 更改为 .tsx。 - Ben Butterworth

Answer 1

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

进入 工作区选项卡 > 扩展 > Emmet。

对于当前的 VS Code 新版本，您将看到一个名为“已包含语言”的菜单，类似于此图：

在项目框中输入javascript，在值字段中输入javascriptreact，最后按添加项目。您的最终输出应如下图所示：

- Blessing

---

但它不支持像 th*4 这样的乘法，有什么办法可以修复吗？ - Rocky

@Rocky 在 React JSX 中 th*4 对我来说很好用。 - tony19

Answer 2

启用Emmet配置是编辑器特定的。在VSCode中，您需要为当前工作区启用它。按照以下步骤操作（如果您很忙，请注意粗体字母）：

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

1. 默认情况下，您将看到以下内容（我的版本为1.35.0）。有关新版本，请参见Kevin的评论。

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

将内容更改如下

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

• 了解有关emmet配置的更多信息

保存文件 Ctrl + S。

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

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

当前，获取 {myClass} 而非 "myClass" 是一个未解决的功能请求。但是您可以前往<VSCodeInstallationDir>/resources/app/extensions/emmet并应用补丁（使用npm i）。

- TRiNE

---

我已经让 Emmet 在 JSX 中工作了，但我想输出 <div className={styles.myClass} /> - 虽然感谢你详细的回答 :) - Shining Love Star

@goldylucks 对我误解感到抱歉，我已经在答案中更正了错误。它扩展为 className。你需要使用变量作为属性值。 - TRiNE

@goldylucks 请看编辑部分。 - TRiNE

使用新版本的 VSC，设置文件 settings.json 现在看起来是这样子的：{ "emmet.preferences": {}, "emmet.includeLanguages": { "javascript": "javascriptreact" } } 其中，emmet.includeLanguages 的作用是将 JavaScript 文件识别为 JavaScript React 文件。 - Kevin Batongbakal

@KevinBatongbakal 谢谢。评论是指在答案中提到的。 - TRiNE

Answer 3

我曾经有同样的问题。我找到了this篇文章，并得出结论，emmet不支持将类设置为除字符串以外的任何内容。用户Freestyle09 建议用户片段, 我已经为自己创建了一个片段，虽然它不是完整的解决方案，但这是我采用的解决方法。

我只是使用emmet创建html，然后将光标放在元素中，输入“ cn”，我已经为javascript和jsx定义了一个用户片段，如下所示：

    "jsx class name": {
        "prefix": ["cn", "className", "classname"],
        "body": ["className={${1:styles}.${2:class}}"]
    }

可能有更优雅的方法来完成它，可以从那里开始构建。我从用户片段页面开始。

- Dallin Moak