配置emmet jsx className扩展

Question

我这样使用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。

在此先感谢您的帮助：）

Answer 1

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

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

在项目框中输入 javascript ，然后在值字段中输入 javascriptreact ，然后按添加项目。您的最终输出必须类似于：

Answer 2

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

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

2. 转到工作区标签>扩展> Emmet 。您会在“偏好设置”下看到 Edit in settings.json 。

   

3. 默认情况下，您会看到以下内容（我的版本是1.35.0）

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

4. 将内容更改为以下

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

   • 查看更多about emmet configuration
5. 保存文件 Ctrl + S。

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

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

   编辑：获取{myClass}而不是“ myClass”

   当前它是一个待处理的feature request。但是您可以转到VSCodeInstallationDir/resources/app/extensions/emmet并应用补丁。 （使用npm i）