Styled-Components-Snippets
This is one of the more full-fledged snippet set for styled-components. Originally made for personal use, thought I'd share.
For all snippets, please hit TAB multiple times after snippet is output to cycle through its placeholders for convenient editing.
Snippets List
**IMPORTANT!** To make full use of the snippet: Type snippet, press TAB/ENTER, and then press TAB **AGAIN** each time to cycle through the snippet's placeholders.
Import & Miscellaneous Styled Snippets
| Snippet |
Output |
ims→ |
Import styled-components |
imsc→ |
Import styled-components + create Styled Component defaulted to file name |
imsce→ |
Import, create, and export Styled Component defaulted to file name |
imsg→ |
Import createGlobalStyle |
imsgc→ |
Import createGlobalStyle + create globalStyle Component |
imscss→ |
Import css |
imswt→ |
Import withTheme |
scp→ |
Creates ${props => props.theme.property}; *Press TAB to edit ".property" |
Import Styled + React Snippets
| Snippet |
Output |
imsr→ |
Import, create, and export React Functional(stateless) + styled-components |
imsrc→ |
Import, create, and export React Class(stateful) Function + styled-components |
Styled Component Snippets
| Snippet |
Output |
sc→ |
Base Styled Component |
sce→ |
Import, create, & export base Styled Component |
sca→ |
Styled Anchor Component |
scae→ |
Import, create, & export Styled Anchor Component |
scb→ |
Styled Button Component |
scbe→ |
Import, create, & export Styled Button Component |
scd→ |
Styled Div Component |
scde→ |
Import, create, & export Styled Div Component |
sch1→ |
Styled H1 Component |
sch1e→ |
Import, create, & export Styled H1 Component |
| ... |
... |
sch6→ |
Styled H6 Component |
sch6e→ |
Import, create, & export Styled H6 Component |
scimg→ |
Styled IMG Component |
scimge→ |
Import, create, & export Styled IMG Component |
scin→ |
Styled Input Component |
scine→ |
Import, create, & export Styled Input Component |
scli→ |
Styled LI Component |
sclie→ |
Import, create, & export Styled LI Component |
scol→ |
Styled OL Component |
scole→ |
Import, create, & export Styled OL Component |
scp→ |
Styled Paragraph Component |
scpe→ |
Import, create, & export Styled Paragraph Component |
scs→ |
Styled Span Component |
scse→ |
Import, create, & export Styled Span Component |
scul→ |
Styled UL Component |
scule→ |
Import, create, & export Styled UL Component |
HTML5 Snippets
| Snippet |
Output |
sch→ |
Styled Header Component |
sche→ |
Import, create, & export Styled Header Component |
scn→ |
Styled Nav Component |
scne→ |
Import, create, & export Styled Nav Component |
scm→ |
Styled Main Component |
scme→ |
Import, create, & export Styled Main Component |
scfoo→ |
Styled Footer Component |
scfooe→ |
Import, create, & export Styled Footer Component |
scsec→ |
Styled Section Component |
scsece→ |
Import, create, & export Styled Section Component |
sca→ |
Styled Article Component |
scae→ |
Import, create, & export Styled Article Component |
scf→ |
Styled Form Component |
scfe→ |
Import, create, & export Styled Form Component |
Features
- Allows for fast editing by pressing TAB multiple times to cycle through placeholders.
- Easy to remember. All imports start with the
ims- prefix like imsc. Regular snippets have the sc- prefix like scd. All exports end with the -e suffix like scde.
Release Notes
Any suggestions or recommendations welcomed. More will be added over time, next is most likely React Native support.
0.9.0
Initial Release
0.9.4
Added LICENSE file and added snippets for css, withTheme.
0.9.6
Adjusted scp→ snippet to cycle, in case user does not want the ".theme" prop every time.
| |
