用于 React 中样式 CSS 的 Visual Studio Code Intellisense？

Question

在 React 中开发时，是否可以获得 CSS 的自动完成或建议或智能感知或其他东西？

例如，当我写这样的东西时，我希望能够看到 CSS 属性的所有可能性。 我知道如果我使用.css文件，我可以得到这个，但有时我想使用内联 CSS 来做一些事情，而且每次我都必须谷歌看看我可以使用什么，这真的很烦人。

Answer 1

也许你可以使用这个。 （类似于 React Native 中的StyleSheet.create() ）： https : //github.com/sutanlab/react-styles-hook

Answer 2

我不认为有一些扩展可以帮助你，因为 CSS 每天都在变得更好。 因此，您可以实现的最大目标是创建一个备忘单并将其用于每个项目。

您可以通过Zignd IntelliSense for CSS class names in HTML的IntelliSense for CSS class names in HTML安装IntelliSense for CSS class names in HTML 。 它是 VS Code 扩展，它在程序启动时加载您的 CSS 并为此提供自动完成功能。

Answer 3

我认为没有必要，因为在大多数情况下，如果您使用太多 CSS，您将具有模块化和外部 css 文件。 但对你来说，暂时将“语言模式”更改为 css 怎么样。 这可能需要额外的点击，但它会在 Visual Studio Code 中为您提供 CSS 自动完成或建议。

Answer 4

打开 VSCode 设置并搜索“css：启用的语言”。 单击“在 settings.json 中编辑”链接并将以下文本添加到 json 文件中：

...
"window.zoomLevel": 2,
"css.enabledLanguages": ["html", "jsx"]

}

完成此操作后，按 Shift+Ctrl+P 并找到命令“缓存 CSS class 定义”。 这对我有用。 例如，现在我可以在我的 jsx 代码中看到 Bootstrap 类。

Answer 5

如果您使用的是Styled-Components，请尝试使用此扩展：

扩展名称： vscode-styled-components by Julien Poissonnier

https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components