Cutting In Some Snippets
One of the fascinating things that I have learned during coding, is that there are many ways to go about performing a task or solving a problem. While this flexibility can be extremely useful, it can also prove overwhelming in some circumstances.
That being said, When learning a new language, or working with one in a new development team, there are similar concepts from your experience in other languages that can be applied somewhat universally.
Often times it is not the concept of what we need to do that slows us down or trips us up, but rather the application of that new languages syntax.
What are snippets
Snippets are small chunks of re-usable code or text that allow developers to avoid repetitive typing.
By definition snippets are handy tools that give us some respite from the mundane tasks of writing code.
While I whole heartedly agree that they perform that job well, they can also be great learning tool when approaching a new language. If you are the type to feel intimidated by thoughts of memorization, creating a snippet for a certain function or task that you can break up into parts.
Inherently, snippets also provide the service of reducing typos and syntax errors. Since every snippet will be exactly the same, there is no worry that you are missing 1 of the 18 parentheses in your excessively deep nested code.
Using custom placeholders in your snippets are also an awesome guide for consistent naming convention. Since the snippet clearly reminds you with a placeholder. You can be pretty explicit about what the use of a certain argument or variable will be.
Snippets For VS Code
Snippet management is a feature that is found in almost all modern editors. More often than not that text editor will give you certain abilities. You can usually sort, create, delete, edit, and view snippets directly thru your text editors.
Some editors use static snippets, in other words they will allow you to save a “copy and paste” chunk of code. Dynamic snippets still have the static text features but can also include some generated elements, for example local time, or a particular input that is supplied by user thru the GUI.
Setting Up Your Snippet
I thought i should give a quick rundown of how to set up some snippets for Javascript in VS Code. It’s pretty simple and I have a tool that makes the process smoother.
When you open up your VS Code window. You can Start off by opening the command palette, or pressing ⇧⌘P. In that search bar you can type in snippet and click the dropdown link for Snippet Preferences.
After Clicking that option you can choose to create a new snippet in any of the languages listed in the dropdown. This will link you to a file where you can write your Snippets.
You will be greeted with a commented page much like this, that will show an example of how the snippets should be written.
This is where writing snippets can get tedious or syntactically annoying.
There are many snippet generating tools online that can help you write custom snippets. There are also extensions for VS Code that supply you with a library of predetermined snippets. I prefer creating my own when possible so that I can very specifically define my code.
Snippet Generator
I use an online web app, that creates the appropriate snippets for me.
Using this generator, which is freely distributed on Github by the way, I can simply choose what editor I am using, In our case VS Code.
Add A description of the code that I am writing, for example, Fetch Request.
The Tab Trigger is the characters that will trigger the code prompt in your editor. So in this case I would choose something like “fet”.
Then just write your Code into the text input on the left and simply copy and paste the returned snippet in the previous VS Code snippet File.
Sources:
