Onboard New Devs FASTER
with Custom Snippets!

Jennifer Wadella

Onboarding Sucks

Not enough documentation
Too much hidden knowledge
"Wait, why aren't you using our great design system?"

Code Snippets to the Rescue!

Code snippets aid developer workflow & allow new team members to discover patterns, components, and design systems with just a few keystrokes.

Example Project

We'll create code snippets using the prefix: "milkshake"

https://stackblitz.com/edit/github-5cph13

Our Design System:

Buttons, inputs, tabs, a snippet to add a sparkle class - what more could you need?

What Are Code Snippets?

A small piece of text or code to be inserted into a file in our code editor.

Common Snippets

Emmet

VS Code Snippet anatomy


{
  "Print to console": { (1)
    "scope": "javascript,typescript", (2)
    "prefix": "milkshake", (3)
    "body": [ (4)
      "console.log('$1 is super cool');", (5)
      "$2"
    ],
    "description": "Log output to console" (7)
  }
}

To Create a Snippet

Open your command palette (cmd + shit + p)
Search for `Preference: Configure User Snippets`
Select `New Snippets file for {{project name}}`

Creating Our Button Snippet


						{
						  "Milkshake button": {
						    "scope": "html",
						    "prefix": "milkshake",
						    "body": [
					        ""
						    ],
						    "description": "Creates milkshake button component"
						  }
						}

Creating Our Input Snippet


						{
						  "Milkshake input": {
						    "scope": "html",
						    "prefix": "milkshake",
						    "body": [
						      ""
						    ],
						    "description": "Creates milkshake input component"
						  }
						}

Creating our Tabs Snippet


						{
						  "Milkshake tabs": {
						    "scope": "html",
						    "prefix": "milkshake",
						    "body": [
						      "",
						      "	",
						      "		${2:Tab 1 content}",
						      "	",
						      "	",
						      "		${4:Tab 2 content}",
						      "	",
						      ""
						    ],
						  "description": "Creates milkshake tabs component"
						  }
						}

Creating our JS sparkle adding snippet


						{
						  "Milkshake sparkleClass": {
						    "scope": "javascript, typescript",
						    "prefix": "milkshake",
						    "body": [
						      "this.${1:isSparkling} = true;",
						      "setTimeout(() => {",
						      "	this.${1:isSparkling} = false;",
						      "}, 350);"
						    ],
						    "description": "Creates milkshake isSparkle member setting & timeout"
						  }
						}

Summary

Code snippets can help new team members
Command palette > configure custom snippets
Use tabspots for increased efficiency
Save keystrokes not grudges.

Now go bask in the glow of your team's love and efficiency. <3

Slides: http://tehfedaykin.github.io/CustomSnippets