如何为styled-components模板字面量开启语法高亮？One Dark Pro主题无效果

问题重现 #

在React项目中使用styled-components编写样式时，One Dark Pro主题下模板字面量内的CSS代码全为绿色，没有区分属性、值等的语法高亮：

import styled from 'styled-components'

const Button = styled.button`
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
`

解决方案 #

• 安装专用语法高亮插件
  VS Code默认不会自动识别styled-components模板内的CSS语法，需要安装vscode-styled-components插件。安装后，插件会自动解析模板字面量里的CSS，配合One Dark Pro主题就能实现属性、值、颜色等的差异化高亮。

• 检查文件语言模式
  确保当前React文件的语言模式设置为JavaScript React（右下角状态栏可切换）。如果被识别为普通JavaScript，插件可能无法正常触发语法高亮。

• 自定义主题颜色（可选）
  如果安装插件后仍不满意高亮效果，可以在VS Code的settings.json中自定义token颜色，针对styled-components的语法调整：

"editor.tokenColorCustomizations": {
  "[One Dark Pro]": {
    "textMateRules": [
      {
        "scope": "meta.embedded.line.css.styled-components",
        "settings": {
          "foreground": "#abb2bf"
        }
      },
      {
        "scope": "support.type.property-name.css.styled-components",
        "settings": {
          "foreground": "#c678dd"
        }
      },
      {
        "scope": "string.quoted.double.css.styled-components",
        "settings": {
          "foreground": "#98c379"
        }
      }
    ]
  }
}

根据自己的喜好调整foreground对应的颜色值即可。

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