{ Thu, 20. Mar 2014 }

Inserting Blank Lines between HTML Tags in Atom

I’ve done this exact thing before for Emacs. This is basically a copy and paste of that post, with updated code.

I code HTML in Atom, and Emmet makes it a breeze. Although, there was one thing that bugged me. When I expand div, Emmet gives me

1
<div>|</div>

with the cursor stuck right there in the middle. I (and I think I’m not alone with that) would prefer

1
2
3
<div>
    |
</div>

Getting from the one thing to the other is a mess of inserting newlines and moving the point, and indenting.

Don’t Fear, atom is here!

Until now. This being Atom, there’s a way around this. With the following snippet in my config, everything gets expanded and indented properly when I hit RET between an opening and closing tag.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
atom.workspaceView.eachEditorView (editorView) ->
  editor = editorView.getEditor()
  _.adviseBefore editor, "insertNewline", ((_this) ->
    (text) ->
      cursorBufferPosition = undefined
      previousCharacter = undefined
      nextCharacter = undefined
      return true  if editor.hasMultipleCursors()
      return  unless editor.getSelection().isEmpty()
      cursorBufferPosition = editor.getCursorBufferPosition()
      previousCharacter = editor.getTextInBufferRange([
        cursorBufferPosition.add([ 0, -1 ])
        cursorBufferPosition
      ])
      nextCharacter = editor.getTextInBufferRange([
        cursorBufferPosition
        cursorBufferPosition.add([ 0, 1 ])
      ])
      if previousCharacter is ">" and nextCharacter is "<"
        editor.transact ->
          cursorRow = undefined
          editor.insertText "\n\n"
          editor.moveCursorUp()
          cursorRow = editor.getCursorBufferPosition().row
          editor.autoIndentBufferRows cursorRow, cursorRow + 1

        false
  )(this)

This snippet mostly a copy of the code found in the bracket-matcher package, translated to coffeescript.