VScode:如何更改 HTML 打开和关闭标签的颜色
Posted
技术标签:
【中文标题】VScode:如何更改 HTML 打开和关闭标签的颜色【英文标题】:VScode: how-to change the color of HTML open and closing tag 【发布时间】:2020-05-02 19:47:49 【问题描述】:如何更改 VScode 中 html 打开/关闭标签的颜色以匹配下图?我曾尝试使用Highlight Matching Tag
扩展名和以下设置,但这仅适用于选择(onFocus)标签。我希望打开标签的实际字体颜色与所有结束标签不同。谢谢!
"highlight-matching-tag.styles":
"opening":
"name":
"custom":
"color": "#007fff",
,
"closing":
"name":
"custom":
"color": "#F02931"
,
【问题讨论】:
在 react jsx 文件中? 是的,或者只是 HTML 【参考方案1】:您可以通过自定义当前使用的 VS Code 主题来做到这一点(请参阅最后一张图片上的最终结果)。
自定义主题
在 VSCode 中,按 Ctrl
+ Shift
+ P
打开命令面板,然后键入/选择 Preferences: Open Settings (JSON)
。
这将打开编辑器设置.json
文件。
为编辑器标记颜色自定义设置/添加新规则。
将以下 sn-p 添加到 settings.json
将更改 JSX 中结束标记(名称)的颜色,用于主题 Dark (Visual Studio)。
TL;DR
将下面的 sn-p 粘贴到您的编辑器设置 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 打开和关闭标签的颜色的主要内容,如果未能解决你的问题,请参考以下文章
解决VScode按“感叹号+Tab”和直接按感叹号无法自动生成HTML模板的问题