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

Console log (clog)

Easier logging for variables (create another logging if needed)

Function expression (js#arrow-function)

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.

Function declaration (js#function)

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.

⚛️ React snippets

useState (react#useState)

Easier useState declaration

useEffect (react#useEffect)

Easier useEffect declaration

useRef (react#useRef)

Easier useRef declaration

Functional component (react#component)

🚨Test snippets

Describe full block

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

Describe block

Creates a describe block that contains the basic structure

It block

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

🎁 Bonus

Image placeholder

You can use this snippet on HTML or JavaScript snippet

🤖 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/.

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! ❤️