A code Snippet is a programming term that refers to a small portion of re-usable source code, machine code, or text.

Snippets help programmers reduce the time it takes to type in repetitive information while coding. Code Snippets are a feature on most text editors, code editors, and IDEs.

In this tutorial, we're going to learn how to write our own custom snippets.

Prerequisites

For this tutorial, I'll assume that you can write a decent amount of code in the language you want to create a code snippet for.

And with that confirmed...

Why Code Snippets are Useful

When I first started learning how to code, the first code snippet I ever used was Ctrl + ! and enter to get an HTML5 document template. (I doubt anyone knows how to write that by heart.) It was cool and I felt like a code ninja.

(PS: if you don't want to read the back story and just wanna dive right into the tutorial, then jump right into it.)

As I started exploring more into coding, I learned about VSCode extensions that made coding faster – code snippets in particular – and I then went on a downloading spree.

All was going fine and well until I started frequently using frameworks and libraries in my projects. This involved me trying to remember how to link my documents to their packages and also use personalized CSS resets and variables.

Plus I was always forgetting to link my stylesheets to my HTML pages, making me spend an unreasonable amount of time trying to figure out why my pages were not being styled correctly. (I still forget to do so now and then.)

That got me thinking about having my personalized HTML and CSS templates which would have all the base code I always used in my projects.

At first, I just created the templates and saved them on my system so I could copy the code any time I started a new project. But that also was getting stressful, and I wanted to just type in a few letters, press enter, and boom have my templates showing on my screen. And that was when I learned about VsCode Code Snippets.

I didn't know it was called code snippets at that time, so I spent over 2 weeks trying to find a tool that could help me do this and I almost gave up. Until I randomly stumbled on Brad Travesty's video on one of my daily evening wanderings on the streets of YouTube without actively searching for it.

It was a lifesaver, and every once in a while I add new custom snippets to my collection. You can check out my personalized HTML and CSS templates here.

You've likely often wished that you had a custom snippet of a particular piece of code you use all the time but didn't know how to create or find it. Well, wish no more for I'm about to show you how to easily create your own.

How to Create Custom Code Snippets

Creating your own custom snippet is quite easy. And with the help of another tool called Snippet Generator (which I will show you how to use shortly), it becomes even easier.

Step 1: Check if your editor lets you create custom snippets

You can check the docs on your code editor to find out if the feature is available and how to access it.

I am using VsCode for this tutorial. You can download it here.

To access this setting, you can either click on the settings icon on the sidebar and then click on user snippets or open up the command palette using Cntr + shift + p on Windows or CMD + shift + p on Mac, typing in "snippet" and clicking on Preferences: Configure User Snippets.

This will give you a drop-down with different language selections to choose from.

Step 2: Decide your Snippet Scope

You can either create a global snippet that you can use across all languages or create a local snippet scoped to a particular language.

So from the drop-down, you can see New Global Snippet File and then a bunch of languages in alphabetical order.

Scroll to the language you want to write your snippet for and click on it (or select New Global Snippet File if you want to use your snippets in multiple languages).

If you selected a particular language, HTML for example, the file will automatically open. But if you chose Global snippet, you'll be prompted to type in the name of the snippet file before it opens.

For this one, I'll be using a Global Snippet.

Step 3: Understand the Syntax

The Syntax for code snippet is quite easy actually. It is written in JSON format and each file can contain an unlimited number of snippets.

{
// Code Snippet 1
  "Snippet name": {
    "scope": "language1, language2" 
    "prefix": "trigger word 1",
    "body": ["your code snippet"],
    "description": "description of the code"
  },
// Code Snippet 2
  "Snippet name": {
    "scope": "language1, language2" 
    "prefix": ["trigger word 1, trigger word 2"],
    "body": ["your code snippet"],
    "description": "description of the code"
  }
}

Let's see what's going on in this code:

Snippet Name

The Snippet Name is the name of the snippet. It is also what will be displayed via IntelliSense if no description is provided.

Scope

This determines what languages are allowed to use the snippet. Enter the name of the language(s) separated by a comma. If you leave it empty or omit it, the snippet can be accessed by any language. This part is included in Global Snippets only, as Local Snippets files are already locally scoped.

Prefix

This describes one or more trigger words that will prompt IntelliSense to display the snippet.

Body

This can be a string if it is one-line code or an array of strings if it is multi-line code.

Description

This describes the snippet and what it does. If this is omitted, the name of the snippet will be used instead.

Snippet example 1:

{
// log to console
  "Print to console": {
    "scope": "javascript, typescript",
    "prefix": "log",
    "body": "console.log();",
    "description": "Log output to console"
  }
}

From the above example, our snippet name is Print to console, and it can only be used in a JavaScript and TypeScript file. If you were to type log in a JavaScript or TypeScript file, IntelliSense would show it along with the description Log output to console. Once you select it and click enter, you'd see console.log() on the screen.

Step 4: Add Tab Stops

Tabstops allow you to move the editor cursor inside a snippet. $1, $2, ..., $n specify cursor locations it should move into sequentially when you hit the tab key. $0 represents the final position the cursor should stop.

Snippet example 2:

// named function
{
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function $1($2){",
      "  $0",
      "}"
    ],
    "description": ""
  }
}

In this example, when you type nfn, our Named Function snippet shows up. Once you select it, you'll see your snippet on the screen. You'll also see that the cursor is now before the parenthesis as opposed to being at the end of the code.

Type in the name of the function, "GetUsers" for example, and then hit the tab button. You will notice that the cursor has now moved into the parenthesis.

You can type in the parameter if it has one or and hit the tab key again to move the cursor to the next tab stop which is between the curly brackets where our function body will go.

Note: When you are writing multi-line code, you cannot use a tab to indent your code in the JSON syntax. You can only use 2 spaces to indent your code, or whatever number of spacing indentation you use to write your code.

Step 5: Use Placeholders

These are Tab Stops with values. They help the user easily identify or understand what they are supposed to type at that particular tab stop.

The placeholder will be automatically highlighted so you can immediately type in what you want to replace it with.

Snippet example 3:

// named function
{
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function ${1:functionName}(${2:parameter}){",
      "  ${0:functionBody}",
      "}"
    ],
    "description": ""
  }
}

Step 6: Create Choices

Placeholders can have choices as values. This means that instead of typing in your value, you can choose from a dropdown selection.

To create one, you write the values which are separated by a comma between two pipe-characters, for example, ${1|one, two, three|}.

Snippet example 4:

