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!'
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
$2. With these special characters, we can tell Atom where to insert the cursor with every subsequent press of the
$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.