如何自定义VSCode id属性?

Question

我最近从Atom搬到了VSCode，虽然我设法根据自己的喜好定制了大部分编辑器，但我仍然缺少Atom所拥有的一些我喜欢的功能。

其中之一就是"id"属性过去是一个特定的颜色，类似于#99FFFF。我已经浏览了主题，但我无法找到一个使id属性颜色不同的主题。

另一个我喜欢的特性是当一个新的HTML元素被创建时，例如:一个div，它带有最常用的，默认的基本属性。我掌握了使用emmet片段的窍门，但它仍然不能正常工作，可能是因为我不知道如何正确使用它。如果有一个小抄表，这将是非常感激，或至少几个例子。假设我想创建一个具有类型、名称、id和占位符属性的输入元素，那么如何使用emmet片段来实现呢?

这是我的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"

Answer 1

您可以使用settings.com中的tokenColorCustomizations对象更改单词id的颜色或其属性值:

"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"
}
}
]
}

参见编辑器语法高亮显示。