visual-studio-code - 在非 typescript 项目中为 vscode-styled-plugin 配置标签

Question

我正在使用样式化组件(通过 Emotion)并且我找到了 vscode-styled-components插件以在 vscode 中提供适当的语法突出显示。效果很好。

开箱即用，它需要 4 个标签之一与模板文字一起使用，以将 block 识别为 css 字符串:“styled”、“css”、“injectGlobal”或“c​​reateGlobalStyle”。

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

插件文档指向它对配置信息的依赖:typescript-styled-components .它展示了如何通过 typescript 的 compilerOptions 配置附加标签的使用。我的 React 项目不是用 typescript 构建的，所以这不是我的选择。

问题:在非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 项目的设置

另请注意，标签选项目前不影响语法高亮，仅影响智能感知