You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在VSCode中设置自动高亮选中代码块的背景色?

如何在VSCode中为光标所在的代码块添加背景色高亮

作为视觉型用户,我完全理解你想要明确当前代码块范围的需求!VSCode其实有内置功能和扩展两种方式来实现这个效果,下面一步步教你:

方法1:使用VSCode内置的括号配对背景高亮

VSCode自带的括号颜色化功能可以设置代码块的背景高亮,不需要额外装扩展:

  • 打开设置面板:按下Ctrl+,(Windows/Linux)或Cmd+,(Mac),或者通过菜单栏文件 > 首选项 > 设置打开。
  • 在搜索框输入workbench.colorCustomizations,找到后点击编辑 in settings.json选项,打开自定义颜色配置文件。
  • 在settings.json中添加以下配置(可以根据自己的喜好调整颜色值,末尾的两位是透明度,比如20表示20%不透明度):
"workbench.colorCustomizations": {
  // 第一层代码块的背景高亮
  "editorBracketHighlight.background1": "#f59e0b20",
  // 第二层嵌套代码块的背景高亮
  "editorBracketHighlight.background2": "#10b98120",
  // 第三层嵌套代码块的背景高亮
  "editorBracketHighlight.background3": "#3b82f620",
  // 最多支持6层嵌套,可继续添加background4到background6
},
// 确保括号颜色化功能开启(默认已开启)
"editor.bracketPairColorization.enabled": true
  • 保存settings.json后,当你把光标放在代码块的起始/结束括号(比如{}()[])上时,对应的整个代码块就会显示你设置的背景色高亮了。

方法2:使用扩展增强效果(针对缩进式代码块,如Python)

如果你写的是Python这种靠缩进区分代码块的语言,内置的括号高亮可能不适用,这时可以试试Indentation Level Highlighter扩展:

  • 在VSCode的扩展商店搜索Indentation Level Highlighter并安装。
  • 安装完成后,它会自动根据光标所在的缩进层级,为整个代码块添加背景高亮。你也可以通过扩展的设置面板调整高亮的颜色、透明度等参数,适配你的视觉习惯。

另外,还有一个扩展叫Bracket Lens,它不仅能高亮代码块背景,还会显示代码块的范围提示,也很适合视觉型用户,可以试试!

内容的提问来源于stack exchange,提问作者vdegenne

火山引擎 最新活动