如何在Next.js项目的JS文件中启用Emmet功能？

以下操作默认针对VS Code编辑器，其他编辑器可参考对应逻辑修改Emmet语言关联配置。

1. 全局配置（对所有项目生效） #

你可以选两种方式任意一种操作：

• 图形界面操作
  • 打开VS Code设置页，搜索Emmet: Include Languages配置项
  • 点击「添加项」按钮，左侧输入框填javascript，右侧输入框填javascriptreact，保存即可
• 配置文件直接修改
  • 按下Ctrl+Shift+P（Mac系统为Command+Shift+P）调出命令面板，输入Preferences: Open Settings (JSON)并回车
  • 在打开的JSON配置文件中添加以下两行配置：

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  // 开启按Tab键触发Emmet补全，已经开启的可以忽略这行
  "emmet.triggerExpansionOnTab": true
  

2. 项目局部配置（仅对当前Next.js项目生效） #

如果不想修改全局配置，可以单独给当前项目配置：

• 在项目根目录新建.vscode文件夹，在文件夹内新建settings.json文件
• 将上面的全局配置内容复制到这个文件中保存即可，该配置只会作用于当前项目，不会影响其他项目的编辑器设置

配置验证 #

打开项目内任意.js格式的代码文件，输入div.test>span后按下Tab键，如果自动生成以下代码说明配置生效：

<div className="test">
  <span></span>
</div>

如果输入缩写后没有自动弹出Emmet补全提示，可以按下Ctrl+Space（Mac系统为Control+Space）手动触发补全列表，选中对应Emmet补全项即可。

内容的提问来源于stack exchange，提问作者Adheep George Paul