How to Create Code Snippets in VS Code

Visual Studio Code (VS Code) is a popular source code editor that offers various features designed to boost developer productivity. One of the most powerful features is the ability to create and utilize code snippets, which can streamline your coding process by allowing you to quickly insert commonly used code blocks. In this article, we’ll explore how to create, customize, and manage your own code snippets in VS Code.

What are Code Snippets?

Code snippets are predefined, reusable blocks of code that can be inserted into your files with just a few keystrokes. This feature is particularly useful for repetitive tasks, such as inserting boilerplate code or frequently used patterns.

To view available snippets in VS Code, you can search for the “Insert Snippet” command in the Command Palette using the shortcut CMD + SHIFT + P on macOS or Ctrl + Shift + P on Windows.

Creating Custom Snippets

Follow these steps to create your own custom snippets:

1. Open the Command Palette:
   • Use the shortcut CMD + SHIFT + P (macOS) or Ctrl + Shift + P (Windows) to open the Command Palette.
   • Type and select “Configure User Snippets.”
2. Select a Language or Create a Global Snippet:
   • After selecting “User Snippets,” you’ll be prompted to choose the language for which you want to create a snippet. Alternatively, you can choose to create a “New Global Snippets file” that applies to multiple languages.
3. Define the Snippet:
   • In the opened JSON file, add a new snippet entry in the required format. Here’s an example of what a custom snippet might look like:
   {
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}

   • The prefix is the trigger for your snippet, body is the code that gets inserted, and description provides a brief explanation of what the snippet does.
   • Save the JSON file to apply your changes.
     

     How to Create Code Snippets in VS Code

Setting Tab Completion and Triggering Snippets

You can customize how your snippets are triggered by configuring tab completion:

1. Enable Tab Completion:
   • Open the settings.json file using the “Preferences: Open User Settings (JSON)” command from the Command Palette.
   • Add the following line to the JSON file:
     "editor.tabCompletion": "on"

   • This setting allows you to insert snippets by typing the trigger and pressing the Tab key.
2. Trigger Your Snippet:
   • Once tab completion is set up, you can type the snippet trigger and press Tab to insert the code snippet. For instance, typing log followed by Tab will insert console.log(''); into your file.

Removing Snippets

If you no longer need a snippet, you can remove it easily:

1. Locate the Snippet:
   • Use the “User Snippets” command in the Command Palette to navigate to the appropriate JSON file.
2. Delete the Snippet Entry:
   • Find the snippet you want to remove in the JSON file, delete the corresponding entry, and save the file.
3. Deleting Snippet Files:
   • If you only have one snippet configured and want to remove it entirely, you can delete the snippet file. Navigate to the file location (e.g., Library/Application Support/Code/User/snippets), then use terminal commands to delete the file:
     ➜ ~ cd Library/Application\ Support/Code/User/snippets
➜ rm cyref.code-snippets


Conclusion

Creating and managing code snippets in VS Code can greatly enhance your coding workflow. By defining custom snippets, setting up tab completion, and removing snippets you no longer need, you can tailor VS Code to better suit your development needs. With these tools at your disposal, you can focus more on writing code and less on repetitive tasks.