10 Code Snippets You Need to Try

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 Monvoisin5y ago

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

Skay5y ago

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 Holland5y ago

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. 🙂

Top Lists to Boost Development Productivity

Part 2 of 12

This series contains articles covering my favorite apps, workflows, or tips that I think can help boost a developers productivity.

Up next

7 Free Mac Apps to Boost Development Productivity

This is a list of the main apps I use as a Full-time Developer. If you enjoy lists like this, you might also enjoy my article on the 5 Chrome Extensions to Boost Development Productivity. Anyway, enough promoting and let's get on with the list... 1)...

More from this blog

Database GUI's to Boost Development Productivity

Although my experience is primarily with front-end development, my current job is affording me the opportunity to do more full-stack work. Naturally, this meant that I needed to explore the different database GUIs available on the market. Here is a l...

Nov 24, 20253 min read

Database GUI's to Boost Development Productivity

How to Setup a Global gitignore File

A Note on the Series: Fast Fridays 🏎 is a series where you will find fast, short, and sweet tips/hacks that you may or may not be aware of. I will try to provide these (fairly) regularly on Fridays. In this Fast Friday tip, I'll explain how to crea...

Oct 3, 20252 min read

7 Git GUI's to Boost Development Productivity

Over the past year, I’ve started incorporating a Git GUI into my workflow. I still reach for the terminal about 90% of the time, but I’ve found that a GUI can really shine when it comes to things like viewing diffs, checking stashes, or resolving mer...

Aug 1, 20254 min read

7 Git GUI's to Boost Development Productivity

Git Worktree

Simplifying Branch Management with Git Worktree

Jul 7, 20255 min read

5 Speech-to-Text Apps to Boost Productivity

With all the AI tools popping up these days, I figured I'd try out some speech-to-text software in an attempt to boost my productivity. I've been hearing a lot about “developing at the speed of thought”, so here's a list of the top speech-to-text sof...

Jun 6, 20254 min read

5 Speech-to-Text Apps to Boost Productivity

The Productive Dev

65 posts

Welcome to my blog 👋🏽 I'm a Front-End Developer with a passion for learning!

I write about Programming 👩🏽‍💻 and Productivity Tips ✔️

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

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.

3) console.dir

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.

5) Arrow Functions

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.

8) useEffect

9) useRef

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 😅.

How to Configure in VSCode

Press CMD + Shift + P (Mac) or CTRL + Shift + P (Windows) to open up the command palette.
Type snippets in the command prompt and pick Preferences: Configure User Snippets.
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!

Command Palette

Comments (5)