Autocomplete within HTML


#1

Hi,

I’m pretty new to atom, have been working with eclipse’ HTML/XML/XSL tools.
I’ve been coming across an issue with Atom’s autocomplete that I’m not sure is a bug or my ignorance of this tool.

Basically, autocomplete can’t create a tag within a tag:

So, which is it - Atom or me?

Thanks for the help!


#2

This is a slightly complicated answer, but it’s not entirely the autocomplete feature at fault. If you look at the input, you’ll see that the entries in the popup have very different icons. The green arrow indicates that the suggested entry is a snippet. Specifically, it’s this snippet, and you see it because the core package autocomplete-snippets adds snippets to the suggestions. However, the snippets feature isn’t very smart, so the second part of that document nullifies all of the tag snippets when the cursor is inside a tag. This keeps you from accidentally getting something like <a <title></title>></a>. If you try adding two spaces or a new line in between the tags so that they aren’t touching the cursor, you will find that the snippet works again. You can see why this is if you open the Command Palette (ctrl-p) and use the command “Editor: Log Cursor Scope” (you can get there fastest by typing “sco” into the search bar). You should see something like this:

Since the cursor is adjacent to the tag’s bracket, Atom can’t tell that it’s not inside the tag. I don’t know if this is a limitation of how Atom was designed, or if it can be fixed.

What autocomplete packages do you have installed? Do you use emmet?


#3

Thanks for your answer!

So Atom is trying to save me from myself, that’s nice.

The only autocomplete package I have is less-than-slash, which I found through this forum looking for posts similar to my issue.
I’ll look into what snippets are here more now, I’m pretty new to code (I heard of Atom from a udemy course I’m taking).


#4

You should look into emmet. It has its own way of inserting tags that doesn’t interact with Atom’s snippet or autocomplete functionality, and the developers maintain sister packages for several other editors (so if you learn the syntax, that’s a transferable skill). You use it by typing an abbreviation, which can conclude quite a lot of information. You can make a single tag, or a bunch of them at once. For example, this would expand to match the structure you’re currently using for your list:

ul>(li>input)*2+(li>a)*2

What’s more, you can use tab to jump through the most obvious areas where you would want to add or change text in the tags you’ve just inserted.


#5

I’ll check it out,

Thanks again!