如何配置VS Code注释快捷键以适配style jsx代码场景

云上老周

2026-9-24

解决style jsx注释快捷键失效的方法

这个问题的本质是VS Code默认将<style jsx>标签内的模板字符串识别为JSX上下文，按下注释快捷键时会调用JSX注释规则，生成无法被CSS识别的{/* */}格式，只要将该区域的语法识别为CSS规则即可解决，两种可行方案如下：

方案一：安装专属扩展（操作门槛最低）

在VS Code扩展商店搜索安装styled-components-jsx-syntax扩展，安装完成后重启编辑器即可自动生效。
扩展会自动识别<style jsx>包裹的代码段，按下ctrl+/时会生成CSS标准的/* 注释内容 */格式，完全兼容style jsx的语法规则。

方案二：手动修改编辑器配置（无需安装扩展）

按下快捷键ctrl + ,打开VS Code设置页，在顶部搜索框输入settings.json，点击「编辑settings.json」进入配置文件编辑页
在配置文件中添加如下规则：

{
  "files.associations": {
    "*.jsx": "javascriptreact",
    "*.tsx": "typescriptreact"
  },
  "emmet.includeLanguages": {
    "javascriptreact": "html",
    "typescriptreact": "html"
  },
  "[javascriptreact]": {
    "editor.commentStrategy": "indentation"
  },
  "[typescriptreact]": {
    "editor.commentStrategy": "indentation"
  }
}