How to change the sequence of attributes when creating a tag?

Question

When creating a tag, I need the attribute class to always be the first. If i create a tag like: a.link the result is this <a href="" class="link"></a> or img.header__img <img src="" alt="" class="header__img"> , how i can change sequence? Thanks.

Answer 1

Update , vscode is adding the ability to reverse attributes through an emmet setting, see https://github.com/microsoft/vscode/issues/110251 (Implement output.reverseAttributes for emmet snippets).

It is in the Insiders' Build v1.54. In your settings.json :

  "emmet.preferences": {
    "output.reverseAttributes": true
  }

Tested in Insider's Build and it is working as you wanted. Notes that in the img.header_img case the result is

<img class="header__img" src="" alt="">

so the class is first. I'm not sure that is technically reversed as the src is now the second attribute not the third. But I think you just wanted the class first and the it is fine if the src is second or third.

---

Previous answer:

I have a partial answer, maybe someone has something better. See custom emmet snippets in vscode .

Create a snippets.json file.

Use this setting to point to your snippets.json directory (not the file itself):

"emmet.extensionsPath": "C:\\Users\\Mark\\OneDrive\\Test Bed\\.vscode",

In a snippets.json file put something like this:

{
  "html": {
      "snippets": {
          "iq": "<img src='${1}' alt='${2}' class='${3}'>",
          "aq": "<a class='${1}' href='${2}'></a>"
      }
  },
  "css": {
      "snippets": {
          "cb": "color: blue",
          "bsd": "border: 1px solid ${1:red}",
          "ls": "list-style: ${1}"
      }
  }
}

You see that iq and aq will now trigger img and a tags with the attribute order you wish.

However, you cannot simply do a aq.someClass and have it populate the class attribute. It doesn't work. Perhaps someone knows how to make that work or to simply override the built-in emmet snippets.