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:

@FerDeLaMad

Happy Hacking!