Snippets can add a touch of magic to your editor. It’s like an incantation. Utter a short phrase (type a prefix), wave your wand (press Enter or Tab), and presto! A wonderful event unfolds in front of you. ✨

Most code editors support snippets out of the box. The code editor I will use to showcase snippets is Visual Studio Code (VS Code), the most popular editor of the day.

Also, there are some “text expander” apps that allow you to use snippets globally (across all apps). I will briefly cover how you can utilise these apps to get even more out of snippets.

Let’s dive into all things snippets. 🤿

Definition

A snippet is a template that can be inserted into a document. It is inserted by a command or through some trigger text.

With snippets, you can create a boilerplate file, and insert commonly used blocks of text. The general idea is to save you typing out the same things completely again and again, and again. 🤖

Why should you use Snippets?

I’m not going to shock you with this statement: the internet is home to a lot conflicting opinions! Snippets do not escape this ignominy, but I don’t think it is a topic that make people’s blood pressure soar!

For the sake of balance, I will present a cross-section of those opinions here.

You don’t have to pick a camp and be all-for or all-against snippets. I suggest you adopt them to a degree that serves you best.

Yay Camp 👍

• Snippets can boost your productivity, saving you keystrokes and reducing input errors.
• Snippets leaves me with more mental CPU and enjoyment to spend on writing the code that I care about and want to focus on.
• Snippets can help you to remember to include something important!
• Integrating snippets into your workflow implicitly encourages you to use the mouse less often. Well-written snippets offer a logical path which you can tab through, stopping to edit along the way to complete the template exactly the way you want, and when you are done, you arrive on the other side ready to write your next line

Nay Camp 👎

• I refrain from using them, mostly because I don’t like being reliant on any given tool.
• I never use snippets. I prefer to invest time in avoiding repetition rather than making it easier.
• I found that at some point I forgot how to write the code without using the snippet. For trivial stuff that I understand, it is OK, but I don’t want to forget some other stuff!
• Most, if not all, snippets I’ve seen online, for code I’m looking for, have mistakes in them. I’ve not once been able to find a numerical algorithm that didn’t have floating point errors in it. I can’t imagine there being any resource of perfectly clean code snippets.

When should you use snippets?

Donald Knuth, one of the grand-wizards of computer science, said “premature optimization [of code] is the root of all evil”.

I think this is relevant to snippets also. Snippets are an optimization of code production. If you don’t know a language or framework very well, implementing a slew of snippets for that language or framework is likely to be a premature move.

If you are comfortable, then try some out!

What I use snippets for

Personally, I use snippets often but judiciously. I use a set of snippets for Markdown and most of the languages I work with.

I haven’t used snippets much for frameworks. I started using some snippets for Vue recently, but I only use the boilerplate snippet. I will probably adopt more of them once my Vue IQ has risen.

I haven’t used snippets for algorithms.

Types of Snippets

Snippets can be classified according to the scope of interactivity between the snippet and the editor.

Static Snippets

You can think of it as a copy-and-paste of some source text as a single command.

Dynamic Snippets

A dynamic snippet can be customised to provide a wizard-like experience for completion of a snippet.

It can include:

• Tab Stops: You can number stops that can be tabbed through in order,
• Mirrored Tab Stops: There are times when you need to provide the same value in several places in the inserted text. You can mirror a tab stop to achieve this, and any edit will be reflected in the related tab stops instantly.
• Placeholders : It is a tab stop with a default value which can be overwritten on focus.
• Choices : At a tab stop you are presented with a dropdown list of values to choose from.
• Variables: Input values from the environment such as: the selected text in the editor, system dates, or content from the clipboard.

Here is an example of a markdown snippet which adds a task list with 2 tasks. It uses tab stops, placeholders, and choices for checking a task.

#vscode #programming #developer