Supercharge your VSCode with Snippets (JavaScript & React)

JM Santos
JM Santos
Nov 30, 2020 · 4 min read

On every iteration of our development, part of our goals is to make our code consistent, faster, and efficient. The better we write the code, the better we can create software.

Most of the developers I know especially on web development uses VSCode as their primary editors. And so I thought maybe it would be great if we could create code snippets that will help our friends, teammates, or colleagues write better code. Maybe, we can. Maybe, yes.

The snippets that we’ll be creating are for JavaScript developers that use React. We will try to include some typings for Flow and TypeScript developers as extras so you can pick what’s best for you.

If you aren’t familiar with code snippets on VSCode on what is it and how to create snippets, check this out documentation.

If you are already familiar, great, join me as we create code snippets to help our friends! Let’s get started.

💻 JavaScript snippets

Easier logging for variables (create another logging if needed)

Image for post
Image for post

Either you want to create the function based on the filename or write it on your own. You can also replace the name so that the snippet that creates a function based on the filename is separated from the normal function snippet.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

There’s already a default snippet on this but we will override it to add support for using the filename as the function name and adding typings. If you don’t like creating a new snippet and just use the default one, feel free to skip it.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

⚛️ React snippets

Easier useState declaration

Image for post
Image for post
Image for post
Image for post

useEffect (react#useEffect)

Easier useEffect declaration

Image for post
Image for post

useRef (react#useRef)

Easier useRef declaration

Image for post
Image for post
Image for post
Image for post

Functional component (react#component)

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

🚨Test snippets

Describe full block

Create a happy paths and exception paths blocks that allow you to separate normal use cases and edge cases

Image for post
Image for post

Describe block

Creates a describe block that contains the basic structure

Image for post
Image for post

It block

Creates an it block that contains the test preparation step and the assertion step

Image for post
Image for post

🎁 Bonus

Image placeholder

You can use this snippet on HTML or JavaScript snippet

Image for post
Image for post
Image for post
Image for post

🤖 Bringing It All Together

Code snippets are handy on our development as it saves us a few seconds of just typing the whole block of code. Those few seconds when combined will save us a bunch of time throughout the day.

Code snippets also give us the opportunity to standardize how we create our code blocks. At first, it will be unusual that you’re going to use snippets but once you get used to it, you can create code blocks faster like a wind.

This is an example of how we can maximize more our code editors on our development. These code snippets might not help you a lot but I am confident that this will open new ideas to you and to your development.

Oh before I go, I will share the site that helped me create these snippets. Check this out: https://snippet-generator.app/.

Image for post
Image for post

And with that, I am excited to hear what you are going to create. Let me know in the comment section what have you done.

Thank you for reading. I hope this will help you on your journey! ❤️

Weekly Webtips

Explore the world of web technologies through a series of tutorials

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

JM Santos

Written by

JM Santos

Improvise, Adapt, Overcome

Weekly Webtips

Explore the world of web technologies through a series of tutorials

JM Santos

Written by

JM Santos

Improvise, Adapt, Overcome

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store