如何在 React .tsx 文件中将 CSS / SCSS / PostCSS 写为 VSCode 和 WebStorm 中的 JavaScript 字符串？

Question

我正在尝试建立一个新的自我约定来使我的 React 代码更好地组织，如下所示：

export default function HeaderExample() {
  const compStyle = getStyle();
  return (
    <>
      <h1>Hello World</h1>
      <style jsx>{compStyle}</style>
    </>
  )
}

function getStyle() {
  return `
        h1 {
          color: blue;
        }
      `
}

它工作正常，但是在 getStyle() 中编写 return 非常困难，因为我没有从 IDE.

获得格式化或语法高亮帮助

我怎样才能得到这些？插件/库/设置/给它一个类型？这些都会有所帮助。

同时，您认为这会导致未来出现任何问题吗？

Answer 1

在 vscode 中您可以使用 ES6 String css vscode 扩展

像这样在`前加上/*css*/

function getStyle() {
  return /*css*/`
        h1 {
          color: blue;
        }
      `
}

Answer 2

WebStorm 具有 built-in 功能 Language Injection。为此。

Here 您会找到该功能的详细文档。

简短版本。

将光标置于相关代码块中并单击 alt + enter。

在下拉列表中，select Inject language or reference。不点击右侧，再次点击 enter。

一个 window 应该打开，现在 select 您要注入的语言。如果你 select CSS 结果应该是：

回答你的第二个问题。它不应该在路上造成任何麻烦。

编辑补充：

可以通过评论触发相同的行为laguange=css

如何在 React .tsx 文件中将 CSS / SCSS / PostCSS 写为 VSCode 和 WebStorm 中的 JavaScript 字符串？

How to write CSS / SCSS / PostCSS inside React .tsx file as JavaScript String in VSCode and WebStorm?

javascript

webstorm

reactjs

visual-studio-code

vscode-settings