emmetio/py-emmet

Change placement of id and class attributes in expanded output

Closed this issue · 1 comments

IAmAdamTaylor commented

Is it possible to change where the id and class attributes are placed in expanded tags output?

For example, in the default output, the class and id attributes are always placed at the end and in the order provided.

a.hello#world => <a href="" class="hello" id="world"></a>
a#world.hello => <a href="" id="world" class="hello"></a>

Would it be possible to change this default behaviour so that class is always first, id is always second and any other attributes follow those?

Desired output:

a.hello#world => <a class="hello" id="world" href=""></a>
a#world.hello => <a class="hello" id="world" href=""></a>

I've taken a look over the Emmet.sublime-settings file and the config options and none of those seem relevant.

I can get similar results by using the config snippet below, however, this always adds the attributes even if not present in the abbreviation. It also requires me to add multiple tags to the config if I want to do this for others.

{
    "config": {
        "html": {
            "snippets": {
                "a": "a[class id href]",
               // "other tags here..."
            }
        },
    },
}

// with this config set...
a             => <a class="" id="" href=""></a>
a.hello#world => <a class="hello" id="world" href=""></a>
a#world.hello => <a class="hello" id="world" href=""></a>
sergeche commented

You should mark attributes as implied, e.g. they are outputted only if value provided. Implied attributes are prefixed with !. So, in your case it should be "a": "a[!class !id href]".

Implied attributes are specifically designed for your case, if you want to specify the order of attributes for element

  • 👍1