Visual Studio Code snippet

[tarciozemel]

Here's a VS Code snippet to facilitate the day-to-day workflow with styled-components-breakpoint.

There's 2 versions:

• Alias break: just the "wrapper" syntax
• Alias breakselected: wrapps on selected text

Bonus: choose the breakpoint by snippet choices. :)

{
  "styled-components-breakpoint": {
    "prefix": "break",
      "body": [
        "${breakpoint('${1|sm,md,lg,xl,xxl|}')`",
        "\t$0",
        "`}"
      ],
    "description": "Shortcut to make a styled-components-breakpoint breakpoint"
  },

  "styled-components-breakpoint selected": {
    "prefix": "breakselected",
      "body": [
        "${breakpoint('${1|sm,md,lg,xl,xxl|}')`",
        "\t$TM_SELECTED_TEXT$0",
        "`}"
      ],
    "description": "Shortcut to make a styled-components-breakpoint of selected code"
  },
}

Why no "xs" breakpoint on choices? Mobile first.

[guitheengineer]

@tarciozemel thanks bro 👑.

I like the way you explained it, seems like you would be a great code teacher... so why don't u start making youtube tutorials or blog posts? Is hard in the beginning but I have no doubt u will succeed!