Snippet CSON Help


So, I have the default (part of a) snippet down here:
'body': 'getElementsById(${1:\'${2:id}\'})$3'

Currently, it makes getElementsById('id') and selects "id".
I want it to make getElementsById("id"), with only id selected.

Is it correct to change the snippet to the following?
'body': 'getElementsById(\"${1:${2:id}}\")$3'

I think it works, but I wanted a confirmation, and also; Would someone please elaborate to me what everything, character by character, here does/means? Can’t seem to find some good documentation on it.


Works for me!

For reference, this is the full snippet I used:

    'prefix': 'getElementsById'
    'body': 'getElementsById(\"${1:${2:id}}\")$3'


Seems to work, but I wanted a confirmation since I had close to no idea what I was doing.

Syntax is a bit unclear though


Consider this snippet:

    'prefix': 'foo'
    'body': 'fooBar(\"${1:id}\")$2'
  1. The first line is the scope in which the snippet can be triggered, in this case all JavaScript files
  2. The second line is not functional, but purely descriptive. Use whatever helps you to understanding what the snippet does. In the example, it should be clear the snippet completes the function fooBar()
  3. The prefix will trigger the snippet. Typing foo will let you complete to fooBar
  4. The body is the extracted snippet. The example contains two tab-stops, the first contains a default text (“id”). If there’s no default text, the curly braces can be ommitted.

When distributing snippets as an Atom package, I personally prefer using full-name prefixes rather than made-up abbreviations. Two reasons:

  1. Forcing a naming convention that differs from the original (e.g. a framework), adds to the learning curve. Don’t assume that a system that works for you alone, works equally well for somebody else.

  2. Atom already has a fuzzy mode for completions, full name prefixes allow a more flexible use

That said, my example above used a foo as prefix rather than fooBar to help you understand the different parts of the snippet.

Also take note that I simplified your original syntax. The first two tab-stops were identical, so I removed one.


Thanks got the help, but what I meant was what the different characters inside the body does;

I’ve got to know it a little better noe. This is correct, right?
\ = Don’t treat next xharacter as code
1 = Cursor {1:text} = Selected text
The # number also lets you choose what comes after pressing tab.


I said it before – $1, $2 and $3 are tab-stops. Once you inserted your snippet, you can use Tab to jump between these stops. It might not be obvious for the first case, since the cursor won’t move between $1 and $2. They are identical, hence I removed on instance in my snippet above.

If a tab-stops contains default text, it will be selected once active.

The unedited snippet would behave like this:

  1. trigger snippet, inserts getElementsById("id}"), with id being selected so you can edit it quickly
  2. pressing Tab will jump to the second tab-stop. Since it’s identical to the first, there is no visual hint indicating the difference.
  3. pressing Tab again will jump to the end of the function

My edited snippet behaves the same, without the second step.


Sorry for late reply. I just wanted to understand the syntax of the stuff inside body: '', which you helped me understand, so thank you :slight_smile: