Atom Editor: multiple snippets

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.


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.


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.