在 Vscode 中编辑 Typescript 文件中的 css 代码时，所有文本都是红色的，我该如何解决这个问题？答案

【问题标题】：When editing css code within a Typescript file in Vscode all the text is red, how do i fix this?在 Vscode 中编辑 Typescript 文件中的 css 代码时，所有文本都是红色的，我该如何解决这个问题？
【发布时间】：2021-06-04 03:16:42
【问题描述】：

这是正在发生的事情的图片 [1]：https://i.stack.imgur.com/9yXUJ.png 这是代码。

export const GlobalStyle = createGlobalStyle`
  html {
    height: 100%;
  }
  body {
    background-image: url(${BGImage});
    background-size: cover;
    margin: 0;
    padding: 0 20px;
    display: flex;
    justify-content: center;
  }
  * {
    font-family: 'Catamaran', sans-serif;
    box-sizing: border-box;
  }
`;

【问题讨论】：

因为它在 TypeScript 中，所以它被视为一个没有任何特殊上下文的字符串（模板字符串，因为它位于反引号 ` 之间）。如果您想要语法高亮，请将其粘贴在 .css 文件中。
所以如果我把css代码放在它自己的文件中它会自行修复吗？
是的，但是您必须以不同的方式设置背景图像。
你可以使用扩展名vscode-styled-components
为什么要创建一个答案是对答案有效的答案的评论

标签： javascript html css typescript visual-studio-code

【解决方案1】：

扩展 vscode-styled-components 可以帮助格式化和着色您在样式组件中的代码或不同文件中的类似代码，包括 .tsx，上面的示例对我来说如下所示：

红色下划线是由于缺少带下划线的变量的 TypeScript 类型/函数。

【讨论】：