VS Code中Next.js的Emmet className自动补全自定义配置问询

云原生阿岚

2026-8-2

修改VS Code中Next.js的Emmet自动补全为className={styles.}

方法一：自定义Emmet配置实现

打开VS Code设置：使用快捷键Ctrl+,（Windows/Linux）或Cmd+,（Mac），或点击左下角设置图标选择「设置」
在设置搜索框输入emmet.extensionsPath，点击「编辑 in settings.json」

在settings.json中添加以下配置：

"emmet.extensionsPath": "./.vscode/emmet",
"emmet.includeLanguages": {
  "javascriptreact": "html",
  "typescriptreact": "html"
}

在项目根目录的.vscode文件夹下创建emmet子目录，在该目录中新建custom-snippets.json文件，写入：
```
{
  "html": {
    "snippets": {
      "class": "className={styles.}"
    }
  }
}
```
重启VS Code后，在JSX/TSX文件中输入.your-class，Emmet会自动补全为<div className={styles.your-class}></div>

方法二：使用VS Code自定义代码片段（Emmet配置失效时备选）

打开命令面板：快捷键Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入「Configure User Snippets」，选择javascriptreact.json（TSX文件选typescriptreact.json）

在打开的代码片段文件中添加以下内容：

{
  "Styled Class Name": {
    "prefix": ".",
    "body": [
      "<${2:div} className={styles.${1}}>$0</${2:div}>"
    ],
    "description": "生成带styles类名的JSX标签"
  }
}