snippetsAtom snippets package
Snippets package
Expand snippets matching the current prefix with tab in Atom.
To add your own snippets, select the Atom > Snippets... menu option if you're using macOS, or the File > Snippets... menu option if you're using Windows, or the Edit > Snippets... menu option if you are using Linux.
Snippet Format
Snippets files are stored in a package's snippets/
folder and also loaded from ~/.atom/snippets.cson
. They can be either .json
or .cson
file types.
'.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 ;
Optional parameters
These parameters are meant to provide extra information about your snippet to autocomplete-plus.
-
leftLabel
will add text to the left part of the autocomplete results box. -
leftLabelHTML
will overwrite what's inleftLabel
and allow you to use a bit of CSS such ascolor
. -
rightLabelHTML
. By default, in the right part of the results box you will see the name of the snippet. When usingrightLabelHTML
the name of the snippet will no longer be displayed, and you will be able to use a bit of CSS. -
description
will add text to a description box under the autocomplete results list. -
descriptionMoreURL
URL to the documentation of the snippet.
Example:
'.source.js':
'console.log':
'prefix': 'log'
'body': 'console.log(${1:"crash"});$2'
'description': 'Output data to the console'
'rightLabelHTML': '<span style="color:#ff0">JS</span>'
Determining the correct scope for a snippet
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 macOS) 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
.
Snippet syntax
This package supports a subset of the features of TextMate snippets, documented here.
The following features are not yet supported:
- Variables
- Interpolated shell code
- Conditional insertions in transformations
Multi-line Snippet Body
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
}
"""
Escaping Characters
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;
}
"""
Multiple snippets for the same scope
Snippets for the same scope must be placed within the same key. See this section of the Atom Flight Manual for more information.