Wait! Hold-up! How’d You Do That?? 💻💫😏👀 (An Intro to VS-Code Snippets)

Sam D.Boahen
3 min readNov 9, 2020

Everything is easier in theory; it takes us a while to actually manifest ideas.

Ideally, for the sake of efficiency, we’d like to get as close to instantaneous as our thoughts are in physical action, but everything takes time. As much as I love and geek out for existential concepts and conversation, we’ll saved that for another blog.
🗃😅🔮🌌

The point I’m trying to make can be captured in an even simpler approach:

Is it faster to think , or to say; is it faster to say or to write/type?

Surprisingly enough there are case scenarios where one is actually more efficient than the other, but nothing I can think of can triumph the speed of thought in the process of manifesting action — but AGAIN, we wont get too existential here.

In essence, there are certain things we will write, word-by-word, line-by-line, even as is an entire story or script already fabricated in our minds.

For example, for-loops; forEach loops, and (one of my favorites) console.log(). After typing the same blocks of code, getting tired and annoyed, you eventually begin just copying and pasting previous blocks of code and swapping out the changes. Wouldn’t it be nice if you just had some shorcuts you could type in to get the blocks of code you need? 💻🤔

Well I got just the thing for you! ✨😏🗃

After using shortcuts for some time on iPhone and Mac, I told myself I’d make some for when I begin more intense coding again. Unfortunately, the Mac shortcuts don’t override into VS-Code, but below is some of the iOS Magic that inspired the search (Disclaimer — There are also shortcuts on other devices and platforms 😬 📑)

iOS Shortcuts Example (🚧Better Quality to Come 😅👍 🚧)

On To The Magic!

Before you go creating a bunch of Snippets, checkout what all ready exists. There might just be the fix for something you need. Here’s an example of a built-in HTML Snippet thanks to Emmet!

Built-in Snippet Example (HTML)

When you do want to create your own snippets, you can find them in Preferences.

Each Snippet is technically an object. A Snippet must include a “prefix” (the shortcut text), a “body” (the actual shortcut goal). A “description” is optional, but helps clarify what that snippet is intended for.

Here’s an example of a quick Snippet for by pal, console.log():

Snippet Example: console.log()

As neat and nifty as this may be, the goal is not just to plug-and-chug, but to have mastered each block of code you save into you Snippets.

Get the reps in and practice!

There are no shortcuts to growth 🧘💫;

Be sure to get in those reps 💻🏋️📈

You got this! 😉✨

--

--