10 Code Snippets You Need to Try

10 Code Snippets You Need to Try

ยท

2 min read

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!