Atom is the very popular code editor created by Github in the area of web development. atom does not have only lots of package rather its every part is customizable by the user.

We can make our coding workflow more easily by using the Atom’s Snippets feature, we can reduce the repetitive part of our work. I will show you how you can use Atom’s built-in code snippets, and create your own custom snippets in this post.

Adding your custom code snippets

To add your own custom code snippets to Atom, first of all, you need to find the configuration file called snippets.cson, CSON is standing for Coffee Script Object Notation

Click on the Edit > Snippets… menu in the top bar, and Atom will open the snippets.cson file to which you can add your own custom snippets.

You will need four things in order to add your custom snippet:

The name of the scope, the name of the snippet, prefix that will function as the handle of the snippet, the body of the snippet. name, prefix, and body of the snippet depend on you and however, you find the name of the scope before adding your custom snippets.

To find the scope just go to atom setting by pressing Ctrl +, and find the packages tab then search the scope that you need in the search box.
For example, if you want to add the snippet for PHP language then type PHP in the search box

Click on the setting button of language-php, then you can quickly find the name of the scope, as you can see in the screenshot below.

Here are some scopes you may want to use in your Atom projects:

Plain Text:    .text.plain
HTML:          .text.html.basic
CSS:               .source.css
JavaScript:   .source.js
PHP:              .text.html.php
Java:              .source.java
Tpl:                .text.tpl

Create Single-Line Code Snippets

To create a single-line code snippet, you need to add scope, name, prefix, and the body of the snippet to the snippets.cson file, using the following syntax:

Note:- Don’t forget to add the dot (.) operator in before the name of scope.

Create Multi-Line Code Snippets

Multi-line code snippets, You need to add the same data as for single-line snippets — the scope, the name, the prefix, and the body of the snippet.

It is a little bit different that snippet body within a pair of """ (three double-quotes).

 

After saving the configuration file, whenever you type the prefix & hit the Tab key, Atom will paste the belonging snippet body into your code editor. The name of the snippet (in the example Print) will be displayed in the autocomplete results box.

 

Add Optional Parameters

Atom allows you to add extra information to your snippets by using Optional Parameter.

The values of the optional parameters are displayed in the autocomplete results box that comes up when you begin to type a prefix. In the example below, I added a description & a More... link to the previous PHP Print_r custom snippet:

 

Output at code view.

I hope you enjoyed this article, we will have some more useful articles in future which will be helpful for developer’ daily coding life.

I will see you again with the new topic and have a great day!