CSS 在 VS Code 中檢查樣式組件時出錯

Question

我想知道是否有解決方案（插件、package 等）在使用樣式化組件時在 VS 代碼中進行真正的 css 錯誤檢查。

編輯以澄清：下面的代碼示例是一個錯誤（我知道），但我想知道一個用於顯示該錯誤的 VS 代碼的工具解決方案。 常規的 linter 設置不會捕捉到這一點。

我安裝了一個 linter，它可以捕獲語法錯誤，但是像下面這樣的“無效屬性值”呢：

const StyledSubHitElDiv = styled.div`
  display: down
`;

我找不到任何東西，因為我已經安裝了 stylelint 和 vs-code-styled-components 我相信我已經運行了正常的設置。

非常感謝您！

Answer 1

我今天正在尋找同樣的東西。
我通過vscode -stylelint擴展使用 stylelint 並且想知道為什么它沒有捕獲您上面描述的錯誤類型。

在 stylelint GitHub 上，我發現了一個關於這個主題的討論，其中一位 stylelint 開發人員建議使用stylelint-csstree-validator 。

我試了一下，它按預期工作。 非常好！

Answer 2

我安裝了 intelliJ 並且無效值有錯誤下划線以修復 scss 和 css。

vscode-csstree 僅適用於 css。