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.
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.
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
Functional component (react#component)
Describe full block
happy paths and
exception paths blocks that allow you to separate normal use cases and edge cases
describe block that contains the basic structure
it block that contains the test preparation step and the assertion step
🤖 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! ❤️