10 Code Snippets You Need to Try

Subscribe to my newsletter and never miss my upcoming articles

Code snippets are an essential tool I use daily that vastly speeds up my development process. When I watched a tutorial from Brad Traversy entitled Code Faster With Custom VS Code Snippets, I instantly started customizing my snippets instead of depending on an extension to provide that feature for me.

I've created a Github Gist that contains a list of all the snippets I am about to mention below, so feel free to reference it if you want to use them in your editor.

1) console.log

cl.GIF

2) console.groupCollapsed

When I discovered console.groupCollapsed, it was a game-changer 🤯. I use this all the time, especially when I want to group logs together to make them easier to distinguish between other output in the browser console.

CGC.GIF

3) console.dir

cd.GIF

4) noop

noop = no operation and represents an empty function. I use this primarily when working with event handlers in React that are pending functionality implementation.

noop.GIF

5) Arrow Functions

arrow.GIF

6) Array Methods

Provides a list of commonly used methods like map , filter , and reduce to name a few.

array methods.GIF

7) useState

Now that React hooks are here to stay, I use this, useEffect and useRef all the time when working on front-end projects.

useState.GIF

8) useEffect

useEffect.GIF

9) useRef

useRef.GIF

10) IIFE

IIFE = Immediately Invoked Function Expression. I could never remember how many parentheses and/or brackets I needed so I just created a snippet so that I wouldn't have to 😅.

IIFE.GIF

How to Configure in VSCode

  1. Press Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows) to open up the command palette.
  2. Type snippets in the command prompt and pick Preferences: Configure User Snippets.
  3. Select whatever language file you want to create snippets for and then you will need to add some JSON to configure your settings.
    • Since I'm a UI Developer, I updated the javascript.json and javascriptreact.json files.

The syntax for creating a snippet is not the most intuitive thing so I would highly recommend watching Brad's tutorial to get a more in-depth view of how to set things up. Alternatively, there are tools like the Snippet Generator to help make this process much simpler.

El Fin 👋🏽

I hope you find these snippets as useful as I do and don't forget to check out my Github Gist if you want to leverage them in your own environment.

Thanks for reading and happy coding!

Mike CK's photo

I love this!

Alyssa Holland's photo

Thanks Mike! That’s great to hear!

Prateek Aher's photo

I didn't know this till now. All I ever used was ! for the HTML boilerplate code. Thanks for sharing this Alyssa Holland.

Alyssa Holland's photo

I’m more than happy to share! I hope this new information proves to be helpful for you!

Chris Bongers's photo

Nice article Alyssa! 🤟

Skay's photo

Once again a such a useful article! Thanks for sharing this :-) I thought Emmet had all the shortcuts covered. Anyways, I ain't complaining. I have bookmarked this and will slowly build it into my muscle memory :-)

Alyssa Holland's photo

Thanks for the kind words! I hope they prove to be useful and save you time down the road. I promise the snippets become easy to remember once you start using them over and over again. 🙂

Dinys Monvoisin's photo

How do you do, to remember all those codes snippets? Does it take time to make it a habit?

For me, I prefer to use VIM, which removes the needs to remember snippets.

I don't know that's my feeling. What's your opinion?

Alyssa Holland's photo

It has just become second nature to me. I try to structure the snippet abbreviations in a way that is easy for me to remember. For example, “ush” stands for “Use State Hook” and “arrow” represents an arrow function. Idk it’s just how my brain works 🙃 The great part about snippets is that you can customize them how you like so if an abbreviation I have doesn’t make sense to you, it’s very simple to change.

I’ve been wanting to get better at Vim but I don’t have the time to dedicate to it right now. I used Vim a lot in college. It’s very cool so definitely stick with that if that’s what you like.

Dinys Monvoisin's photo

Yep customising the code snippets in VScode sounds cool and hacky. The only one that I use at the moment is the Emmet plugin. I feel remembering the different snippets become problematic when you need to switch between different languages because you are working on some other projects.

I always said that, but I ensure you that learning Vim will be your best bet.

Check out my post on Vim