NOTE: This is a maintained fork of styled-components/vscode-styled-components, which is no longer updated by the Styled Components team (as of June 2024). This fork is published as vscode-styled-componentsSyntax highlighting and IntelliSense for styled-components.
Uses a CSS grammar built on top of language-sass and language-css. InstallInside VSCode, press It should be the top result. [Source] Features
UsageThe styled-components extension adds highlighting and IntelliSense for styled-component template strings in JavaScript and TypeScript. See plugin configuration for information on configuring the linter and other language features. Raising an issuePlease check the issues list to see if it has already been raised. If it has you can vote on it with a thumbsUp emoji. Issues with the most votes tend to be prioritised. Contributingsee Contributing TroubleshootingThere's no syntax highlighting?Syntax Highlighting is specifically made to work with See: https://github.com/styled-components/vscode-styled-components/issues/118#issuecomment-833007295 Secondly make sure your file is set to the right language. It should be Emmet tab completion isn't workingBe sure to include Emmet is auto completing HTML tags instead of CSSThis is an upstream issue in VSCode unfortunately. The root cause is here: https://github.com/microsoft/vscode/issues/119736 which itself was raised from https://github.com/microsoft/vscode/issues/51537. There was an issue raised in this repo but there's nothing that can be done on our end. I get "unknown property: X" on a property I know is validProperty look up comes from the css language service which in turn comes from MDN Data. If its a custom property, or something that is not in MDN you can add your own property like so: https://github.com/microsoft/typescript-styled-plugin/issues/58#issuecomment-444733368 If however you believe this property is standard and thus missing you can raise this issue with either one of the above projects; please check for any raised issue first. Intellisense is not working!It hasn't worked since updating to v1.7.8!This is due to a clash between TypeScript 5.0.0 and this extension. When VSCode released March 2023 that had TypeScript 5.X set by default which 1.7.8 supports but lower versions don't. So, if you're not getting intellisense its most likely because you've updated the extension but haven't updated your version of TypeScript yet. The quick option is to downgrade to v1.7.5, the long term option is to migrate to TypeScript 5.X See: https://github.com/styled-components/vscode-styled-components/issues/387 If it's not the above, See these issues: |
