OneBite.Dev - Coding blog in a bite size

How to Make Custom Atom Snippet

How to make a custom atom's snippet, to make your coding time more productive

DRY or don’t repeat yourself is one of the most popular advice we got in coding. Not just for the code we write, it also apply for things we do while writing code. If you love using atom as your main text editor, we can make some snippets to help us generate text/code that we often use.

How to make snippet in Atom

Open the “Atom menu” > “Snippets” to see and add to our current available snippets, or use the search bar in “Help” menu and type “snippets”. It will open snippets.cson file for us.

Let’s say we want to add a snippet to console.log something just by type “log” in atom

snippet atom

{{< highlight Bash >}} ‘.source.js’: ‘console something’ : ‘prefix’ : ‘log’ ‘body’ : """ console.log() """ {{< / highlight >}}

What is that code do? :

How to make multiple snippets for the same file in atom

What if we want more than one snippet for the same file?

'.source.js':
 'console something' :
  'prefix' : 'log'
  'body' : """
           console.log()
           """
  'closure function' :
    'prefix' : 'closuref'
    'body' : """
         (function () {
             'use strict';
          }())
         """

Still under the ‘.source.js’ tab we add the second one with a different name

How to make a snippet for all files in atom

What if you want to add a snippet for all type of files? we just need to use star symbol *. Here’s an example to add multiple comments, I named “mulcom”

'*':
  'Multiple Comments':
    'prefix': 'mulcom'
    'body': """
            /*
             *
             */
            """

Now, try to remember what are some common codes you write in atom, make a snippet for that!

atom productivity text-editor