How to compose styled-components FASTER?
- (Recommended) Use Emmet to create JSX element tree
- Extract unbound components to clipboard, then paste it where approriate
- (Recommended) Use TypeScript to
auto import
those components
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"
}
]
{
// Add `import styled from 'styled-component'` statement if variable `styled` is unbound
"styledComponentsExtractor.addImportStatement": true
}
First release