Github has provided us with an all-encompassing source-code text editor, Atom that stands out in a crowd of a number of text-editors available out there, on the grounds of its features. It is free and open-source, modern and approachable, hackable to the core and easy to customize. It supports cross-platform editing and comes with a number of pre-installed themes and open-source packages to choose from to add new functionalities and a lot more.

Snippets

Snippets, one of its features has made the task of writing code easier with the availability of commonly needed code syntax in the editor from a shortcut. Atom comes with some built-in code snippets that one can use. Just type the prefix or shortcut and hit the Tab key, it will automatically generate the code syntax for you. Say you have opened a .html file in the Atom. Type ‘html’ and press Enter or Tab key, it will generate the code shown in the image below for you and the position of the cursor will be between theelement. After writing some text in the title element as you press Tab key again, the cursor will move to the element.

You can find all the snippets available for your now opened file by going in the menu Packages > Snippets > Available or you can type Snippets: Available in the Command Pallet(Ctrl+Shift+P), a fuzzy finder window will open showing all the available pre-installed snippets for your file, as shown below.

You can select any of the available snippets from the fuzzy finder and hit Enter to expand the code syntax for that particular prefix.

Custom Code Snippets

Atom can’t know and fulfill every individual’s need who use it, that’s the reason it has only a few commonly used built-in snippets available. But Atom does give functionality to its users to customize it the way they want. If you want your own shortcut prefixes to expand a particular code syntax to make coding much more hassle-free, you can add custom code snippets to your file.

The code to add custom snippets is written in a configuration file called snippets.cson which is a CoffeeScript-Object-Notation file. Go to the menu File > Snippets, it will open the configuration file snippets.cson. It already has some description and example written in it as shown below.

Format

There is a pre-defined format to write snippets. We’ll describe the format with an example written below.

These four lines have their own meaning, let’s understand them to step by step.

1. The first line ‘.source.js’: is the Scope Name. It tells where the particular snippet should be active. Scope Name is different for different file types.

The Scope Name can be found in Atom in Settings View. Go to Packages and type the name of the particular language package you want to add a snippet for. There you’ll find the scope name in the Language Grammar.

As an example, if you want to add a snippet for the javascript file, then those snippets will only be active when you’re working on the JavaScript files. Those snippets won’t work in .html or .css files. Below are the screenshots of how to find the scope name for javascript type file.

Go to Settings > Packages and Enter the language package name you want to add snippet for

Click the language-javascript package to go to its settings. In JavaScript Grammar, you can find Scope: source.js. We have selected it in our screenshot for your ease to find.

You can also find the scope name of the file you’ve currently opened in your editor by opening the Command Palette (Ctrl+Shift+P) and typing Editor: Log Cursor Scope. It will show the Scope of the file according to where your Cursor is now positioned.

2. The second line ‘console.log’: is the Snippet Name. This is the name that shows up below the prefix name in the fuzzy finder window when looking for available Snippets as shown below. You can name it anything you want.

3. The third line ‘prefix’: ‘log’ the Prefix Name. This keyword is the actual prefix or shortcut that triggers the action. On typing, this prefix and hitting the Tab key will expand the code. Here ‘log’ is the prefix or shortcut.

4. The fourth line ‘body’: ‘console.log(${1:”crash”});$2’ is the actual Code Syntax that is expanded when the prefix is entered and Tab key is pressed.

The body has some extra control codes. Let’s see what these are.

Each $ followed by a number is a Tab Stop like $1, $2, $3, $4 and so on. Tab Stop tells the position of the cursor after the Snippet has been triggered. $1 tells where the cursor will be positioned just after the snippet has triggered. In our example, ‘crash’ keyword will be selected. If we press the Tab again, it will go to $2 and place the cursor on the object defined by $2.

Congratulations! You’ve made it. So, now you know how to add custom code snippets to your file. But we’re not done yet.

Multi-line Snippet Body

What if you don’t just want a single line code to expand. You want some big or multiline code to get generated on some prefix. Yes. You got me right. There is a way you can have multi-line snippet body under the short prefix. To add multi-line body to a snippet, make use “”” (three double quotation marks). An example is shown below.

No no no. We’re still not over. An amazing thing is yet to be covered. Does it really sound realistic to you to have only one snippet per file? Obviously not. Then there must a way round to have multiple prefixes per file type. Yes, there is. Let’s discuss it.

Multiple Snippets per Source

You can add multiple snippets under the same scope using the format given below. You’ll code it the same way you’ve been doing in the same snippet.cson configuration file. Since we’re adding snippets for the same file type, all the snippets must come under the same scope. Scope Name will occur only once in the code. But you will different Snippet Name, Prefix and Body for different snippets as you add. Below is an illustration of it.

Grabbed the concept? Bodacious! I hope you’re off the hook now. Let’s use the knowledge and do some coding.