用於 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