fala-dev

ESLintIntegrates ESLint JavaScript into VS Code.

GitLens — Git superchargedSupercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more

GitKraken

Material Icon ThemeMaterial Design Icons for Visual Studio Code

Philipp Kief

Remote - SSHOpen any folder on a remote machine using SSH and take advantage of VS Code's full feature set.

Microsoft

Remote - SSH: Editing Configuration FilesEdit SSH configuration files

Microsoft

Live ShareReal-time collaborative development from the comfort of your favorite tools.

Microsoft

Remote ExplorerView remote machines for SSH and Tunnels.

Microsoft

Code Spell CheckerSpelling checker for source code

Street Side Software

Tailwind CSS IntelliSenseIntelligent Tailwind CSS tooling for VS Code

Tailwind Labs

DotENVSupport for dotenv file syntax

mikestead

TODO Highlighthighlight TODOs, FIXMEs, and any keywords, annotations...

Wayou Liu

SQLiteExplore and query SQLite databases.

alexcvzz

Live Share Extension PackCollection of extensions that enable real-time collaborative development with VS Live Share.

Microsoft

PrismaAdds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.

Prisma

Shades of Purple🦄 A professional theme suite with hand-picked & bold shades of purple for your VS Code editor and terminal apps. One of the excellent, most downloaded, and top-rated VSCode Themes on the marketplace. Part of VSCode.pro course.

Ahmad Awais ⚡

Better TOMLBetter TOML Language support

bungcip

vscode-styled-componentsSyntax highlighting for styled-components

Styled Components

Polacode📸 Polaroid for your code

P & P

Fluent IconsFluent product icons for Visual Studio Code

Miguel Solorio

PostCSS Language SupportSyntax highlighting for modern and experimental CSS in VSCode

csstools

Console NinjaJavaScript console.log output and runtime errors right next to your code.

Wallaby.js

CSS ModulesVisual Studio Code extension for CSS Modules

clinyong

DenoA language server client for Deno.

denoland

Regex PreviewerRegex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.

Christof Marti

Omni ThemeDark theme created by Rocketseat 🚀

Rocketseat

MDXLanguage support for MDX

unified

Apollo GraphQLRich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform

Apollo GraphQL

Catppuccin for VSCode🦌 Soothing pastel theme for VSCode

Catppuccin

SymbolsA simple file icon theme for VS Code

Miguel Solorio

Min ThemeA minimal theme that comes in dark and light.

Miguel Solorio

Brazilian Portuguese - Code Spell CheckerBrazilian Portuguese dictionary extension for VS Code.

Street Side Software

Fix VSCode ChecksumsA VSCode extension to adjust checksums after changes to core files

Jürg Lehni

CSS-in-JSCSS-in-JS autocomplete and conversion

paulmolluzzo

GraphQL: Inline Operation ExecutionExecute graphql operations from your code (revived!)

GraphQL Foundation

FreeMarkerSyntax highlight for FreeMarker

Daniel Cortes

Rosé PineAll natural pine, faux fur and a bit of soho vibes for the classy minimalist

Rosé Pine

JavaScript Debugger Companion ExtensionCompanion extension to js-debug that provides capability for remote debugging

Microsoft

JavaScript DebuggerAn extension for debugging Node.js programs and Chrome.

Microsoft

Launchbase ThemeLaunchbase theme for vscode

Mayk Brito

iTerm2 Theme Sync

tusaeff

Table Visualizer for JavaScript ProfilesText visualizer for profiles taken from the JavaScript debugger

Microsoft

reTypewriterReply the steps of your changes at ease.

Anthony Fu

vscode-styled-components

v1.7.8

Styled Components

1,502,171

(23)

Syntax highlighting for styled-components

Install

vscode-styled-components

Styled Components has moved! Make sure you're downloading it from here: https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components. The jpoissonnier.vscode-styled-components version will recieve no more updates.

Syntax highlighting and IntelliSense for styled-components.

Uses a CSS grammar built on top of language-sass and language-css.

Install

Inside VSCode, press Ctrl+P, and enter:

ext install vscode-styled-components

It should be the top result.

[Source]

Features

Syntax highlighting for styled components in JavaScript and TypeScript.
Detailed CSS IntelliSense while working in styled strings.
Syntax error reporting.

Usage

The 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 issue

Please 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.

Contributing

see Contributing

Troubleshooting

There's no syntax highlighting?

Syntax Highlighting is specifically made to work with styled so make sure your default import is styled and nothing else.

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 typescriptreact or javascriptreact. Using the correct extensions (jsx, tsx) should help with this.

Emmet tab completion isn't working

Be sure to include "emmet.triggerExpansionOnTab": true in your VSCode settings to enable tab completion.** More settings and instructions can be found here.

Emmet is auto completing HTML tags instead of CSS

This 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 valid

Property 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!

See these issues:

https://github.com/styled-components/vscode-styled-components/issues/357
https://github.com/styled-components/vscode-styled-components/issues/343

Github