Change behavior of autocomplete in HTML?


#1

When I type p and press Tab, it expands to:

<p>
    cursor is here
</p>

I want the behavior to be like this, without newlines:

<p>cursor is here</p>

I have Emmet installed and tried putting this in snippets.json, but it didn’t work:

{
    "html": {
        "abbreviations": {
            "p": "<p></p>"
        },
    }
}

Any ideas how to remove the newlines inside of the <p> element?


#2

The chapter on Snippets in the Atom Flight Manual has a great section on creating your own. It even shows you the snippet that makes it easy to fill in new snippets. Check it out:

http://flight-manual.atom.io/using-atom/sections/snippets/#creating-your-own-snippets

I’m not sure if Emmet tries to override Atom’s snippet support in HTML. If it does, then you may want to refer to Emmet’s documentation on the subject.


#3

Emmet does override Atom’s normal snippet behavior. You’re also supposed to be able to override Emmet’s snippets in snippets.json, but here’s the weird thing: I can’t find any mention of <p> tags in the master snippets.json. I presume that overriding things in Emmet, just like in Atom, requires an exact name match for the keys, so figuring out how to override the p behavior will involve finding where it is declared.


#4

I noticed that too. I added the snippet in my top posts to snippets.json, but it didn’t change the behavior. It’s just the letter p and a Tab. Is there some feature of Atom or Emmet that adds newlines after block level elements or something like that?

(I’ve checked the docs for both and haven’t found anything yet.)


#5

Thanks for the tip. I tried disabling Emmet, and the behavior was still there, so I added this to ~/.atom/snippets.cson and it works now:

'.text.html.basic':
  'paragraph':
    'prefix': 'p'
    'body': '<p>$1</p>'

I think that it should be fixed in Atom core. It’s adding new lines to source files where they aren’t necessary, and most people will just go with the defaults.

This is a waste of space, especially on HTML pages with many paragraphs:

<p>
    Some paragraph text.
</p>