VS Code snippets : Save your time
Writing boilerplate code ad nauseam
Ever find yourself writing the same boilerplate code over and over again and wondering if there was a way to automate this tedious task ? Well then, snippets are exactly the thing you are looking for.
What is a snippet ?
Snippets in Visual Studio Code are pre-setup user (or extension) defined shortcuts that allows us to write our boilerplate code once to then reuse it to our heart’s content. It can be as simple or as complex as you want it to be and in this article, we are going to scratch the surface of the different ways we can use snippets in our advantage to improve productivity and lower frustration while focusing on writing code that matters.
How to write snippets ?
To get started writing snippets, we need first to head to the User Snippets section in VS Code preferences menu.
Then, VS Code’s command palette opens up and we simply have to choose the “New Global Snippets file” option.
We are then prompted to choose a name describing a snippet and, once that is done, a new file is created that includes some comments introducing us to the snippet syntax.
As we can see in the commented section, we have to add a scope to our snippet to indicate in which file type we should be getting suggestions to use this snippet (getting suggestions for JavaScript snippets while working on a C file wouldn’t make sense), a prefix that indicates the shortcut to trigger the snippet suggestion (usually a shorthand version of the functionality we are building the snippet for), a description to help us differentiate and know more about what this snippet is all about and finally, the body section where we write the actual content of the snippet.
So let us write our first snippet.
As a first example, we are going to write a JavaScript arrow function snippet by replacing the original file with the following.
Note : the $X notation indicates tab stops (explained in the commented out section above), in this case, our first tab stop would be the function name (with a placeholder value of functionName), the second tab stop is the function’s arguments, and our final stop is the body of the function.
Let’s take this snippet on a test drive.
And sure enough, this works just as expected.
Somewhat advanced example
Now that we know the basics of writing snippets, let us take the example of React Native TypeScript Components to write a snippet that allows us to greatly save time while writing some repetitive code.
For those unfamiliar with React Native and/or TypeScript, usually custom components look something like the following.
So let’s just jump straight to writing our snippet following the same steps we did in the first example.
Few things to note here :
- We defined the snippet’s scope to “typescriptreact” to limit the suggestion to our .tsx files.
- Tab stops sharing the same number will be filled out at the same time and get the placeholder value of its first occurence.
- By default, we gave our $1 tab stop the base filename value (with no file extension) (TM_FILENAME_BASE). For the full list of available variables please visit the official VS Code snippets documentation.
And finally, let us check our brand new snippet in action.
Final Words
Any time saved writing boilerplate code is more time for us to think and write the actual code that matters in our use case, and VS Code snippets are a great tool to automate this repetitive task. In addition of the ability to write our own custom snippets, the VS code extension marketplace provides various snippet extensions for basically all your needs, so giving them a shot might be hugely beneficial in the long run.
This has been developed by myself at eDonec.
