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.

Answer 1

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.

Answer 2

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': """
    /****************************************
    *
    *
    ****************************************/
"""

Answer 3

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.

Answer 4

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.

Answer 5

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:

1. Add comma (,) after each """.
2. 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.
3. Use '.source.PROGRAM LANGUAGE': only once per language.

Home it helps :)