Alyssa Holland
Alyssa Holland's Blog

Follow

Alyssa Holland's Blog

Follow
10 Code Snippets You Need to Try

10 Code Snippets You Need to Try

Alyssa Holland's photo
Alyssa Holland
·Sep 3, 2020·

2 min read

Table of contents

  • 1) console.log
  • 2) console.groupCollapsed
  • 3) console.dir
  • 4) noop
  • 5) Arrow Functions
  • 6) Array Methods
  • 7) useState
  • 8) useEffect
  • 9) useRef
  • 10) IIFE
  • How to Configure in VSCode
  • El Fin 👋🏽

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!

 
Share this