// array method
{
"Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}

Here, once you type in arrmth, select it from IntelliSense and hit enter. The first tab stop will be a dropdown of array choices to select from. The next tab stop is the parameter and the last stop is the function code.

Snippet Generators

As your snippets begin to grow in lines and size, it becomes difficult to type and create them within your code editor. This is where a snippet generator comes in.

A snippet generator will take in your regular code and turn it into a code snippet.

I will be using Snippet Generator for this tutorial. With this particular snippet generator, you can write code snippets for VsCode, Sublime Text, and Atom.

How to Use the Snippet Generator

In the description input, enter the name of the code snippet which will be used as the name and description of the snippet.

In the tab trigger input, enter the prefix of your code snippet.

In the your snippet.. input, enter your code in its natural form as you would without writing it as an array of strings.

After this, you can then add in Tabstops, Placeholders, and Choices as explained above.

Snippet example 5:

//named function
function ${1:functionName}(${2: parameter}) {
  ${0:functionBody}
}

Snippet example 6:

//array method
${1|forEach, map, filter, reduce,|}((${2:item}) => {
 $0
)}

Final Snippet Code

{
  // log to console
  "Print to console": {
    "scope": "javascript, typescript",
    "prefix": "log",
    "body": "console.log();",
    "description": "Log output to console"
  },
  // named function
  "Named Function": {
    "scope": "javascript, typescript",
    "prefix": "nfn",
    "body": [
      "function ${1:functionName}(${2:parameter}){",
      "  ${0:functionBody}",
      "}"
    ],
    "description": ""
  },
  // array method
  "Array Method": {
    "scope": "javascript, typescript",
    "prefix": "arrmth",
    "body": [
      "${1|forEach, map, filter, reduce|}((${2:item}) => {",
      "  $0",
      "})"
    ],
    "description": ""
  }
}

And that's it. Easy peasy lemon squeezy.

Recap

Let's do a recap. We have learned that:

• a code snippet is a small portion of re-usable source code, machine code, or text which helps programmers reduce the time it takes to type in repetitive codes while programming.
• a code snippet file can contain an unlimited number of snippets.
• you can have a locally scoped snippet used within only one language file or a globally scoped snippet used within two or more language files.
• code snippets are written in JSON syntax.
• you can add tabstops, placeholders, and choices to your code snippets.
• you can also use a snippet generator to generate your snippets.

Thank you for reading my article. You can connect with me on Twitter, LinkedIn or my Blog.

I would love to know if you'll be creating your own custom snippets and what they might be. And do feel free to share this article with others who might find this useful too. Byeee!

Resources

• Brad's Custom Snippets video
• VsCode Snippet Documentation
• Snippet Generator
• View my Custom HTML and CSS Templates

When you use code snippets in Visual Studio, it can make your coding process a lot easier and faster. But what are code snippets? And how can you use them?

In this article, we'll look at how you can create code snippets in C#. Just keep in mind that snippets are available in other languages in Visual Studio as well.

If you already know what code snippets are, then you can skip down to the “How to Auto-Generate Code Snippets” section.

What are Code Snippets?

If you regularly work with Visual Studio, you might already know what code snippets are. Code snippets represent a shortcut for a larger piece of code.

As an example, open a C# project in Visual Studio and write “for” and then press the tab key twice. As you can see, instead of writing the full for loop we created a for loop just by writing “for”.

There are a lot more pre-defined code snippets you can use. For example, if you write “cw” and then press the tab key twice you’ll see an auto-completion that writes this:

Console.WriteLine();

You can check out the full list of the pre-defined code snippets in the docs here:

How to Create Custom Code Snippets

Now that you understand what a code snippet is, we can now go over how to create one.

To create your first code snippet, create a “.snippet” file. I called my file “MySnippet.snippet”, but you can call it whatever you want.

After the creation of the code snippet file, open the file in Visual Studio and add the following piece of code into the file.

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title></Title>    
            <Author></Author>
            <Description></Description>
            <Shortcut></Shortcut> 
        </Header>
        <Snippet>
            <Code Language="">
                <![CDATA[]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

In the example above, we use the basic structure of a code snippet file. Now, we’ll edit it and create a code snippet that will convert “cr” to Console.ReadLine().

Title Tag

The title tag contains the title of the snippet (not the shortcut name). In this example we’ll call the title “ReadLineSnippet”.

Author Tag

In the Author tag, you can insert your name/company to get credit for the snippet creation.

Description Tag

In the description tag, insert a short description of what the snippet does exactly.

Shortcut Tag

The name in the shortcut tag is the name that calls the larger piece of code. For example:

cw -> Console.WriteLine();

The “cw” is specified as the name in the shortcut tag.

Language

Because we're working with C# we should specify that in the language:

<Code Language = "CSharp">

<![CDATA[]]>

The <![CDATA[]]> holds the value of our snippet. In our example, inside the squared brackets we’ll insert Console.ReadLine() like this:

<![CDATA[Console.ReadLine();]]>

Additional Code Snippet Options

Defining Variables:

We can also define variables and give them a default value. By defining a variable we can use it multiple times in the snippet, and we give the user the option to change all the occurrences of the default value at once.

For example, if our snippet creates the following code:

arr -> 
Object[] arr = new Object[100];
for(int i = 0; i < arr.Length; i++)
{   
    arr[i] = default(Object);
}

And we define “Object” as a variable, we can replace all its occurrences. All we need to do is to write in the first occurrence a different name – for example “int” – and then tab twice and it will turn all occurrences of “Object” to “int”.

If we had defined arr as a variable too, we could move from one variable to another by pressing tab (when you create the snippet the first variable will be selected in red/cyan color – you can move to the other by pressing tab).

How to define a variable

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>init array.</Title>    
            <Author>Gilad Bar-Ilan</Author>
            <Description>creates and initializes an array.</Description>
            <Shortcut>myArr</Shortcut> 
        </Header>
        <Snippet>
            <Code Language="CSharp">
                <![CDATA[$typeName$[] $varName$ = new $typeName$[100];
                for(int $i$ = 0; $i$ < $varName$.Length; $i$++)
                {
                  $varName$[$i$] = default($typeName$);
                }]]>
            </Code>
            <Declarations>      
                <Literal>      
                    <ID>varName</ID>      
                    <ToolTip>variable name.</ToolTip>         
                    <Default>arr</Default>        
                </Literal>
                <Literal>      
                    <ID>typeName</ID>      
                    <ToolTip>type name.</ToolTip>         
                    <Default>Object</Default>        
                </Literal>
                 <Literal>      
                    <ID>i</ID>      
                    <ToolTip>iterator name.</ToolTip>         
                    <Default>i</Default>        
                </Literal>
             </Declarations>     
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

As you can see in the example above, each variable we use needs to be inside the <Literal> tag under the <Declarations> tag.

• <ID>  — How we call the variable in the <![CDATA[]]>
• <ToolTip> — A short description of the variable.
• <Default>  — The default value of the variable.

NOTE — When you use a variable in the <![CDATA[]]> you should write it in the following structure: $<here you put the variable name>$.

How to add the code snippet to your project

After we’ve created our code snippet file, we want to use it in our projects. To do so we should put the file inside the custom snippet folder of Visual Studio. This will automatically add the code snippet to our project.

If you want to find the folder path:

• Open a C# project.
• Go to Tools -> Code Snippets Manager
• Copy the path you see in the head of the box opened where it says “Location”.

After you’ve got the path, simply add the file into the path.

NOTE — Your “My Code Snippets” folder may be located in a different place on your computer, so don't rely on the path in the picture.

How to Auto-Generate Code Snippets

Now we can now go over what it means to auto-generate code snippets.

We know that adding “.snippet” files into the “My Code Snippets” folder adds the snippets automatically into our project. So now we can use that behaviour to create code that will automatically create snippet files and add them to our project.

What kind of code snippets do we want?

In this project, we are going to create a snippet for objects with a default constructor where the shortcut name will be the type name. For example:

Random + tab twice -> Random random = new Random();

The idea of the project is to read the namespaces we use in our project and make a custom snippet for each object that follows the conditions.

We want to add the snippets for the types of every namespace we use. This means that even if we specify a namespace in the ‘using’ but don’t use any of its objects, we’ll still include a code snippet for its members (those who follow the condition).

In addition to the namespaces, we are also going to create a snippet for our defined types.

Things we need to take care of:

• Remove the no longer needed types’ code snippets (if we removed types we’ve created or removed namespaces from the project).
• Update the code snippets every time the user runs the program (we don’t update in the background).
• Add new snippets for new namespaces we use / types we create.
• Make a structure for the types’ code snippet.

How to get all of our defined objects

If we want to get the full list of the user-defined types there are two ways to do so.

The first way – which is not as good as the second – is by using Regular Expressions. By using regular expressions, we can go over each file in our project and match for a default constructor in a class/declaration of a struct (because structs always have a default constructor).

Problems with the Regex technique

If the user separates the files we can check before using the regex if the file was modified. By doing that we can avoid repeating files that haven’t been modified.

But minor changes in the file will cause us to read the file again even if there is no difference in the objects. It'll also result in unorganized files that have a lot of code in a single file which can cause us to read the file over and over. (If the whole code is in a single file or just a few we won’t be able to avoid reading unchanged parts from the code.)

The Second Technique — Reflection

Instead of using Regex we can use reflection and get the classes we created by reading the metadata instead of reading each file as a text.

        /// <summary>
        /// Returns a list of all the types we created.
        /// </summary>
        /// <returns></returns>
        public static List<Type> GetCustomTypes()
        {
            StackTrace myStackTrace = new StackTrace();

            //contains the name of the namesapce of the project
            //using stackframe we get's the first calling method (main - the bottom of the stack) and then we check the namespace of the type where the method is located.
            //in our case main is located under 'Program' then we check what is the namespace of Program.
            string namespace_ = myStackTrace.GetFrame(myStackTrace.FrameCount - 1).GetMethod().DeclaringType.Namespace;

            Assembly assembly = Assembly.GetExecutingAssembly();

            //holds all the custom types.
            //assembly.GetTypes() => returns all the types.
            //then we remove all the types which is not related to our namesapce.
            //then we remove all the compiler created types.
            //then we remove all the types which doesn't have a default constructor.
            var types = assembly.GetTypes().Where(x => x.Namespace == namespace_).Where(x => !x.Name.Contains("<>c"))
                        .Where(x => x.GetConstructors().Any(x => x.GetParameters().Length == 0));
            return types.ToList();
        }

How to get the libraries’ objects

We'll run into a lot of problems in this part of the project. Let's look at what might go wrong.

Problem 1

If we read the assemblies we use in our project using Reflection we won’t have the option to get the types from libraries we defined in the ‘using’ but that we don’t actually use. For example:

using System.Linq;
using System.IO;
public static void Main()
{  
    int[] arr = Enumerable.Range(0,100).ToArray(); //Linq's functionallity
}

In the example above ,we only use Linq functionality, which means that if we are going to read the used assemblies in the project we won’t see System.IO even though we want it to be shown.

Problem 2

Another possible problem happens even when we do use the library. This is because a namespace can have multiple assemblies and due to efficiency the compiler won’t call all the assemblies when it doesn’t need to. So even if we use the library it doesn't mean we’ll have all the assemblies.

How can we solve the problem?

This problem is complicated because we cannot change the way the compiler works. So if we want to solve the problem we’ll have to be creative.

Our solution won't be very efficient, but we don’t have a lot of options for how to solve this.

We can use an algorithm

• We get all the namespaces we use in all of our “.cs” files in the project.
• Then we iterate over all the System DLL files and we check if the types there relate to one of the namespaces we use in the project.
• We add to this list also our defined types, as well as references we added to the project, if the reference is defined in the ‘using’ we add his types even if we don‘t use his types in the program itself.
• After we do that we check if the type has a default constructor.

The code for solving the problem is quite complicated, so let’s go over it.

using System;
using System.Reflection;
using System.Linq;
using System.IO;
using System.Collections.Generic;
using System.Diagnostics;
using System.Text.RegularExpressions;

namespace Reader
{
    public class TypeReader
    {
        public static List<Type> GetAllTypes()
        {
            #region GetSystemLibrary Files
            string systemDllPath = typeof(string).Assembly.Location; //gets the dll of the string type.
            systemDllPath = Path.GetDirectoryName(systemDllPath);
            string[] systemLibraries = Directory.GetFiles(systemDllPath); //the list of the system libraies dlls.  
            #endregion

            #region Namespaces in project files.
            string[] namespaces_ = Directory.GetFiles(GetSourceCodePath())
                                      .Where(x => x.EndsWith(".cs")).ToArray();
            namespaces_ = GetNamespaces(namespaces_).ToArray();//we remove the semi colon
            #endregion

            #region Check the system libraries.
            List<Type> types = systemLibraries.Where(x => x.EndsWith(".dll")).Select(x =>
            {
                Assembly asm = null;
                try
                {
                    asm = Assembly.LoadFile(x);

                }
                catch
                {
                    asm = null;
                }

                return asm;
            }).SelectMany(x => x != null ? x.GetTypes() : new Type[] { })
                        .Where(x => x != null && !x.Name.Contains("<>c")).Where(x => namespaces_.Contains(x.Namespace))
                        .Where(x => x.IsPublic && (x.IsClass || x.IsValueType)).ToList();
            #endregion

            #region add assemblies we use in our program.
            types.AddRange(AppDomain.CurrentDomain.GetAssemblies()
                           .SelectMany(x => x.GetTypes().Where(x => !x.Name.Contains("<>c")).Where(x => namespaces_.Contains(x.Namespace)))
                           .Where(x => x.IsPublic && (x.IsClass || x.IsValueType)));
            #endregion

            #region add custom types we created.
            types.AddRange(GetCustomTypes()); //adds our custom created snippets
            #endregion

            #region add types belongs to refrences we didn't use in our project.
            types.AddRange(GetUnUsedRefrenecedTypes(namespaces_)); //adds the refrenced libraries we specify but don't use.
            #endregion

            #region filter types.
            types = types.Where(x => x.IsValueType || x.GetConstructors().Any(x => x.GetParameters().Length == 0)).ToList();
            #endregion

            #region remove duplicated type names.
            types = types.GroupBy(x => x.FullName).Select(x => x.First()).ToList();
            #endregion

            return types;
        }

        //Returns the assembly of the main function.
        public static string GetMainAssemblyLocation()
        {
            StackTrace main = new StackTrace();
            string path = main.GetFrame(main.FrameCount - 1).GetMethod().DeclaringType.Assembly.Location;
            return Path.GetDirectoryName(path);
        }

        public static string GetSourceCodePath()
        {
            string projectPath = GetMainAssemblyLocation();

            try
            {
                while (!Directory.GetFiles(projectPath).Any(x => x.EndsWith(".cs")))
                {
                    projectPath = projectPath.Remove(projectPath.LastIndexOf("\\"));
                }
            }
            catch
            {
                throw new SourceCodeNotFoundException();
            }

            return projectPath;
        }

        public static List<string> GetNamespaces(string[] files)
        {
            List<string> namespaces = new List<string>();

            foreach (string file_ in files)
            {
                StreamReader fileStream = new StreamReader(file_);
                Regex matchUsing = new Regex(@"using([ ]|\t|\n)+\S+;");
                string[] fileNamespaces = matchUsing.Matches(fileStream.ReadToEnd()).Select(x => x.Value)
                                          .Select(x => x.Remove(x.IndexOf("using"), "using".Length).Trim()).ToArray();
                namespaces.AddRange(fileNamespaces);

                fileStream.Close();
            }

            return namespaces.Select(x => x.Remove(x.Length - 1, 1)).Distinct().ToList();
        }

        /// <summary>
        /// This is used in case we have a custom refrenced library (could be a dll we created)
        /// and we specify that in the using, however, we don't use his assemblies.
        /// </summary>
        /// <returns></returns>
        public static List<Type> GetUnUsedRefrenecedTypes(string[] namespaces_)
        {
            string sourceCode = GetMainAssemblyLocation();
            List<Type> otherTypes = new List<Type>();

            string[] fileNames = Directory.GetFiles(Path.GetDirectoryName(sourceCode));

            if (fileNames.Any(x => x.EndsWith(".dll")))
            {
                fileNames = fileNames.Where(x => x.EndsWith(".dll")).ToArray();

                foreach (var file in fileNames)
                {
                    Assembly asm;

                    try
                    {
                        asm = Assembly.LoadFile(file);
                    }
                    catch
                    {
                        continue;
                    }

                    otherTypes.AddRange(asm.GetTypes().Where(x => !x.Name.Contains("<>c"))
                                        .Where(x => x.IsPublic && (x.IsClass || x.IsValueType))
                                        .Where(x => namespaces_.Contains(x.Namespace)).GroupBy(x => x.Name)
                                        .Select(x => x.First()));
                }
            }

            return otherTypes;
        }

        /// <summary>
        /// Returns a list of all the types we created.
        /// </summary>
        /// <returns></returns>
        public static List<Type> GetCustomTypes()
        {
            StackTrace myStackTrace = new StackTrace();
            Type mainType = myStackTrace.GetFrame(myStackTrace.FrameCount - 1).GetMethod().DeclaringType;

            //contains the name of the namesapce of the project
            //using stackframe we get's the first calling method (main - the bottom of the stack) and then we check the namespace of the type where the method is located.
            //in our case main is located under 'Program' then we check what is the namespace of Program.
            string namespace_ = mainType.Namespace;
            Assembly assembly = mainType.Assembly;

            //holds all the custom types.
            //assembly.GetTypes() => returns all the types.
            //then we remove all the types which is not related to our namesapce.
            //then we remove all the compiler created types.
            //then we remove all the types which doesn't have a default constructor.
            var types = assembly.GetTypes().Where(x => x.Namespace == namespace_).Where(x => !x.Name.Contains("<>c")); ;
            return types.ToList();
        }
    }

    internal class SourceCodeNotFoundException : Exception
    {
        public override string Message => "Could not load the '.cs' files, please make sure\n" +
                                    "your files located in the default place / you have a valid project type.";
    }
}

Important Note:

//If I mention in the explanation the words "main function" I mean:

public static void Main()
{   
    TypeReader.GetAllTypes();
}
//Which means that the main function does not located in the 
//TypeReader class it's the main function who calls the class.

GetSystemLibrary Files Region

In these lines, we get all the library files of “System”.

• We check where the assembly of one of the system DLLs is located (in our case where the assembly of ‘string’ is).
• Then we remove the file name from the path so we’ll have only the directory.
• Then we take only the library files from the directory (“.dll”).

We do so because all of the System libraries files are located in the same directory.

Namespaces in the project files Region

In these lines, we get all the namespaces we use in all of our project files.

Custom methods we use in these lines

GetSourceCodePath — This function returns the path of our source code. First, we get the path of the main function’s dll. By assuming that the user works with the default way of sorting directories in Visual Studio, we ‘remove’ directories from our path until we reach a directory with .cs files.

GetMainAssemblyLocation — We use StackTrace to get the assembly location of the main function. An example for 'Removing' is
C:\Users\File1\File2 -> C:\Users\File1

If we can’t find any directory we throw SourceCodeNotFoundException.

GetNamespaces — The method returns all the namespaces within the files we entered. It iterates over each file and reads all the namespaces we are using in each one of them using Regex.

For each namespace we’ll get using <Something>; then we’ll remove all of the extra characters and we only keep the <Something>.

In GetAllTypes

• We read all the files from our source code directory
• We only keep the files with an extension of “.cs”
• We get the namespaces of the files.

Check the system libraries Region

In these lines, we check the system libraries. These lines fix both problems we mentioned before.

• We get all the files in the system DLL's directory and we only keep those that represent a dll (with an extension of “.dll”).
• We try to load each one of these files.
• If we can load the file then we get the types in the assembly.
• We remove all the compiler created types “<>c”.
• We only keep the types related to one of the namespaces in our project.
• Then we only keep the public types and those that are class or struct.

Why do we do it like this?

The problems we mentioned before were caused because we tried to check what the program actually uses in runtime. But the compiler makes optimizations, and that’s why we cannot really reach the cases mentioned in the problems.

So for solving this problem, we need to get creative and check the namespaces we use in our project files. Then we load the assemblies, and at the end check that each type if its namespace is one of the namespaces we use in our project.

add assemblies we use in our program Region

In these lines, we add the assemblies we use in our program.

For each one of the assemblies, we make the same check for the type it contains.

• If the type is public
• If it’s struct or class
• If it’s not a compiler-created type.
• If it’s related to one of the namespaces we use in our project.

add custom types we created Region

In this line, we add all of the custom types we’ve created.

GetCustomTypes — The function uses StackTrace for getting the namespace and the assembly of the main function.

After we have the assembly we get the types that related to the main’s namespace.

add types belongs to references we didn't use in our program Region

In this line, we add the types that belong to references we didn’t use in the program and that were specified in the ‘using’ (just like we did for the system types, but this time we do that for the references we added manually, not ‘System’).

GetUnUsedReferencedTypes 

• We go over the source code directory (the manually added references located there).
• We try to load the ‘.dll’ files and add all the types that pass the conditions we did in previous checks in main.

filter types Region

In this line, we only keep value types and classes that have a default constructor (if they are value types they have a default constructor for sure).

remove duplicated type names Region

We remove duplicated types by name.

How to Build the Snippets

We've gotten through the hard part, so now it’s time to build the snippets!

using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using Reader;

namespace SnippetGenerator2
{
    public class CodeSnippetGenerator
    {
        public string SnippetLocation;

        public CodeSnippetGenerator(string snippetLocation)
        {
            this.SnippetLocation = snippetLocation.EndsWith("\\") ? snippetLocation : snippetLocation + "\\";
        }

        public void UpdateSnippets()
        {
            List<Type> allTypes = TypeReader.GetAllTypes();
            Func<Type, string> makeFileName = x => SnippetLocation + x.Name + "-" + x.Namespace + ".snippet";

            DirectoryInfo myCodeSnippets = new DirectoryInfo(SnippetLocation);
            string[] snippetFileNames = allTypes.Select(x => makeFileName(x)).ToArray();
            string[] previous = myCodeSnippets.GetFiles().Where(x => x.Name.EndsWith(".snippet")).Select(x => x.Name).ToArray();

            //we only keep the files that no longer exsisted.
            previous = previous.Where(x => !snippetFileNames.Contains(x)).ToArray();
            previous.ToList().ForEach(x =>
            {
                try
                {
                    File.Delete(SnippetLocation + x);
                }
                catch { }
            });//we remove the files we don't need.

            allTypes.ForEach(x => 
            {
                if (!Directory.GetFiles(SnippetLocation).Contains(makeFileName(x)))
                    CreateSnippet(x);
            }
            ); //we create snippets for the types.
        }

        public List<string> RemoveAllCodeSnippets()
        {
            string[] files = Directory.GetFiles(SnippetLocation).ToArray();
            List<string> notDeleted = new List<string>();


            files.ToList().ForEach(x =>
            {
                StreamReader snippetFile = new StreamReader(x);

                if (snippetFile.ReadToEnd().Contains("<Author>AUTO-GENERATOR</Author>"))
                {
                    snippetFile.Close();

                    try
                    {
                        File.Delete(x);
                    }
                    catch
                    {
                        notDeleted.Add(x);
                    }
                }
            });

            int i = 0;
            while(i < notDeleted.Count)
            {
                i++;
                try
                {
                    File.Delete(notDeleted[i]);
                }
                catch
                {
                    continue;
                }
                notDeleted.Remove(notDeleted[i]);
            }

            return notDeleted;
        }


        /// <summary>
        /// Creates a snippet.
        /// </summary>
        /// <param name="type">The type to make the default create for.</param>
        /// <param name="description">The description of the snippet.</param>
        internal void CreateSnippet(Type type,
                                       string description = "DefaultDescription")
        {

            string snippet_structure = $@"<?xml version=""1.0"" encoding=""utf-8""?>
  <CodeSnippets xmlns = """">  
     <CodeSnippet Format = ""1.0.0"">   
         <Header>    
            <Title>{type.Name}-{type.Namespace}</Title>    
            <Author>AUTO-GENERATOR</Author>
            <Description> {description}</Description>
            <Shortcut> {type.Name} </Shortcut>   
         </Header>   
         <Snippet>  
           <Code Language = ""CSharp"">    
                 <![CDATA[{type.Name} $obj$ = new {type.Name}();]]>     
             </Code>     
             <Declarations>      
                <Literal>      
                    <ID>obj</ID>      
                    <ToolTip>variable name.</ToolTip>         
                       <Default>{type.Name.ToLower()}</Default>        
                   </Literal>       
                </Declarations>         
             </Snippet>        
           </CodeSnippet>
         </CodeSnippets>";

            //write the snippet into the snippets directory.
            File.WriteAllText(SnippetLocation + type.Name + "-" + type.Namespace + ".snippet", snippet_structure);
        }
    }
}

Let's talk about this code:

• “Reader” is the namespace of the class we’ve built before.
• TypeReader is the name of the class we’ve built before.
• The file names of the Snippets will be written as <TypeName>-<NamespaceName>.snippet

The Constructor

• The constructor accepts the path for the “My Code Snippets” directory from the user.

The CreateSnippet method

The “CreateSnippet” method creates a snippet with a common structure.

• Title — The <typeName>-<namespace>
• Author — AUTO-GENERATOR, we call all of them by the same name so we’ll know what snippets were created by the CodeSnippetGenerator and what were created by the user.
• We create a structure of:

TypeName typename(in small letters) = new TypeName();

• We set the “shortcut” to be the type name also.

The RemoveAllSnippets method

The RemoveAllSnippets method removes all the snippets that the CodeSnippetGenerator created.

We know if files were created by the code snippet generator by checking if the Author tag contains “AUTO-GENERATOR”.

We try again to delete files that were not deleted the first time. If we can’t delete them at the second time we return a list of the file names that we couldn't delete.

The UpdateSnippets method

The UpdateSnippets method updates the snippets each run. On each run:

• We read the names of the types we use in our main program (not in the CodeSnippetGenerator class).
• We read the names of the .snippet files we have from the previous run.
• We make an array of filenames for each one of our types from our current run.
• We see what snippet files we no longer need by comparing what names of snippet files we had in our previous run that don't exist in the filenames of the current run.
• We remove these files.
• Then we create a “.snippet” file for each type that doesn’t already have one.

How to Use the Snippet Auto-Generator Program

If you want to use the program, simply open a C# project and at the beginning of the main function write:

var csg = new CodeSnippetGenerator("path of 'My Code Snippets'>);
csg.UpdateSnippets(); //to create & update the snippets in 
project.csg.RemoveAllSnippets(); //to remove the created snippets.

Congratulations! You’ve now created your own CodeSnippetGenerator.

I hope these come in handy and save you time when you're writing your code. Thanks for reading :)

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.

Macro Snippets

The top level of sorcery is to have the capability to transform input. Transformations allow you to alter the value of a variable before they are inserted, or alter a placeholder after you have made an edit.

For example, you may want to capitalise a class name once it is entered.

Anything that you can think of doing with a regex is typically possible. Some editors offer more advanced scripting possibilities.

Snippets in Visual Studio Code

In VS Code, snippets appear in IntelliSense (Ctrl+Space gives you a suggestion list), they are mixed in with other suggestions.

You can also access them in a dedicated snippet picker by using the 'Insert Snippet' command. This combines all user, extension, and built-in snippets for that language into a single list.

Emmet is integrated into VS Code and has it's own CSS-selector inspired syntax for inserting HTML and CSS snippets.

Emmet is it's own thing really, but the mechanics are the same. You can learn about Emmet with the Emmet in Visual Studio Code guide.

Related User Settings

Snippets will appear as quick suggestions if the setting editor.quickSuggestions is set to true for the language you are working in. Quick suggestions are enabled by default for most languages except markdown.

Snippets support tab-completion. You can type a snippet prefix (the trigger text), and press Tab to insert a snippet. You can enable it with the setting editor.tabCompletion.

The values are:

• on: Tab completion is enabled for all sources.
• off: Disable tab completions. This is the default value.
• onlySnippets: Tab completion only for snippets.

"editor.tabCompletion": "onlySnippets",

If you would like to control how snippets suggestions are shown, you can edit the setting editor.snippetSuggestions.

The values are:

• top: Show snippet suggestions on top of other suggestions. I use this value.
• bottom: Show snippet suggestions below other suggestions.
• inline: Show snippets suggestions with other suggestions. This is the default value.
• none: Do not show snippet suggestions.

"editor.snippetSuggestions": "top",

These are the most important settings for snippets, but there are a few more. You can check out this list of the default settings to explore more, or do a search in the Settings UI.

Are there built-in snippets?

Yes!

They aren't documented in the VS Code docs, though. And inside VS Code, there is no central point to browse them. So, you may not know what they are.

So, how can you find out what languages have built-in snippets?

Long story short, I was frustrated by this scenario, so I wrote an extension called Snippets Ranger to give a nice UI to explore snippets easily. Think of it as a Marauder's Map for snippets!

But I want to find the snippets for myself?

You can, it just requires a bit more effort.

As I mentioned earlier, the 'Insert Snippet' command will show you all snippets for the language of the active document.

Remember though, this is an aggregate of all of the user, extension, and built-in snippets. So, if you want to find out if a particular language has built-in snippets, you need to open a file for that language, and run the command to see that list.

If you have an snippets extension installed for that language that makes it too hard to identify which is which, you could disable it to ensure that only the built-in snippets are showing. ?

If you want to track down the source file yourself, the built-in snippets live inside each individual language extension directory. The file is located at «app root»\resources\app\extensions\«language»\snippets\«language».code-snippets on Windows. The location is similar for Mac and Linux.

Snippets Extensions

The Visual Studio Marketplace has a snippets category where you can find snippets for almost anything.

A lot of Programming Language Pack extensions include snippets also (Python, C#, Go, Java, and C/C++ amongst others).

How do I write my own?

Snippets files are written in JSON. You can also add C-style comments if you wish (technically it is Microsoft's "JSONC" format).

You can create snippets for different scopes: global, workspace, and for a particular language.

To create the snippets file, run the 'Preferences: Configure User Snippets' command, which opens a quickpick dialog as below. Your selection will open a file for editing.

If you would prefer to write a snippet in a GUI, you can use the snippet generator web app.

Let's look at an example to get familiar with the syntax.

Example

Here is a markdown snippet that comes with VS Code.

{
    "Insert heading level 1": {
       "prefix": "heading1",
       "body": ["# ${1:${TM_SELECTED_TEXT}}$0"],
       "description" : "Insert heading level 1"
    }
}

This snippet inserts a level 1 heading which wraps the markdown around the current selection (if there is one).

A snippet has the following properties:

1. "Insert heading level 1" is the snippet name. This is the value that is displayed in the IntelliSense suggestion list if no description is provided.
2. Theprefix property defines the trigger phrase for the snippet. It can be a string or an array of strings (if you want multiple trigger phrases). Substring matching is performed on prefixes, so in this case, typing "h1" would match our example snippet.
3. The body property is the content that is inserted into the editor. It is an array of strings, which is one or more lines of content. The content is joined together before insertion.
4. The description property can provide more information about the snippet. It is optional.
5. The scope property allows you to target specific languages, and you can supply a comma-separated list in the string. It is optional. Of course, it is redundant for a language-specific snippet file.

The body of this snippet has 2 tab stops and uses the variable ${TM_SELECTED_TEXT}.

Let's get into the syntax to understand this fully.

Snippet syntax

VS Code's snippet syntax is the same as the TextMate snippet syntax. However, it does not support 'interpolated shell code' and the use of the \u transformation.

The body of a snippet supports the following features:

1. Tab Stops

Tab stops are specified by a dollar sign and an ordinal number e.g. $1 . $1 will be the first location, $2 will the second location, and so on. $0 is the final cursor position, which exits the snippet mode.

For example, let's say we want to make an HTML div snippet and we want the first tab stop to be between the opening and closing tags. We also want to allow the user to tab outside of the tags to finish the snippet.

Then we could make a snippet like this:

{
    "Insert div": {
        prefix: "div",
        body: ["<div>","$1","</div>", "$0"]
    }
}

2. Mirrored Tab Stops

There are times when you need to provide the same value in several places in the inserted text. In these situations you can re-use the same ordinal number for tab stops to signal that you want them mirrored. Then your edits are synced.

A typical example is a for loop which uses an index variable multiple times. Below is a JavaScript example of a for loop.

{
    "For Loop": {
        "prefix": "for",
        "body": [
            "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
            "\tconst ${3:element} = ${2:array}[${1:index}];",
            "\t$0",
            "}"
        ]
    }
}

3. Placeholders

Placeholders are tab stops with default values. They are wrapped in curly braces, for example ${1:default}. The placeholder text is selected on focus such that it can be easily edited. Placeholders can be nested, like this: ${1:first ${2:second}}.

4. Choices

Choices present the user with a list of values at a tab stop. They are written as a comma-separated list of values enclosed in pipe-characters e.g. ${1|yes,no|}.

This is the code for the markdown example shown earlier for inserting a task list. The choices are 'x' or a blank space.

{
  "Insert task list": {
    "prefix": "task",
    "body": ["- [${1| ,x|}] ${2:text}", "${0}"]
}

5. Variables

There is a good selection of variables you can use. You simply prefix the name with a dollar sign to use them, for example $TM_SELECTED_TEXT.

For example, this snippet will create a block comment for any language with today's date:

{
    "Insert block comment with date": {
        prefix: "date comment",
        body: ["${BLOCK_COMMENT_START}",
               "${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1}",
               "${BLOCK_COMMENT_END}"]
    }
}

You can specify a default for a variable if you wish, like ${TM_SELECTED_TEXT:default}. If a variable does not have a value assigned, the default or an empty string is inserted.

If you make a mistake and include a variable name that is not defined, the name of the variable is transformed into a placeholder.

The following workspace variables can be used:

• TM_SELECTED_TEXT: The currently selected text or the empty string,
• TM_CURRENT_LINE: The contents of the current line,
• TM_CURRENT_WORD: The contents of the word under cursor or the empty string,
• TM_LINE_INDEX: The zero-index based line number,
• TM_LINE_NUMBER: The one-index based line number,
• TM_FILENAME: The filename of the current document,
• TM_FILENAME_BASE: The filename of the current document without its extensions,
• TM_DIRECTORY: The directory of the current document,
• TM_FILEPATH: The full file path of the current document,
• CLIPBOARD: The contents of your clipboard,
• WORKSPACE_NAME: The name of the opened workspace or folder.

The following time-related variables can be used:

• CURRENT_YEAR: The current year,
• CURRENT_YEAR_SHORT: The current year's last two digits,
• CURRENT_MONTH: The month as two digits (example '07'),
• CURRENT_MONTH_NAME: The full name of the month (example 'July'),
• CURRENT_MONTH_NAME_SHORT: The short name of the month (example 'Jul'),
• CURRENT_DATE: The day of the month,
• CURRENT_DAY_NAME: The name of day (example 'Monday'),
• CURRENT_DAY_NAME_SHORT: The short name of the day (example 'Mon'),
• CURRENT_HOUR: The current hour in 24-hour clock format,
• CURRENT_MINUTE: The current minute,
• CURRENT_SECOND: The current second,
• CURRENT_SECONDS_UNIX: The number of seconds since the Unix epoch.

The following comment variables can be used. They honour the syntax of the document's language:

• BLOCK_COMMENT_START: For example, <!-- in HTML,
• BLOCK_COMMENT_END: For example , --> in HTML,
• LINE_COMMENT: For example, // in JavaScript.

6. Transformations

Transformations can be applied to a variable or a placeholder. If you are familiar with regular expressions (regex), most of this should be familiar.

The format of a transformation is: ${«variable or placeholder»/«regex»/«replacement string»/«flags»}. It is similar to String.protoype.replace() in JavaScript. The "parameters" do the following:

• «regex»: This is a regular expression that is matched against the value of the variable or placeholder. The JavaScript regex syntax is supported.
• «replacement string»: This is the string you want to replace the original text with. It can reference capture groups from the «regex», perform case formatting (using the special functions: /upcase, /downcase, and /capitalize), and perform conditional insertions. See TextMate Replacement String Syntax for more in-depth information.
• «flags»: Flags that are passed to the regular expression. The JavaScript regex flags can be used:
  • g : Global search,
  • i : Case-insensitive search,
  • m : Multi-line search,
  • s : Allows . to match newline characters,
  • u : Unicode. Treat the pattern as a sequence of Unicode code points,
  • y : Perform a "sticky" search that matches starting at the current position in the target string.

To reference a capture group, use $n where n is the capture group number. Using $0 means the entire match.

This can be a bit confusing since tab stops have the same syntax. Just remember that if it is contained within forward slashes, then it is referencing a capture group.

The easiest way to understand the syntax fully is to check out a few examples.

As you can see from the second example above, metacharacter sequences must be escaped, for example insert \\w for a word character.

Placeholder Transformations

Placeholder transforms do not allow a default value or choices! Maybe it is more suitable to call them tab stop transformations.

The example below will uppercase the text of the first tab stop.

{
  "Uppercase first tab stop": {
    "prefix": "up",
    "body": ["${1/.*/${0:/upcase}/}", "$0"]
  }
}

You can have a placeholder and perform a transformation on a mirrored instance. The transformation will not be performed on the initial placeholder. ?

Would you use this behaviour somewhere? I find it confusing initially, so it may have the same affect on others.

{
  "Uppercase second tab stop instance only": {
    "prefix": "up",
    "body": ["${1:title}", "${1/(.*)/${1:/upcase}/}", "$0"]
  }
}

How do I assign Keyboard Shortcuts for snippets?

By adding your shortcuts to keybindings.json . You can open the file by running the 'Preferences: Open Keyboard Shortcuts File (JSON)' command.

For example, to add a shortcut for the built-in markdown snippet "Insert heading level 1":

{
    "key": "ctrl+m ctrl+1",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus && editorLangId == markdown",
    "args": {
        "langId": "markdown",
        "name": "Insert heading level 1"
    }
}

You define a shortcut by specifying the key combination you want to use, the command ID, and an optional when clause context for the context when the keyboard shortcut is enabled.

Through the args object, you can target an existing snippet by using the langId and name properties. The langId argument is the language ID of the language that the snippets were written for. The name is the snippet's name as it is defined in the snippet file.

You can define an inline snippet if you wish using the snippet property.

[
  {
    "key": "ctrl+k 1",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "${BLOCK_COMMENT_START}${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1} ${BLOCK_COMMENT_END}"
    }
  }
]

You can use the Keyboard Shortcuts UI also, but it does not have the ability to add a new shortcut.

Another downside of the UI is that it does not show the args object, which makes it more difficult to find and edit your custom shortcuts. ?

A question of style

Something that I found offputting initially with snippets was the propensity for people to create snippets with abbreviated prefixes. Do I have to learn a big list of gibberish acronyms to use someone else's snippets?

What do I mean by abbreviated prefixes? The table below list a few of the snippets from the JavaScript (ES6) code snippets VS Code extension. You can see in the Trigger column, the prefixes listed are abbreviations, for example fre to represent a "for each" loop.

This is unnecessary in two ways.

Firstly, the quick suggestions offered by VS Code are produced from a fuzzy substring search. If I type "fe" and the prefix of a snippet is "foreach", this will match and be offered as a quick suggestion.

As you can see below, this is the second match.

The first match is fre, which is a snippet from the extension. Which suggestion is more descriptive? ?

If you use the "Insert Snippet" command for snippets, it does not make much of a difference. The description field makes amends for this shortcoming. I don't use snippets in this way, so I would prefer a more descriptive prefix.

Secondly, fre is a duplicate of the built-in snippet foreach.

Some people turn off quick suggestions for snippets and use tab completion only. In this case, you need to type a prefix out without getting visual feedback. Some people may prefer to use an abbreviated prefix to save keystrokes here.

The same fuzzy substring search is being performed in the background, so the first snippet match is inserted when you hit tab.

Looking at the example above, you can see that typing "fr" and hitting tab inserts the fre snippet. Typing "fore" and hitting tab inserts the foreach snippet.

So, you do not need to type out the entire prefix, if you really don't want to! ? If you have many similarly named snippet prefixes for a language, it would be impractical I imagine.

It is more practical to learn the prefixes properly, and type them out entirely before hitting tab.

There are some trade-offs depending on your preferences for using snippets.

Personally, I like to use quick suggestions as I like the visual feedback. I have snippets set to be the top suggestions, that way I can type abbreviated versions of the prefixes without needing to memorise them.

Some snippet authors have rigid patterns to overcome this, but that's just something I can't get into easily.

If you use a lot of snippets for a language, you may want to choose snippets that are written in a similar style.

If you use snippets for different frameworks and libraries in a language, they can add up and overlap. I haven't needed to do this, but you may need to do it eventually.

Global Snippets

Outside of your code editor, you can benefit from snippets also. Having snippets available in every app offers more possibilities.

Common use cases are:

• canned responses for messages,
• autocorrecting common typos,
• adding contact information or signatures to documents,
• inserting dates,
• formatting of selected text and pasted text,
• inserting search phrases for your search engine or app,
• HTML snippets available inside your email client,
• adding different templates to documents.

Most of the apps for snippets are touted as "text expanders", but quite a few task and productivity apps also include snippet-esque features.

Global snippets are bit more limited that code editor snippets, as you cannot use tab stops and placeholders. In most apps you can use some dynamic variables such as dates.

App Review

Autohotkey (Windows)

AutoHotkey is a free, open-source scripting language for Windows to do all kinds of tasks.

It has it's own unique syntax. You can install the AutoHotKey extension to add language support to VS Code for a better editing experience.

For defining prefixes to trigger a snippet insertion, you use the following format: ::<<prefix>>::<<text to insert>>. The following script will insert Rob's email address when you type "robmail" and hit space or tab or enter.

::robmail::rob@someservername.com

The following script will insert the text "This is the snippet text" when you press Ctrl+D.

^d::  Send This is the snippet text

You can read the docs to learn more.

PhraseExpress (Windows, Mac, iOS)

PhraseExpress is "a text expander software, that manages frequently used text templates for insertion into any program".

It is a freemium, GUI-based app. It is aimed at a wider audience than AutoHotKey.

It is quite polished and easy to use. You set it to run on start-up and it will be active in the background.

Your snippets can be organized into custom folders and synced using cloud services.

Espanso (Windows, Mac, Linux)

This is a open-source, cross-platform text expander written in Rust.

It uses a file-based configuration approach. The config files are written in YAML.

The default.yml file contains the main configuration. The config below will insert Rob's email address when you type "robmail" .

matches:
 - trigger: ":robmail"
   replace: "rob@someservername.com"

You can specify the initial cursor position, however you cannot define tab stops.

You can add extensions to increase the capability of Espanso. There are extensions for running external scripts, including dates, generating random text, and including clipboard data.

And that's about it! I hope you learned something about snippets today, and you can use them to make yourself more productive.

I recently switched jobs, which involves a lot of acclimation: new coworkers to befriend, new terms to learn, a new development environment to internalize. But most of all, the switch came with a change in programming languages, away from the tidy aesthetic of Python, and straight into the angled and curly world of JavaScript.

As I continued to misplace brackets and omit parenthesis, I searched for something that would help me navigate the unfamiliar territory. Luckily, I found Sublime Text Snippets.

I love Sublime Text Snippets because they reduce cumbersome definitions to a few keystrokes, like this:

Overview

Sublime Text Snippets expedite the act of writing code by providing a quick way to insert blocks of text that show up repeatedly in a project. They are both easy to understand and straightforward to write, making them a great tool for saving time and eliminating errors while developing.

A snippet maps a trigger word to a pre-defined block of text, both of which you define. To invoke the snippet, type the trigger word and press tab. This simple action expands the trigger word into the mapped block of text — replete with as many brackets, parentheses, and semi-colons as necessary, always matching and in the correct order.

Note: The examples given below apply mostly to JavaScript and React, but the information about snippets can be applied to any programming language or framework.

Creating Snippets

To create a new snippet in Sublime Text 3, go to:

Tools -> Developer -> New Snippet...

This opens a new window containing a new snippet template, which looks like this:

There are four parts to a snippet. Although only one part is required, defining all four is recommended.

1) The Content (Line 3): Required

<content><![CDATA[  Hello, ${1:this} is a ${2:snippet}.]]></content>

Define the block of text to be expanded by the snippet by editing the line(s) between the <![CDATA[ and ]]> tags. (From now on, the block of text that is expanded after the snippet is invoked will be referred to as the snippet’s c_on_tent).

You’ll notice the presence of words surrounded by a dollar sign, braces, numbers, and prefixed by a number. This optional markup specifies a Field Marker, which controls the cursor position after the snippet is invoked.

After content is expanded, the cursor moves automatically to the first field marker (${1:this} above). Pressing tab again moves the cursor to the next numbered field marker, or to the end of the snippet’s content if there are no fields left (see pro tip below).

Text after the colon in a field marker is optional. If specified, it is automatically selected as part of the cursor movement, meaning it can be deleted in one swift stroke. This makes text after the colon great for “placeholder” values that provide guidance of what should be filled in, or for optional default values, such as the isRequired field in the example below.

Pro tip
Use the $0 field marker (the exit marker) to explicitly define where the cursor will exit after all field markers have been cycled through. This is useful if you want to rebind the tab key to auto-completion after the snippet is invoked. To do so, place the exit marker immediately after the first field marker, like this:${1:example}$0

2: The Trigger Word (Line 6): Optional

<tabTrigger>hello</tabTrigger>

Short and mnemonic trigger words work best. For example, the Babel React Snippet package maps cwm to componentWillMount and cwr to componentWillReceiveProps.

Trigger words are optional because there is an alternative way to invoke snippets, which we will cover in the Advanced Usage section.

3: A Scope (Line 8): Optional

<scope> source: python </scope>

Scopes limit where your snippet can be invoked, improving precision and preventing collisions. For example, with scopes, the same trigger word can have different meanings for different programming languages.

This gist lists how to define scopes for a long list of programming languages, but scopes are capable of much more. We will cover scopes in more detail in the Advanced Usage section.

4: A Description (Line 10): Optional

<description> demo description </description>

For some reason, the description tag doesn’t show up in the create snippet template. However, providing one will come in handy.

Snippets show up in Sublime Text’s auto-complete menu, along with a descriptive phrase. Without a description, this phrase defaults to the snippet’s filename, which isn’t guaranteed to have enough context when multiple snippets share the same prefix.

Descriptions help me untangle my import snippets

Pro tip
Create a keyboard shortcut to quickly create a new snippet. Go to Preferences -> Keybindings and add the following line to the “User” configuration file (of course, replace cmd+alt+n with whatever combination suits you best):

{ "keys": ["cmd+alt+n"], "command": "new_snippet" }

Saving Snippets

After creating your snippet, make sure to save it in a file ending in sublime-snippet. On Mac, user created snippets are saved at:

~/Library/Application Support/Sublime Text 3/Packages/User

Creating a new snippet through the menu item or keyboard shortcut automatically prompts this location on save.

Advanced Usage

Environment Variables

We’ve covered the four aspects of creating a static snippet. However, it is possible to create dynamic snippets through the use of environment variables, which contain references to the context in which a snippet was invoked.

Context is a vague term, so see the Sublime Text Snippet Documentation for a table of environment variables and their exact meanings.

For an example of how environment variables can be used, my team follows a convention where a component’s stylesheet is saved under the same file name as the component, and given a .scss extension.

The component file can then leverage this convention with a snippet using the $TM_FILENAME environment variable.

<content><![CDATA[  import styles from './$TM_FILENAME${1:}scss']]></content>

The $TM_SELECTED_TEXT or $SELECTION environment variable serves a more general purpose. Remember how I mentioned there was an alternative way of invoking snippets? Instead of keying the trigger word and hitting tab, you can also invoke snippets through the Command Palette.

On Mac, hit cmd+shift+p to bring up the Palette, type ‘Snippet’ and select the desired snippet from the drop-down. This roundabout approach has one major benefit — it is possible to invoke a snippet with a block of text selected, and for that text to be included as part of a snippet’s content. This allows you to create “wrapping” snippets, which wrap selected text with an if clause, for example.

Pro tip
Expand selection shortcuts are great for quickly selecting text to wrap with snippets like the one above.

Advanced Scopes

We’ve talked about limiting snippets to certain source code files, but snippets often have more granular contexts in which they are valid. As an example, a method such as componentWillUpdate typically only makes sense within a component (class) definition, which the following snippet definition makes explicit:

The inclusion of meta.class.js on line 8 means that the snippet is only valid in situations where the source code file being edited is a JavaScript file, and the cursor is “within” a class definition. If you tried to invoke the snippet in a blank JavaScript file, nothing would happen.

To fully leverage the power of scopes, you need to have a little understanding of syntax, scopes and scope selectors. These are nuanced topics worthy of their own post, so I’ll explain them at a very high level, with links to the documentation to fill in the gaps:

• a language syntax defines how source code is divided into scopes.
• scopes are labeled regions of text that correspond to the “units” of a programming language, such as class or function definitions. Every position within a source code file has an associated scope. Meta scopes are most relevant to snippets.
• scope selectors “query” scopes. Scopes selectors are bound to actions (such as snippets, or keyboard shortcuts), and are used to determine if the action is appropriate given the current scope.

Pro tip
The best way to learn about scopes is play around with them. Move your cursor to different positions within a file, and use the cmd+shift+p keyboard shortcut to bring up a pop-up menu displaying the associated scope:

Snippets take mere seconds to create. Yet they save much more in effort, and not just by saving how much you have to type. By providing a quick, reproducible way to expand content, snippets reduce errors. They also abstract away hard-to-remember details, such as method names and their signatures. All of this frees your fingers — and your brain — to focus on what they want to do most: write great code.