10 Code Snippets You Need to Try
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.
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
snippetsin the command prompt and pickPreferences: 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.jsonandjavascriptreact.jsonfiles.
- Since I'm a UI Developer, I updated the
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!
About the author
Welcome to my blog 👋🏽
I'm a Front-End Developer with a passion for learning!
I write about Programming 👩🏽💻 and Productivity Tips ✅
Comments
Join the discussionThanks Mike! That’s great to hear!
I didn't know this till now. All I ever used was ! for the HTML boilerplate code. Thanks for sharing this Alyssa Holland.
I’m more than happy to share! I hope this new information proves to be helpful for you!
Nice article Alyssa! 🤟
Thanks Chris Bongers😃
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?
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.
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
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 :-)
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
This series contains articles covering my favorite apps, workflows, or tips that I think can help boost a developers productivity.
