Sublime Forum

Overriding autocomplete

#1

Currently if I have an html document open and I type img and then press tab I get:

<img src="${1}" alt="${2}">

I would like to modify things so that instead of that, I get:

<img src="${1}" loading="lazy" width="${2}" height="${3}" alt="${4}">

Can someone tell me what I’d need to do to modify the default behavior as desired?

0 Likes
#2

Do you have any third party packages installed that might be contributing this completion? Standard Sublime only seems to have a completion on the img tag that includes src attribute but nothing else.

0 Likes
#3

I have Emmet installed but I don’t think it’s changing that.

So you mean you only get this?

<img src="${1}">
0 Likes
#4

Indeed I only get that shorter completion for the img tag. You could verify if Emmet is doing this by temporarily adding it to the ignored_packges setting.

The img completion in core Sublime comes from a plugin in the HTML package; you might check your Packages folder (Preferences > Browse Packages) to see if there’s an HTML folder in there. If there is, you may have created an override on the existing plugin to change how it expands.

Apart from that, have you perhaps added your own sublime-snippet in your User package?

0 Likes
#5

You could verify if Emmet is doing this by temporarily adding it to the ignored_packges setting.

Strangely when I add this to my preferences file, Emmet still loads/works. Hmm.

"ignored_packges": [
	"Emmet"
]

you might check your Packages folder ( Preferences > Browse Packages ) to see if there’s an HTML folder in there.

There isn’t. Although in Packages/User I have a HTML.sublime-settings file that contains only

{
	"extensions":
	[
		"kit"
	]
}

I noticed that Emmet doesn’t appear in Packages/ but I do see it in Installed Packages/ (In case that explains anything about why my attempt to ignore it didn’t work.)

0 Likes
#6

Update: I got Emmet disabled successfully and confirmed it is indeed modifying the default behavior and adding the alt="${2}".

Back to square one though.

0 Likes
#7

That’s just an HTML specific setting telling Sublime that it should open kit files using this syntax, so that’s normal.

Generally speaking packages can be installed either as sublime-package files (just a zip file with the extension changed) or as unpacked files. The sublime-package variant is preferred because it allows for modifications of package content in a safe way, so you generally see packages installed that way.

You can set this up by using Preferences > Package Settings > Emmet > Settings - User and then adding the following content (or, if you already have some settings, just include the complete snippets setting and not the outer { and } characters):

{
    "snippets": {
        "html": {
         "abbreviations": {
            "img": "<img src='${1}' loading='lazy' width='${2}' height='${3}' alt='${4}'>"
         }
        }
    },    
}

You can use this method to add in new snippets on a per-syntax basis and also override existing snippets with content of your own (which is what’s happening here).

In theory you could also create a snippets.json file in the directory specified in the extensions_path (which defaults to ~/emmet) to do the same thing, but I was unable to get it to actually recognize that the file contained any content even though it noticed it, so the setting is probably the easier way to go.

1 Like
#8

I just found that exact same solution on my own but thank you very much for your help!

1 Like
#9

If anyone coming across this thread in the future is looking for some inspiration. Check out this Git repo I created today for keeping track of my own Emmet abbreviations.

0 Likes
#10

Odat had a typo. It should be ignored_packages.

1 Like