WebStorm开发Next.js项目时CSS Modules类名自动补全如何实现？

WebStorm 及 IntelliJ 全家桶原生支持 CSS Modules 场景下的类名自动补全和 Emmet 快捷生成功能，按照以下步骤配置即可使用：

1. 确认CSS Modules识别规则 #

• 打开WebStorm设置（Mac快捷键⌘,，Windows/Linux快捷键Ctrl+Alt+S）
• 依次进入「编辑器」→「代码样式」→「Style Sheets」→「CSS Modules」
• 确认命名规则和项目匹配，默认配置即可适配绝大多数Next.js项目
• 确保你的样式文件使用.module.css/.module.scss这类标准CSS Modules后缀，IDE会自动识别对应文件为CSS Modules类型

2. 调整Emmet生成规则 #

• 仍在设置页，进入「编辑器」→「Emmet」→「HTML」
• 找到「应用CSS类的属性」选项，点击后方编辑按钮
• 新增React框架规则，属性值填写className={styles.*}（如果你的项目里CSS Modules导入命名不是styles，可以对应修改为css.*等自定义命名）
• 保存配置后即可生效

3. 实际使用效果 #

配置完成后，你输入div.avatar按下TAB的操作，会自动生成<div className={styles.avatar}></div>，输入类名阶段也会自动弹出当前导入的CSS Modules文件内所有类名的补全提示，无需手动编写。

• 若未出现补全提示，先确认你已经在当前组件顶部正确导入了CSS Modules文件：import styles from './index.module.css'，导入命名需要和你在Emmet配置里填写的前缀保持一致
• TypeScript项目可以额外添加CSS Modules类型声明文件，即可获得更精准的类型提示，不会出现类名飘红问题

内容的提问来源于stack exchange，提问作者Andrew Savetchuk