Expand snippets matching the current prefix with tab
in Atom.
To add your own snippets, select the Atom > Open Your Snippets menu option if you're using OS X, or the File > Open Your Snippets menu option if you're using Windows, or the Edit > Open Your Snippets menu option if you are using Linux.
Snippets files are stored in a package's snippets/
folder and also loaded
from ~/.atom/snippets.cson
.
Snippet files can be either .json
or .cson
.
'.source.js':
'console.log':
'prefix': 'log'
'body': 'console.log(${1:"crash"});$2'
The outermost keys are the selectors where these snippets should be active, prefixed with a period (.
) (details below).
The next level of keys are the snippet names.
Under each snippet name is a prefix
that should trigger the snippet and a
body
to insert when the snippet is triggered.
$
followed by a number are the tabs stops which can be cycled between by
pressing tab
once a snippet has been triggered.
The above example adds a log
snippet to JavaScript files that would expand
to.
console.log("crash");
The string "crash"
would be initially selected and pressing tab again would
place the cursor after the ;
The outmost key of a snippet is the "scope" that you want the descendent snippets
to be available in. The key should be prefixed with a period (text.html.basic
=> .text.html.basic
). You can find out the correct scope by opening the Settings (cmd+, on OS X)
and selecting the corresponding Language [xxx] package, e.g. for Language Html:
If it's difficult to determine the package handling the file type in question
(for example, for .md
-documents), you can also proceed as following. Put your
cursor in a file in which you want the snippet to be available, open the
Command Palette
(cmd+shift+p), and run the Editor: Log Cursor Scope
command. This
will trigger a notification which will contain a list of scopes. The first
scope that's listed is the scope for that language. Here are some examples:
source.coffee
, text.plain
, text.html.basic
.
You can also use multi-line syntax using """
for larger templates:
'.source.js':
'if, else if, else':
'prefix': 'ieie'
'body': """
if (${1:true}) {
$2
} else if (${3:false}) {
$4
} else {
$5
}
"""
Including a literal closing brace inside the text provided by a snippet's tab stop will close that tab stop early. To prevent that, escape the brace with two backslashes, like so:
'.source.js':
'function':
'prefix': 'funct'
'body': """
${1:function () {
statements;
\\}
this line is also included in the snippet tab;
}
"""
Snippets for the same scope must be placed within the same key. See this section of the Atom Flight Manual for more information.