Question

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

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

我想使用自己的自定义标签，而不要使用这4个标签。

插件文档指向其对配置信息的依赖性：typescript-styled-components。它显示了如何通过typecrips的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样式的插件配置标签

1 个答案: