Visual Studio Code 中的 CSS 错误检查样式组件

Question

使用样式组件时，是否有解决方案（插件、包等）可以在 Visual Studio Code 中进行真正的 CSS 错误检查？

下面的代码示例是一个错误（我知道），但我想知道 Visual Studio Code 的工具解决方案可以显示这一点。常规的 linter 设置无法捕捉到这一点。

我安装了一个 linter，它可以捕获语法错误，但是“无效的属性值”又如何，如下所示：

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

我找不到任何东西，因为我已经安装了Stylelint和vs-code-styled-components，我相信我已经运行了正常的设置。

Answer 1

我今天也在寻找同样的东西。我通过 vscode-stylelint
扩展 使用Stylelint，并且想知道为什么它不能捕获您上面描述的错误类型。

在 Stylelint GitHub 页面上，我发现了有关此主题的讨论，其中一位 Stylelint 开发人员建议使用stylelint-csstree-validator。

我尝试了一下，效果符合预期。非常好！