本文介绍了VScode：如何更改HTML开始和结束标记的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在VScode中更改HTML开始/结束标记的颜色以匹配下图？我已经尝试使用Highlight Matching Tag扩展名和以下设置，但这只在选择(OnFocus)标记时有效。我希望开始标记的实际字体颜色与所有结束标记不同。谢谢！
"highlight-matching-tag.styles": {
"opening": {
"name": {
"custom": {
"color": "#007fff",
}
}
},
"closing": {
"name": {
"custom": {
"color": "#F02931"
}
}
}
},
推荐答案
您可以通过自定义当前使用的VS代码主题(请参见最后一个图像上的最终结果)来完成此操作。
自定义主题
在VSCode中，按Ctrl+Shift+P打开命令调色板，然后键入/选择Preferences: Open Settings (JSON)。
这将打开编辑器设置.json文件。
设置/添加编辑器令牌颜色自定义的新规则。
将以下代码段添加到settings.json将更改JSX中主题Dark(Visual Studio)的结束标记(名称)的颜色。
TL；DR
将以下代码段粘贴到编辑器设置JSON，以启用特定主题的颜色>规则。
settings.json
"editor.tokenColorCustomizations": {
"[Visual Studio Dark]": { // Name of the theme that we want to customize, same as the value from "workbench.colorTheme"
"textMateRules": [ // TextMate grammars tokenization settings
{
"name": "Opening JSX tags",
"scope": [
"entity.name.tag.open.jsx", // HTML opening tags (in JSX)
"support.class.component.open.jsx", // JSX Component opening tags
],
"settings": {
"foreground": "#007fff",
}
},
{
"name": "Closing JSX tags",
"scope": [
"entity.name.tag.close.jsx", // HTML closing tags (in JSX)
"support.class.component.close.jsx", // JSX Component closing tags
],
"settings": {
"foreground": "#F02931",
}
},
]
}
}
设置其他作用域：
此外，您还可以检查特定的标记(例如标记)，以查看要设置样式的作用域的名称。
在命令调色板Ctrl+Shift+P中，打开Developer: Inspect Editor Tokens and Scopes以查看部件(开始标记、结束标记等)的TextMate作用域名称您要修改的。
要获得更高级的匹配并超越JSX，您可能需要参考TextMate grammars
这篇关于VScode：如何更改HTML开始和结束标记的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！