如何在VS Code中为Emotion的template string css启用语法高亮

• 第一步：安装匹配插件
  安装 VS Code 官方插件市场中的 vscode-styled-components 插件，该插件原生支持 CSS-in-JS 模板字符串的语法高亮、语法校验与代码提示，不属于仅提供代码片段的工具类插件。
• 第二步：修改编辑器配置项
  打开 VS Code 的 settings.json 配置文件，新增以下配置：

{
  // 让插件识别 Emotion 相关的无导入模板标签
  "styled-components.tags": ["css", "createGlobalStyle", "Global"],
  // 启用 CSS 语法校验，原生支持 CSS 变量与 kebab-case 语法
  "styled-components.validate": true,
  // 关联 Emmet 提示，模板字符串内写 CSS 可以和普通 CSS 文件一样触发补全
  "emmet.includeLanguages": {
    "javascript": "css",
    "typescript": "css",
    "javascriptreact": "css",
    "typescriptreact": "css"
  },
  // 可选配置：让模板字符串内的 CSS 配色和全局 CSS 文件配色保持一致，可根据自己的主题调整色值
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "source.css.styled",
        "settings": {
          "foreground": "#CE9178"
        }
      }
    ]
  }
}

• 第三步：无导入场景适配
  如果没有在文件顶部导入 css 函数，可在模板字符串前增加 /* css */ 注释标记强制触发语法识别，不会影响代码运行效果，示例如下：

// index.js
render(
  <Global
    styles={/* css */`
      html {
        // css 变量与常规 kebab-case 属性均可正常高亮
        --color-base: white;
        --color-text: #434449;
        font-size: 16px;
       }
    `}
  />
)

上述配置不会破坏你当前已生效的 css({ camelCaseCssProps:...}) 驼峰 CSS 对象写法的高亮效果，两种语法可以共存。

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