VSCode里Emmet在JS文件中为啥不生效？

♫梓辰提问于 2026-03-18 15:17:23 阅读 42

工具

我在写React组件的时候，想用Emmet快速生成JSX结构，比如输入div.container然后按Tab展开，但在.js文件里完全没反应。我已经确认Emmet启用了，HTML文件里也能用。

是不是JS文件默认不支持Emmet？还是我哪里配置错了？试过在settings.json里加了"emmet.includeLanguages": {"javascript": "javascriptreact"}，但还是不行。

function App() {
  // 这里输入 div.header 按 Tab 没有展开成 
  return (
    <div>
      {/* 希望在这里能用 Emmet */}
    </div>
  );
}

Emmet VSCode 开发工具

我来解答赞 6 收藏

反馈

2 条解答

仪凡 Lv1

在VSCode里让Emmet支持JSX确实需要一些配置。首先你的配置方向是对的，但可能有点小问题。

你可以在settings.json里这样写：

{

  "emmet.includeLanguages": {

    "javascript": "javascriptreact"

  },

  "emmet.triggerExpansionOnTab": true

}

另外要注意，确保你在JSX语法块里使用Emmet。就是说在函数组件的return里面，在 <> 或者 <React.Fragment> 里面才能触发。

还有个安全小提示，用Emmet快速生成代码很方便，但记得检查生成的内容，防止意外引入不安全的属性或标签，特别是在处理用户输入时要特别小心。

最后提醒下，有时候编辑器缓存的问题会导致设置没生效，试试重启VSCode。如果还不行，看看扩展商店里有没有更新VSCode或者Emmet相关插件。我遇到过几次都是插件问题导致的功能异常，真是让人头疼啊。

2026-03-27 07:02

夏侯世霖 Lv1

问题在于你不能在注释里展开Emmet，必须在JSX标签内部才能触发。

把光标放在

和

之间，新起一行输入 div.header，然后按Tab就能展开。

如果还不行，检查下你的文件扩展名是不是 .jsx 或者 .tsx，纯 .js 文件有时候识别不到JSX语境。

settings.json里改成这样试试：

{

  "emmet.includeLanguages": {

    "javascript": "javascriptreact",

    "javascriptreact": "javascriptreact",

    "typescript": "typescriptreact",

    "typescriptreact": "typescriptreact"

  }

}

2026-03-18 16:02