Atom Snippet Customization

The Atom text editor comes with a number of default snippets that are associated with (and activated by) Emmet-like abbreviations. We can type an abbreviation, and then hit TAB to expand that abbreviation into a pre-defined snippet of code. This is particularly useful in eliminating repetition.

For example, if we type html and then press TAB, we’ll get this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>

An added bonus is that after generating this bit of code, the cursor is placed conveniently between the opening and closing title tags. If the user hits TAB again, the cursor will jump to the body of the document. Every feature of this default action (the abbreviation, the content and formatting of the resulting snippet, and the result of hitting the TAB key) can be customized in the snippets.cson file.

To find this file, open Atom’s preferences and select “Open Config Folder”. In the file tree, open the snippets.cson file. Below the comments, if we type “snip” and then hit TAB, an example snippet will be generated for us:

'.source.js':
  'Snippet Name':
    'prefix': 'Snippet Trigger'
    'body': 'Hello World!'

The first line specifies the language for which the snippet will be used (JavaScript in the above example). The next line serves as a human-readable name for the snippet. This, I believe, exists only for documentation purposes; if we provide a relevant name for this task, our code will be more readable. The ‘prefix’ refers to the (ideally short) abbreviation, and ‘body’ refers to the snippet that will be generated upon pressing TAB. Here is an example of what the CSON block would look like if we were specifying the instructions for generating the HTML code in the first example above:

'.text.html.basic':
  'HTML':
    'prefix': 'html'
    'body': '<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset="utf-8">\n\t\t<title>$1</title>\n\t</head>\n\t<body>\n\t\t$2\n\t</body>\n</html>'

Notice that in the ‘body’ section, in addition to the plain HTML, we see escape sequences for newline characters and tabs. This is how we control the formatting of the snippet. We also see $1 and $2. With these special characters, we can tell Atom where to insert the cursor with every subsequent press of the TAB key. $1 is placed where we’d like the cursor to appear after we first generate the snippet. $2 is placed where we’d like the cursor to move when we hit TAB a second time.

In order to determine the proper scope of the CSON block, we need to navigate to Atom preferences > packages, and then scroll down to the target language. If we click on “language-html”, under the HTML Grammar section, we’ll see that the value of the Scope variable is .text.html.basic. If we forget to set the scope value in each CSON block, Atom will not know what the proper corresponding document type should be. If we’re creating a custom PHP snippet, for example, we need to specify a scope of .text.html.php.

Also, if Emmet is installed, it’s important to disable it. Otherwise, updates to the snippets.cson file will have no effect. I’m not completely sure why this is, but perhaps it’s because Emmet snippets override the snippets native to Atom.