Styled-Snippets
Code your Styled Components better 😎, faster 🏃 & stronger 💪!
Exporting a component example
Creating a component example
Supported languages (file extensions)
- JavaScript/React (.jsx)
- JavaScript (.js)
- TypeScript/React (.tsx)
- TypeScript (.ts)
- Html (.html)
General Snippets
Trigger the snippet by typing the alias and the ⇥ TAB key afterwards.
Snippet |
Content |
|---|---|
| isc | Import Styled Components |
| iscn | Import Styled Components/Native |
| isg | Styled Components Global Style |
| scp | Props snippet into component |
| sch | Hover pseudo-class |
| scb | Before pseudo-class |
| sca | After pseudo-class |
HTML Snippets
Snippet |
Content |
|---|---|
| scd | Styled Div |
| escd | Import + Styled Div + Export |
| scs | Styled Span |
| escs | Import + Styled Span + Export |
| scb | Styled Button |
| escb | Import + Styled Button + Export |
| sca | Styled Anchor |
| esca | Import + Styled Anchor + Export |
| sch1 | Styled H1 |
| esch1 | Import + Styled H1 + Export |
| sch2 | Styled H2 |
| esch2 | Import + Styled H2 + Export |
| sch3 | Styled H3 |
| esch3 | Import + Styled H3 + Export |
| sch4 | Styled H4 |
| esch4 | Import + Styled H4 + Export |
| sch5 | Styled H5 |
| esch5 | Import + Styled H5 + Export |
| sch6 | Styled H6 |
| esch6 | Import + Styled H6 + Export |
| scp | Styled Paragraph |
| escp | Import + Styled Paragraph + Export |
| scol | Styled Ordered List |
| escol | Import + Styled Ordered List + Export |
| scul | Styled Unordered List |
| escul | Import + Styled Unordered List + Export |
| scli | Styled List Item |
| escli | Import + Styled List Item + Export |
| scim | Styled Image |
| escim | Import + Styled Image + Export |
| scin | Styled Input |
| escin | Import + Styled Input + Export |
HTML5 Snippets
Snippet |
Content |
|---|---|
| sch | Styled Header |
| esch | Import + Styled Header + Export |
| scn | Styled Nav |
| escn | Import + Styled Nav + Export |
| scm | Styled Main |
| escm | Import + Styled Main + Export |
| scfoo | Styled Footer |
| escfoo | Import + Styled Footer + Export |
| scs | Styled Section |
| escs | Import + Styled Section + Export |
| scart | Styled Article |
| escart | Import + Styled Article + Export |
| scf | Styled Form |
| escf | Import + Styled Form + Export |
Release Notes
Users appreciate release notes as you update your extension.
1.0.0
Initial release of Styles-Snippets
Author:
Happy Hacking!