Alyssa Holland
Alyssa Holland's Blog

Alyssa Holland's Blog

10 Code Snippets You Need to Try

10 Code Snippets You Need to Try

Alyssa Holland
ยทSep 3, 2020ยท

2 min read

Subscribe to my newsletter and never miss my upcoming articles

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