Table of Contents
How to Add Custom Code Snippets to Atom: Atom is a very popular code editor in the web development field developed by GitHub; Atom does not have many packages, rather every part of it is customizable by the user.
Atom’s snippets feature can be used to make your coding workflow easier and reduce repetitive tasks. This article will show you how to use Atom’s built-in code snippets and how to create your own custom snippets.
How to Add Custom Code Snippets to Atom
Find the configuration file
To add your own custom code snippets to Atom, first you need to find the configuration file called snippets.cson that is a CoffeeScript Object Notation file. Click on the File > Snippets… menu in the top bar, and Atom will open the snippets.cson file to which you can add your own custom snippets.
Find the Right Scope
- The name of the scope
- The name of the snippet
- The prefix that will function as the handle of the snippet
- The body of the snippet
To find the scope you need, click on the File > Settings menu in the top menu bar, then find the Packages tab among the Settings. Here, run a search for the scope you need, for example if you want to add code snippets to the HTML language, type HTML into the search bar.
Create Single-Line Code Snippets
To create a single-line code snippet, you need to add the scope, the name, the prefix, and the body of the snippet to the snippets.cson file, using the following syntax:
Create Multi-Line Code Snippets
Multi-line code snippets use a little bit different syntax. You need to add the same data as for single-line snippets — the scope, the name, the prefix, and the body of the snippet.
Add Tab Stops
You can further facilitate the usage of your custom code snippets by adding tab stops to the snippet body. Tab stops indicate the spots where the user can navigate by using the Tab key. With tab stops you can save the time that in-text navigation requires. You can add tab stops using the $1, $2, $3, … syntax. Atom will position the cursor to the place it finds $1, then you can jump to $2 with the Tab key, then to $3, and so on.
Add Optional Parameters
Atom allows you to add extra information to your snippets by using optional parameters. This feature can be useful if someone else also uses your editor and you want to let them know the purpose of the snippet, or if you have so complicated custom snippets that you need to add notes to them.
Why Code Snippets are Useful
When I first started learning to code, the first code snippets I used were Ctrl + ! and Enter. (I doubt anyone has memorized how to write this.) It was cool and I felt like a code ninja. (PS: If you don’t want to read the backstory and want to jump right into the tutorial, jump right in…)
As I began to explore coding further, I learned about VSCode extensions that made coding faster, especially code snippets, and downloaded them repeatedly. All was well, but I began to use frameworks and libraries more frequently in my projects. So I tried to learn how to link documentation to packages and how to use personalized CSS resets and variables.
FAQ
How to add C snippets in VS Code?
Highlight the code for which you want to create a snippet, press ctrl + shift + P, type “create snippet” in the command palette, and press ENTER. Enter a snippet name, a shortcut for the snippet, and a description of the snippet. You are now ready to go.
What is custom code snippets?
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.