在非打字稿项目中为 vscode-styled-plugin 配置标签

Question

我正在使用样式化组件（通过 Emotion）并且我发现 vscode-styled-components 插件可以在 vscode 中提供适当的语法高亮显示。效果很好。

开箱即用，它需要 4 个标签之一与模板文字一起使用，以将块识别为 css 字符串："styled"、"css"、 "injectGlobal" 或 "createGlobalStyle"。

我想使用自己的自定义标签而不是这 4 个中的任何一个。

插件文档指出其对配置信息的依赖：typescript-styled-components。它展示了如何通过打字稿的 compilerOptions 配置附加标签的使用。我的 React 项目不是用打字稿构建的，所以这对我来说不是一个选项。

问题：在非typescript项目中，有什么方法可以配置标签的使用吗？

Answer 1

只需使用 jsconfig.json 文件而不是 tsconfig.json。在项目的根目录下，创建一个 jsconfig.json 文件，其内容为：

{
  "compilerOptions": {
    "target": "es6",
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "tags": [
          "styled",
          "css",
          "sty"
        ]
      }
    ]
  },
  "exclude": [
    "node_modules",
    "**/node_modules/*"
  ]
}

jsconfigs 为 javascript 个项目定义设置

另请注意，标签选项目前不影响语法突出显示，仅影响智能感知

在非打字稿项目中为 vscode-styled-plugin 配置标签

Configure tags for vscode-styled-plugin in non-typescript project

visual-studio-code

styled-components