React中Emmet缩写：如何生成带{styles.##}的className属性？

默认Emmet确实没有内置直接生成className={styles.xxx}的缩写，但你可以通过自定义语法规则实现这个功能，步骤如下：

• 以VS Code为例，打开settings.json（快捷键Ctrl/Cmd + Shift + P，输入"Open Settings (JSON)"）
• 添加针对React文件的Emmet配置：

  "emmet.syntaxProfiles": {
    "javascriptreact": {
      "attr_quotes": "single",
      "abbreviations": {
        ".": "className={styles.$1}"
      }
    },
    "typescriptreact": {
      "attr_quotes": "single",
      "abbreviations": {
        ".": "className={styles.$1}"
      }
    }
  }
  

• 配置完成后，输入div.parent就能直接生成<div className={styles.parent}></div>，和你用..生成styleName的逻辑完全对应

补充说明：你提到的..缩写是Emmet针对styleName属性（常见于CSS Modules配合babel-plugin-react-css-modules的场景）的隐藏规则，而自定义上述配置后，普通的.缩写就会适配className结合CSS Modules的写法。

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