I recently migrated from Atom to VSCode, and while I managed to customize most of the editor to my liking, I'm still missing some Atom features that I liked.
One of them is that the "id" attribute in Atom used to be a specific color, something like #99FFFF. I've looked through themes but can't find one that makes the id attribute color different than other themes.
Another feature I like is that when creating a new HTML element, e.g. A div with the most commonly used basic attributes by default. I got the hang of using the emmet fragment, but it still doesn't work, probably because I don't know how to use it properly yet. It would be greatly appreciated if there was a cheat sheet for this, or at least some examples. Suppose I want to create an input element with type, name, id and placeholder attributes, how would I do this using the emmet fragment?
This is my settings.json
"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.4,
"editor.smoothScrolling": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"editor.background": "#232323",
"sideBar.background": "#272727",
"sideBar.foreground": "#C9C9C9",
"editor.foreground": "#C9C9C9",
"statusBar.background": "#272727",
"activityBar.background": "#232323",
"titleBar.activeBackground": "#232323",
},
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top" 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can change the color of the
idword or its attribute value using thetokenColorCustomizationsobject insettings.com:"editor.tokenColorCustomizations": { "textMateRules": [ { "scope": [ "meta.attribute.id.html entity.other.attribute-name" // the word id ], "settings": { "foreground": "#ff0000", // "fontStyle": "bold" } }, { "scope": [ "meta.attribute.id.html string.quoted.double.html" // the id's vaue ], "settings": { "foreground": "#ff0000", // "fontStyle": "bold" } } ] }See Editor syntax highlighting.