Web

How to Use Code Snippets in Atom

Craig Buckler
Share

Snippets are regularly-used chunks of code you can quickly insert into program files. They’re useful and a core feature of the Atom text editor. That said, you can use the editor for many months without realising snippets are available or appreciating their power!

Atom packages and language grammars are often supplied with pre-defined snippets. For example, start or open a new HTML file then type img and hit the Tab key. The following code appears:

<img src="" alt="" />

and the cursor will be between the src attribute quotes. Hit Tab again and the cursor will move to the alt attribute. Hit Tab a final time to move to the end of the tag.

Snippet trigger text is indicated with a green arrow as you start typing. You can view all defined snippets for your current file’s language type by placing the cursor anywhere and hitting Alt-Shift-S. Scroll or search through the list to locate and use a particular snippet.

Alternatively, open the Packages list in Settings and enter ‘language’ to view a list of all grammar types. Choose one and scroll to the Snippets section to view pre-defined triggers and code.

How to Create Your Own Snippets

You will have your own regularly-used code blocks which can be defined as snippets. A useful command I use when debugging Node.js applications is to log objects to the console as JSON strings:

console.log('%j', Object);

Atom already has a pre-defined log trigger for console.log(); but you can improve that with a custom snippet.

Custom snippets are defined in the snippets.cson file located in your ~/.atom folder. Select Open Your Snippets from the File menu to edit it. Snippets require the following information:

  1. the language identifier, or scope string
  2. a name which concisely describes the code
  3. the trigger text which fires the snippet once Tab is hit, and
  4. the snippet body code with optional tab stops.

Go to the end of snippets.cson and type snip followed by Tab — yes, there’s even a snippet to help you define snippets!…

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

Note that CSON is CoffeeScript Object Notation. It’s a terse syntax which maps directly to JSON; in essence, indentation is used rather than {} brackets.

First, you require the scope string which identifies the language where your snippet can be applied. The easiest way to determine the scope is to open the Packages list in Settings and enter ‘language’. Open the grammar package you require and look for the Scope definition near the top.

snippet scope definition

The snippet scope in snippets.cson must also have a period added to the start of that string. Popular web-language scopes include:

  • HTML: .text.html.basic
  • CSS: .source.css
  • SASS: .source.sass
  • JavaScript: .source.js
  • JSON: .source.json
  • PHP: .text.html.php
  • Java: .source.java
  • Ruby: .text.html.erb
  • Python: .source.python
  • plain text (including markdown): .text.plain

You can therefore define a JSON-logging snippet with:

'.source.js':
  'log JSON':
    'prefix': 'lj'
    'body': 'console.log(\'%j\', ${1:Object});$2'

The snippet becomes active as soon as your snippets.cson file is saved.

In this example:

  1. the scope is set to .source.js for JavaScript
  2. the snippet is named “log JSON“
  3. the Tab trigger (prefix) is set to lj
  4. the snippet body is set to console.log('%j', Object); (however, we’ve added some additional control codes, as shown next).

Single quotes within the body must be escaped with a preceding backslash (\').

Tab stops are defined using a dollar followed by a number, i.e. $1, $2, $3 etc. $1 is the first tab stop location where the cursor appears. When Tab is hit, the cursor moves to $2 and so on.

Tab stop $1 above has been defined with default text to remind or prompt the user: ${1:Object}. When the snippet is used, Object is selected within console.log('%j', Object); so it can be changed to an appropriate object name.

Additional snippets can be added to the bottom of the snippets.cson file. If you require two or more snippets for the same language, add them to the appropriate scope section. For example, you can create another JavaScript snippet in the '.source.js' scope to log the length of any array:

'.source.js':
  'log JSON':
    'prefix': 'lj'
    'body': 'console.log(\'%j\', ${1:Object});$2'
  'log array length':
    'prefix': 'llen'
    'body': 'console.log(\'${1:array} length\', ${1:array}.length);$2'

Notice this has two ${1:array} tab stops. When console.log('array length', array.length); appears, you’ll see two cursors and both instances of array are highlighted — you need only type the array name once and both change!

Multi-line Snippets

If you’re feeling more adventurous, longer multi-line snippets can be defined using three double-quotes """ at the start and end of the body code. This snippet generates a 2×2 table with a single header row:

'.text.html.basic':
  '2x2 table':
    'prefix': 'table2x2'
      'body': """
        <table summary="$1">
          <thead>
            <tr>
              <th>$2</th>
              <th>$3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>$4</td>
              <td>$5</td>
            </tr>
            <tr>
              <td>$6</td>
              <td>$7</td>
            </tr>
          </tbody>
        </table>
        $8
      """

The code indentation within the snippet body doesn’t have any impact on the CSON definition, but I suggest you keep it indented beyond the body definition to aid readability.

Happy snippetting!

If you’re new to Atom, you should also refer to 10 Essential Atom Add-ons for recommended packages.