Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Styled Component FolderNew to Visual Studio Code? Get it now.
Styled Component Folder

Styled Component Folder

Piyush Singh

|
3 installs
| (0) | Free
Automatically fold styled-components blocks in VS Code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Styled Component Folder

Automatically fold and unfold styled-components blocks in your React/TypeScript code.
No more manual folding every time you open a file — keep your editor clean and focused. ✨


🚀 Features

  • Fold all styled-components in the current file with one command.
  • Unfold all styled-components instantly.
  • Default keybinding:
    • Ctrl + Alt + F → Fold all
  • Works with .tsx, .ts, .jsx, and .js files.

🖥️ Demo

Styled Components Folding Demo


📦 Installation

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for Styled Component Folder
  4. Install and reload

Or install from CLI:

code --install-extension PiyushSingh.styled-component-folder


⌨️ Usage

Open a file containing styled-components.

Run the command palette (Ctrl+Shift+P), then type:

Styled Components: Fold All

Styled Components: Unfold All

Or use the shortcut:

Ctrl + Alt + F → Fold All

🔧 Configuration

Currently none. Lightweight and simple by design.


🤝 Contributing

Issues and pull requests are welcome!
If you’d like to add features (like auto-fold on file open), fork the repo and submit a PR.


📜 License

MIT


Made with ❤️ by Piyush Singh(workspace.piyush01@gmail.com)
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft