修改 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

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

希望对大家有帮助。

相关推荐
Kiri霧7 小时前
IntelliJ IDEA
java·ide·kotlin·intellij-idea
晨风先生9 小时前
如何Visual Studio 的配置从 Qt-Debug 切换到 x64-Debug
ide·qt·visual studio
小马哥编程11 小时前
如何解决 undetected_chromedriver 启动慢问题
chrome·selenium·ui
要加油哦~12 小时前
工具 | 解决 VSCode 中的 Delete CR 问题
ide·vscode·编辑器
未来之窗软件服务15 小时前
基于 Nginx 与未来之窗防火墙构建下一代自建动态网络防护体系—仙盟创梦IDE
网络·ide·nginx·服务器安全·仙盟创梦ide·东方仙盟
yao0003717 小时前
Claude 4.0 终极编程指南:模型对比、API配置与IDE集成实战
ide·ai编程
我有一只肥螳螂17 小时前
idea监控本地堆栈
java·ide·intellij-idea
O败者食尘D17 小时前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome
界面开发小八哥1 天前
通用CI/CD软件平台TeamCity v2025.3全新发布——主要界面交互体验升级
ide·ci/cd·开发平台·teamcity
守城小轩1 天前
WebRTC指纹识别——未来展望(下篇)
chrome·webrtc·chrome devtools·指纹浏览器·浏览器开发