修改 vscode 左侧导航栏的文字大小 (更新版)

新增, 个人常用

  • 按 Ctrl + Shift + P 打开命令面板

  • 输入并选择 :

  • Developer: Toggle Developer Tools

  • 打开开发者工具。

1. 起因, 目的:

  • 问题: vscode 左侧的文字太小了!!!
  • 我最火的一篇文章,写的就是这个问题。 看来这个问题,是很广泛的一个痛点。
  • 我最近更新了 vscode, 这个问题又出现了。再来搞一下。
  • 编程工具很关键的。个人的工具,美观,实用,提升效率, 防止火爆脾气

2. 先看效果

此时能实现,左侧和右边的文字一样大。

3. 过程:

3.1 vscode 修改左侧导航栏的文字大小

个性化设置

  1. 安装 "Custom CSS and JS" 扩展(如果尚未安装)。

  2. ctrl + shift + p,运行:

    Enable Custom CSS and JS

    启用自定义样式, 这一步,很关键!后面修改之后 css 之后,也是再来一遍。

  3. ctrl + shift + p, 输入 settings.json

  4. 找到自定义的 css 文件, 没有的话,就新建一个

    json 复制代码
      "vscode_custom_css.imports": [
        "file:///C:/Users/Administrator/custom-vscode.css"
      ],
  5. 这个 css 写上:

    css 复制代码
    /* 调整左侧导航栏(Explorer)的字体大小 */
    
    /* 原来的写法 */
    /* 聊天记录: https://x.com/i/grok?conversation=1928671798994022793   */
    
    /* vscode 更新之后,新的的写法 */
    
    /* 调整左侧导航栏(资源管理器)中文件和文件夹名称的字体大小 */
    .monaco-workbench .part.sidebar .monaco-list .monaco-list-row .monaco-highlighted-label {
        font-size: 21px !important;
    }
  6. 最后,还是这个, ctrl + shift + p,运行:

    Enable Custom CSS and JS

    启用自定义样式, 这一步,很关键!后面修改之后 css 之后,也是再来一遍。

  7. 成功之后, 会出现一个警告。 请点击: 下次不要再弹出来了。

4. 结论 + todo

  • 如果无法实现,请从头到尾再试一遍。
  • 过程虽然有点麻烦,但是是值得的。

希望对大家有帮助。

相关推荐
ncj39343790643 分钟前
vscode中对node项目进行断点调试
vscode·node.js
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊3 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
古月居GYH7 小时前
【数据分析】如何在PyCharm中高效配置和使用SQL
ide·sql·pycharm
死也不注释10 小时前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
lyj16899710 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
shimly12345612 小时前
bash 脚本比较 100 个程序运行时间,精确到毫秒,脚本
开发语言·chrome·bash
这是个栗子13 小时前
【问题解决】VSCode终端中看不到Git-Bash
ide·git·vscode
秃了也弱了。15 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome