Atom snippets


#1

How do you create snippets for Atom? I would really like to learn how because snippets are really useful if you write the same thing a lot.


#2

shame on you for not reading the manual :stuck_out_tongue:
http://flight-manual.atom.io/using-atom/sections/snippets/

Steven, you can also trigger FILE > SNIPPETS. The notes in the file already gives ideas that is helpful. You were looking for user applied customization - right?


#3

Here is mine for you to chew on…

# PYTHON -----------------------------------------------------------------------
'.source.python':
  'Else-If Condition':
    'prefix':'elif'
    'body': 'if ${1:True}:  # DOC1\n\t${2:pass}\nelif ${3:True}:  # DOC2\n\t${4:pass}\nelse:  # DOC3\n\t${5:pass}\n'

# COFFEESCRIPT------------------------------------------------------------------
'.source.coffee':
  'Atom extension - Add function':
    'prefix':'axf'  # Atom eXtension Function
    'body': """
    ###
    ${1:Title of function}
    ###
    ${2:functionName}: () ->
      return false unless _editor = atom.workspace.getActiveTextEditor()
      _checkpoint = _editor.createCheckpoint()  # mark start position for 'undo'
      _origin = _editor.getCursorScreenPosition()  # position of cursor
      _selectRange = _editor.getSelectedBufferRange()  # range of selected text: [[start.row, start.column],[end.row, end.column]]

      ## >>>>>>  Place code here

      _editor.groupChangesSinceCheckpoint(_checkpoint)  # mark end position for 'undo'
      """
      
  'Atom extension - Add command':
    'prefix':'axc'  # Atom eXtension Command
    'body': """
    
    # ****************************************************
    # ${1:Function of command}
    # ****************************************************
    atom.commands.add 'atom-text-editor', 'custom:${2:functionName}', (e) ->
      e.abortKeyBinding() unless custom.${2:functionName}()
      
    """

# MARKDOWN : GITHUB VERSION ----------------------------------------------------
'.text.md':
  'Template tp ask a question':
    'prefix':'/q'
    'body': """
    <sup>_Tags: Atom, ${1:more} _</sup></p>
    Hello Atom Community,
    
    ${2:BODY}

    Best regards,
    """
    
  'Insert a speach bubble':
    'prefix':'/say'
    'body': ':smile: <sup>\{${1:speak}\}</sup>'
    
  'Exit signature':
    'prefix':'/bye'
    'body': 'Best regards,

#4

:astonished: I should be shamed! That is so obvious! Thank you so mush for point that out!


#5

Mine is pretty lightweight. I tend to make snippets for specific projects and then dissolve them after.

'*':
  'Equals Plus':
    prefix: '=+'
    body: ' = $1 + $2'
  'Equals Minus':
    prefix: '=-'
    body: ' = $1 - $2'
'.text.html':
  'Form':
    prefix: 'form'
    body: """
      <form class="$1" action="index.html" method="post">
        $2
      </form>
    """
  'Selection':
    prefix: 'select'
    body: """
      <select class="$1" name="$2">
        <option value="$3">$4</option>
        <option value="$5">$6</option>
        <option value="$7">$8</option>
      </form>
    """
  'Option':
    prefix: 'option'
    body: '<option value="$1">$2</option>'
  'Unordered List':
    prefix: 'ul'
    body: """
      <ul class="$1" name="$2">
        <li>$3</li>
        <li>$4</li>
        <li>$5</li>
      </ul>
    """
  'Ordered List':
    prefix: 'ol'
    body: """
      <ol class="$1" name="$2">
        <li>$3</li>
        <li>$4</li>
        <li>$5</li>
      </ol>
    """
  'List Item':
    prefix: 'li'
    body: '<li>$1</li>'
'.source.coffee':
  'Snippet':
    prefix: 'snip'
    body: '''
      '${1:scope}':
        '${2:name}':
          prefix: '$3'
          body: '$4'
      '''

#6

:slightly_smiling_face:…{ not trying to step on your toes. }
{ you can help yourself now - right? }… :wink:


That makes good sense. Thanks for sharing!

Could you tell me more about (?)emmit.
Am I to understand there is a scripting language that you can type to help you type?
Is it possible to write something like if*3.1 with TAB and the system will print out an if-structure with a main if + 3 else-if + an else?

Cheers.


#7

Emmet is like the snippets feature, but also unlike it. With Emmet, you write markup as short-hand abbreviations and then press tab to expand to the full code.

Am I to understand there is a scripting language that you can type to help you type?

Yep.

Is it possible to write something like if*3.1 with TAB and the system will print out an if-structure with a main if + 3 else-if + an else?

I think Emmet only does HTML, but there could certainly be something like it for particular languages.


#8

…or rather aimed for web development in general.
The emmet.io seems to be a good place to visit if one would want to develop something for other languages.