Code snippets are an absolute lifesaver when it comes to typing less and writing code quickly. The major text editors out there (VS Code, Sublime Text, and Atom) all have the ability to import extensions with these snippets or to write custom snippets that better suit your needs.
I use VS Code as my primary editor so the steps below will be VS Code specific. Sublime Text and Atom both have similar functionality, but it will not be listed in this post
What is a snippet?
Code snippets are bits of commonly written code that can be easily input using a prefix that has an autocomplete feature.
Let me show you an example and kick it off with my most used snippet:
A Friendly Console.log()
It may seem like a small reduction in keystrokes, but considering I use console.log all day to check values, look for bugs, etc this saves me a lot of time day in and day out. Let me show you how to add this snippet to VS Code.
Adding A Custom Snippet to VSCode:
Snippets are written in JSON format. The VS Code docs provide detailed information on learning how to write snippets, scoping them to specific languages(or globally), and information about downloading snippet extensions from the marketplace.
These links have more than enough information showing you the nuts and bolts of snippet writing.
To Save Time Writing Custom Snippets…
Take advantage of Snippet Generator, a free service where you write the code and it will pop out the JSON you need to add to the user snippets file. This can save you a ton of time when writing your first snippets.
You may have to add things like tab stops and additional prefixes you might want to trigger the snippet.
How to Use Snippets in the editor:
Using snippets in the editor is as simple as typing the prefix you assigned to your snippet.
#2: A More Advanced Console.log()
I’ve added to the console.log snippet by giving it the ability to get the name of the thing I’m console logging, followed by the value. This works great when developing React components and looking at a particular prop or piece of state. The snippet is very similar in construction to the one above with a few small changes. This also takes advantage of tab stops so you only have to to type the name of your prop / state piece one time.
#3: Fetch
HTTP requests to various APIs are a part of almost all full stack development. If you are the developer who uses the built in fetch API this is going to save you some time.
This allows you to never forget the different types of requests needed and gives you various tab stops to get the information that might change in where it needs to be.
So, How Great are snippets?
If you take the time to make shortcuts for your most repeated actions day to day I guarentee you are going to save a lot of time and key strokes.
