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

【问题标题】：Configure tags for vscode-styled-plugin in non-typescript project在非打字稿项目中为 vscode-styled-plugin 配置标签
【发布时间】：2019-05-10 05:20:01
【问题描述】：

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

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

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

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

问题：有没有办法在非打字稿项目中配置标签的使用？

【问题讨论】：

标签： visual-studio-code styled-components

【解决方案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 项目的设置

还要注意标签选项目前不影响语法高亮，只影响智能感知

【讨论】：

我还没有和jsconfig.json一起工作。我也为插件名称尝试了“vscode-styled-plugin”。还有什么需要做的吗？
你是直接使用插件还是自带插件的vscode扩展？还要检查您的 js 文件是否是 jsconfig 的一部分，方法是打开它们并运行 JavaScript: Go to project configuration。它应该打开jsconfig
我正在使用 vscode 扩展。是的，这些文件是 jsconfig 的一部分。