IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 拒绝VSCode菜单列表的圆角! -> 正文阅读

[开发工具]拒绝VSCode菜单列表的圆角!

1. 起因

背景:今天更新了VSCode之后,我发现所有的菜单列表都变成了圆角,和原始的UI设计显得非常格格不入。尤其是我还在用Win10,可能Win11用户还能接受一些, 反正我觉得不能忍受。

如图,UI里又圆又方一点都不和谐

排查:通过开发人员工具,看到菜单列表的元素的css类是.monaco-scrollable-element,然后通过github的"仓库内代码查找",在vscode源码里发现了关键文件menu.ts,然后发现了关键的行第290行

然后通过git blame查找引入这行修改的提交,发现了是第149187号pull request在2022年5月份引入的修改,该修改在1个月的内测结束后,正常流入到Stable Build版本的VSCode更新中,影响到了我……该pr的最初目的是修改menu的颜色以和背景做出区分,但是最后却顺手修改了样式加入了圆角……

必要性:已经有人提出了关于“圆角开关设置”的feature request,但是开发者以不想同时维护2份css为由拒绝了这个提议(实际上可能是实现起来太麻烦?),只在pr#151250里改进了title bar的点击……

而且这个样式是写死在ts文件里的,直接在创建元素的时候写到元素的style里(具有最高的优先级),也没办法通过安装Custom CSS Loader插件等手段进行覆盖,只能自己手动修改vscode的资源文件。

于是只能自己:

2. Hack VSCode圆角

修改前建议备份原始文件!

这里只针对Windows系统讲,其他系统类似。

menu item圆角修改menu.js打包后的资源在%ProgramFiles%\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.js中,在文件里寻找字符串"5px",把_var="5px"的那个结果改成"0px"即可。(_var是任意变量名,只要上文中的提到的menu.ts里的5px字符串不改变,一般来说这个方法就不会失效。)

menu title灰底圆角修改(可选):在同目录下的workbench.desktop.main.css里寻找.menubar-menu-title,把里面的border-radius改成0px。(注意不要改错了,必须是顶层类!这个改动是pr#151250menubar.css里引入的。)这个修改可以额外把顶部菜单栏里显示的灰色底栏显示也改成方的。

关于修改VSCode资源文件后,右下角弹出的VSCode安装似乎已损坏和顶部标题栏的[不受支持]字样,请安装Fix VSCode Checksums插件。关于该插件可参考👉CSDN博客👉StackOverflow问题

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-07-17 16:44:21  更:2022-07-17 16:46:04 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/28 19:37:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计