Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Styled-Components ExtractorNew to Visual Studio Code? Get it now.

Styled-Components Extractor

FallenMax

|
21,097 installs
| (1) | Free
Generate styled-components from JSX tags. A faster styled-component workflow.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Styled-Components Extractor

Generate styled-components from JSX tags.

  1. (Optional) Use Emmet to create JSX element tree
  2. Extract unbound components to clipboard, then paste it where approriate (this extensions extract and copy for you)
  3. (Optional) If you are using TypeScript and pasted them in another file, your can auto import those styled components with help of VS Code

screenshot

Usage

Use VS Code Command: Extract styled-components (or Extract exported styled-components)

Optionally, You can bind these commands to shortcuts via File -> Preferences -> Keyboard Shortcuts.

Example:

[
  {
    "key": "cmd+alt+e",
    "command": "styledComponentsExtractor.extract",
    "when": "editorFocus"
  },
  {
    "key": "ctrl+alt+e",
    "command": "styledComponentsExtractor.extractExported",
    "when": "editorFocus"
  }
]

Configuration

{
  // Add `import styled from 'styled-component'` statement if variable `styled` is unbound
  "styledComponentsExtractor.addImportStatement": true
}

Buy me a coffee

https://www.buymeacoffee.com/fallenmax

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2022 Microsoft