Atom Editor: multiple snippets

Question

This is such a simple question but I can't find any documentation besides the readme.

How can I have multiple custom snippets in Atom Editior:

For example I have this in my snippets.cson right now

'.source.js':
  'Normal Comment Block':
    'prefix': 'cmm'
    'body': """
      //**********************************************************************************
      //
      //**********************************************************************************
    """

'.source.js':
  'Dashed Comment Block':
    'prefix': 'c--'
    'body': """
      //----------------------------------------------------------------------------------
      //
      //----------------------------------------------------------------------------------
    """

But cmm doesn't work, I can only use the last item in the snippets.cson. Any ideas on how to fix this? I have about a dozen different snippets I'd like to use but I cannot figure out how to include them properly.

You are overwriting your first snippet because you are declaring the same parent key `'.source.js':` in the array twice. If you remove the `'.source.js':` from the second one then it will work. You should only have one `'.source.language':` per set of language snippets. Other wise the duplicate parent keys will overwrite one another. — kiko carisse, Oct 05 '17 at 05:06

score 46 · Accepted Answer · answered Oct 29 '14 at 16:00

The configuration file format is called CSON, CoffeeScript Object Notation. Like JSON (JavaScript Object Notation) it is a text format for describing simple objects. Because of which, when you specify a key twice, like .source.js in your example, the second instance overwrites the first. If you simply have one .source.js everything will work fine:

'.source.js':
  'Normal Comment Block':
    'prefix': 'cmm'
    'body': """
      //**********************************************************************************
      // $1
      //**********************************************************************************
      $0
    """
  'Dashed Comment Block':
    'prefix': 'c--'
    'body': """
      //----------------------------------------------------------------------------------
      // $1
      //----------------------------------------------------------------------------------
      $0
    """

Additionally, I took the liberty of adding tab stops to your snippets so that when you expand the snippet, your cursor should land first inside the comment. You can enter your comment and then press TAB to exit out and continue on.

score 11 · Answer 2 · answered Feb 25 '15 at 12:40

In addition to @Lee's explanation, here's an example if you wan't to setup multiple snippets organized by programming language:

# HTML Snippets
'.text.html':
  'HTML Comment':
    'prefix': '<!'
    'body': '<!-- $1 -->'

# Sass Snippets
'.source.scss':
  'Section Comment':
    'prefix': 'sc'
    'body': """
      /*=================================================
      $1
      =================================================== */
    """
  'Sub Section Comment':
    'prefix': 'ssc'
    'body': """
      /* $1
      =================================================== */
     """

# JavaScript Snippets
'.source.js':
  'jQuery - Bind Event':
    'prefix': 'bind'
    'body': """
       $( $1 ).on( '$2', '$3', function( $4 ) {
         $5
       });
    """

On this example I included HTML, Sass and Javascript but you could include others like CSS, ...

Hope this was usefull.

score 5 · Answer 3 · answered Mar 07 '17 at 00:08

Found a weird bug with multiple snippets in Atom. I'm hoping this answer can help someone with the same problem (I am using the mac version of Atom). So I went to add a new snippet to the snippets.cson file and I copied the old snippet and pasted it below as a template like this and saved them, even though they were the same still '.source.php': 'Debug': 'prefix': 'prepr' 'body': """ echo "<pre>",print_r($_POST, 1),"</pre>"; die(); """ 'Debug': 'prefix': 'prepr' 'body': """ echo "<pre>",print_r($_POST, 1),"</pre>"; die(); """ After saving this I edited the second one to have a different title and prefix and body code '.source.php': 'Debug': 'prefix': 'prepr' 'body': """ echo "<pre>",print_r($_POST, 1),"</pre>"; die(); """ 'different': 'prefix': 'different' 'body': """ echo "different"; """ I saved again after having edited the second snippet. This time the tab expand for the second snippet wouldn't work, however the first one still did work. After much fooling around with it making sure I had the right syntax I tried a hunch that maybe because I saved with two duplicate snippets that it messed with the cson output somehow. I then deleted the second snippet, then saved it with only the first one in there, then duplicated the first one, then changed it, THEN saved it. After all that both snippets were working normally.

I have been using multiple snippets for a while and never really ran into this problem until now. So strange but there it is.

Ridiculous bug, same thing happened to me. Freaking hour of searching trying to get a snippet to work. Thanks for posting this. — Doug Watkins, May 04 '18 at 20:19

score 0 · Answer 4 · edited Jul 11 '16 at 14:26

Starting the next snippet with a comma followed with new line by giving same structure as of the first one worked for me.

'.source.php':
'var dump':
'prefix': 'vd'
'body': """
    echo "<pre>";
    var_dump($);
    echo "</pre>";
""",

'this->db':
'prefix': 'trans'
'body': """
    $this->db->trans_start();
""",

'comment block':
'prefix': 'cm'
'body': """
    /****************************************
    *
    *
    ****************************************/
"""

score 0 · Answer 5 · answered Nov 09 '17 at 09:54

I had the same problem, here is the fix:

'.source.js':
  'First function':
    'prefix': 'first'
    'body': """
    function $1() {
      var overall = true;
      if (overall)
      {
        var result = {};
        result.test1 = "";
        return test2(result);
      }
      return catched("");
    } """,

  'Next function':
    'prefix': 'next'
    'body': """
    function $1(result) {
      var overall = true;
      if (overall)
      {
        result.test1 = "";
        return test2(result);
      }
      return catched("");
    } """,

  'Next next function':
    'prefix': 'pz'
    'body': """
    function $1(result) {
      var overall = true;
      if (overall)
      {
        result.test1 = "";
        return test2(result);
      }
      return catched("");
    } """

Please note that you have to do a couple of things:

Add comma (,) after each """.
Start the next define in the same start line of the prev define! I really did not understand why it works like that.. but.. that is the case.
Use '.source.PROGRAM LANGUAGE': only once per language.

Home it helps :)

fktmjohn1 · Answer 6 · 2020-10-15T03:46:13.413

With proper indentation your snippets will work just fine. No need for extra comma

Since the file is in cson format similar to json file. You can write your snippets like below. Where

Each scope (e.g. '.source.js' below) can only be declared once.
Second line is for title.
third line is for keyboard shortcuts.
Fourth line is the actual code to be written inside quotes.

'.source.js':
  'Console log':
    'prefix': 'cl'
    'body': 'console.log($1)'

  'log error':
    'prefix': 'cle'
    'body': 'console.log(err)$1'

  'log data':
    'prefix': 'cld'
    'body': 'console.log(data)$1'

Atom Editor: multiple snippets

6 Answers6

Linked