{"id":13483377,"url":"https://github.com/styled-components/vscode-styled-components","last_synced_at":"2025-10-02T12:30:37.135Z","repository":{"id":38859681,"uuid":"73508125","full_name":"styled-components/vscode-styled-components","owner":"styled-components","description":"Syntax highlighting for styled-components","archived":true,"fork":false,"pushed_at":"2024-06-30T14:44:51.000Z","size":1360,"stargazers_count":918,"open_issues_count":72,"forks_count":118,"subscribers_count":14,"default_branch":"main","last_synced_at":"2024-12-06T21:20:12.523Z","etag":null,"topics":["hacktoberfest","intellisense","javascript","syntax-highlighting","typescript","vscode"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styled-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-11T20:11:43.000Z","updated_at":"2024-11-01T23:36:53.000Z","dependencies_parsed_at":"2023-12-13T21:06:56.600Z","dependency_job_id":null,"html_url":"https://github.com/styled-components/vscode-styled-components","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fvscode-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fvscode-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fvscode-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fvscode-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styled-components","download_url":"https://codeload.github.com/styled-components/vscode-styled-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234983193,"owners_count":18917435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","intellisense","javascript","syntax-highlighting","typescript","vscode"],"created_at":"2024-07-31T17:01:10.572Z","updated_at":"2025-10-02T12:30:31.806Z","avatar_url":"https://github.com/styled-components.png","language":"JavaScript","readme":"**NOTE**: _Sadly this repository is no longer supported or updated by the Styled Components team as of June 2024. If you wish to help develop this code please reach out on Discord or in the [issue](https://github.com/styled-components/vscode-styled-components/issues/275). We can unarchive this repo if we get contributors but until then it will remain the way it is._\n\n\n# vscode-styled-components\n\nStyled Components has moved! Make sure you're downloading it from here:\nhttps://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components. The `jpoissonnier.vscode-styled-components ` version will recieve no more updates.\n\n\u003ca href=\"https://discord.gg/hfGUrbrxaU\"\u003e![Discord](https://img.shields.io/discord/818449605409767454?logo=discord)\u003c/a\u003e\n\nSyntax highlighting and IntelliSense for [styled-components](https://github.com/styled-components/styled-components).\n\n![Syntax highlighting in action](demo.gif)\n\nUses a CSS grammar built on top of [language-sass](https://github.com/atom/language-sass) and [language-css](https://github.com/atom/language-css).\n\n## Install\n\nInside VSCode, press `Ctrl+P`, and enter:\n\n```\next install vscode-styled-components\n```\n\nIt should be the top result.\n\n[[Source](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)]\n\n## Features\n\n- Syntax highlighting for styled components in JavaScript and TypeScript.\n- Detailed CSS IntelliSense while working in styled strings.\n- Syntax error reporting.\n\n## Usage\n\nThe styled-components extension adds highlighting and IntelliSense for styled-component template strings in JavaScript and TypeScript. See [plugin configuration](https://github.com/styled-components/typescript-styled-plugin#configuration) for information on configuring the linter and other language features.\n\n## Raising an issue\n\nPlease check the issues list to see if it has already been raised. If it has you can vote on it with a thumbsUp emoji.\nIssues with the most votes tend to be prioritised.\n\n## Contributing\n\nsee [Contributing](./CONTRIBUTING.md)\n\n## Troubleshooting\n\n### There's no syntax highlighting?\n\nSyntax Highlighting is specifically made to work with `styled` so make sure your default import is `styled` and nothing else.\n\nSee: https://github.com/styled-components/vscode-styled-components/issues/118#issuecomment-833007295\n\nSecondly make sure your file is set to the right language. It should be `typescriptreact` or `javascriptreact`. Using the correct extensions (jsx, tsx) should help with this.\n\n### Emmet tab completion isn't working\n\nBe sure to include `\"emmet.triggerExpansionOnTab\": true` in your VSCode settings to enable tab completion.\\*\\* More settings and instructions can be found [here](https://code.visualstudio.com/docs/editor/emmet).\n\n### Emmet is auto completing HTML tags instead of CSS\n\nThis 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](https://github.com/styled-components/vscode-styled-components/issues/191) in this repo but there's nothing that can be done on our end.\n\n### I get \"unknown property: X\" on a property I know is valid\n\nProperty look up comes from the [css language service](https://github.com/microsoft/vscode-css-languageservice) which in turn comes from [MDN Data](https://github.com/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\n\nIf 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.\n\n### Intellisense is not working!\n\n#### It hasn't worked since updating to v1.7.8!\n\nThis 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.\nSo, 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\nSee: https://github.com/styled-components/vscode-styled-components/issues/387\n\nIf it's not the above, See these issues:\n\n- https://github.com/styled-components/vscode-styled-components/issues/357\n- https://github.com/styled-components/vscode-styled-components/issues/343\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fvscode-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyled-components%2Fvscode-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fvscode-styled-components/lists"}