在 VSCode 中为 JSX 配置 Emmet

Posted 2023-02-21

【中文标题】在 VSCode 中为 JSX 配置 Emmet

【英文标题】：Configure Emmet for JSX in VSCode

【发布时间】：2019-10-12 04:01:30

【问题描述】：

我是这样使用 CSS 的：

const styles = 
  foo: 
    color: 'red'
  


<div className=styles.foo />

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

我在emmet's config file 中没有看到对class 或className 的任何引用。

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

看起来很简单。

我在这里错过了什么？

我的代码编辑器是 vscode。

【问题讨论】：

对于打字稿，我需要将文件扩展名从 .ts 更改为 .tsx

【参考方案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”是待处理的feature request。但是您可以转到<VSCodeInstallationDir>/resources/app/extensions/emmet 并应用补丁。 （使用npm i）

【讨论】：

我让 emmet 为 JSX 工作，但我想输出 <div className=styles.myClass /> - 感谢您的详细回答 :)

@goldylucks 很抱歉造成误解，我更正了答案中的错误。它扩展为 className。您需要为属性值使用变量

@goldylucks 看看 EDIT 部分

新版本的 vsc settings.json 看起来像这样 "emmet.preferences": , "emmet.includeLanguages": "javascript": "javascriptreact"

@KevinBatongbakal 谢谢。评论中提到了答案

【参考方案2】：

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

对于当前的 vs code 新版本，您会看到一个名为 Included Languages 的菜单。类似这样：

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

【讨论】：

很高兴它帮助你解决了你的问题@Sergi

谢谢，它在 2021 年 10 月仍然有效。