How can i get inline abbreviation element suggestions like this

Question

I tried with emmet setting in 'json' but not getting suggestions

"emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "files.associations": {
    "*.js": "javascriptreact"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "jsx": {
      "inlineElements": ["input", "img", "id", "name"]
    }
  }

(https://i.stack.imgur.com/vAQBQ.png) and i need suggestion like this (https://i.stack.imgur.com/S7Jkk.png) need suggestions like above images

Answer 1

for the first image, these are called snippets, you can easily add them click ctrl + shift + p to open commands pallet, then type >Snippets: Configure User Snippets and enter, then you will have options to create snippets either for the current workspace or global ones

once you hit enter, the explanation on how to add a snippet will be a comment on the file

for the second image, these suggestions are shown by intillisense, watch this video for better understanding