I've recently moved from Atom to VSCode, while I managed to customise most of the editor according to my likings, I am still missing a few features that Atom had that I enjoyed.
One of those things is that the "id" attribute in Atom used to be a specific colour, something similar to #99FFFF. I've looked through themes but I couldn't manage to find one that makes the id attribute colour different then the rest of them.
Another feature that I enjoyed was the fact that when a new HTML element was created, eg. a div, it came with the most used, basic attributes by default. I got the hang of using the emmet snippets but it still doesn't work the same, probably because I don't know exactly how to use it properly yet. If there is a cheat sheet for this it would be greatly appreciated, or at least a few examples. Let's say I want to create an input element with a type, name, id and placeholder attribute, how would I go about to do that with emmet snippets?
Here 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"
CodePudding user response：
You can change the color of the word id or its attribute value using the tokenColorCustomizations object in your settings.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"
}
}
]
}