'CSS Error Checking styled components in VS Code

I was wondering if there is a solution (plugin, package, etc.) to get real css error checking in VS code, when using styled components.

Edit to clarify: The code example below is an error (I know that), but I would like to know of a tooling solution for VS code that shows that. The regular linter setup does not catch that.

I have a linter installed, which catches syntax error, but what about "Invalid property values" like the following:

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

I could not find anything and since I have already installed stylelint and vs-code-styled-components I believe I have the normal setup running.

Thank you very much in advance!

javascriptcssvisual-studio-codestyled-components


Solution 1:[1]

I was searching for the same thing today.
I was using stylelint via the vscode-stylelint extension and was wondering why it doesn't catch the type of errors you're describing above.

On the stylelint GitHub I discovered a discussion on this topic where one of the stylelint developers recommends using the stylelint-csstree-validator.

I tried it out, and it works as expected. Really nice!

Solution 2:[2]

I installed intelliJ and invalid value have the error underline to fix for both scss and css.

vscode-csstree work only for css.

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Boris Month
Solution 2

Related Questions