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

如何修改VS Code欢迎页的指定图标?

如何修改VS Code欢迎页的指定图标?

嘿,我来帮你搞定这个问题!你想改的是欢迎页左上角那个VS Code图标对吧?我之前也折腾过这个,给你两种方法,一种是直接修改核心文件,另一种是用插件更稳妥,都给你说清楚:

方法一:直接修改VS Code核心文件(注意:版本更新会覆盖修改)

首先得找到VS Code的安装目录,不同系统位置不一样:

  • Windows:默认全局安装在C:\Program Files\Microsoft VS Code,如果是用户独立安装版,就在C:\Users\<你的用户名>\AppData\Local\Programs\Microsoft VS Code
  • macOS:右键点击Applications里的「Visual Studio Code」,选择「显示包内容」,然后进入Contents/Resources/app
  • Linux:全局安装一般在/usr/share/code,用户安装的话在~/.vscode

进入安装目录后,找到out/vs/workbench/browser/media文件夹,里面有个类似welcomeIcon.svg或者logo.svg的文件(不同版本文件名可能略有差异,你可以看文件预览找那个和欢迎页图标一致的)。

操作步骤:

  1. 备份原文件!复制一份到别的地方,万一改错了还能恢复
  2. 准备好你自己的图标,最好和原文件尺寸一致(比如原图标是48x48的svg,你也用同尺寸的svg或者png)
  3. 把你的图标重命名成和原文件一样的名字,替换掉原来的文件

⚠️ 注意:修改核心文件后,VS Code启动时可能会弹出「安装已损坏」的提示,你可以点击「不再显示」忽略它;另外每次VS Code更新后,这个修改会被覆盖,需要重新操作一遍。

方法二:用自定义CSS插件(更稳妥,不会被更新覆盖)

这个方法不用动VS Code的核心文件,推荐用这种:

  1. 打开VS Code,安装插件「Custom CSS and JS Loader」
  2. 在本地创建一个.css文件(比如vscode-custom.css),写入以下代码(根据实际图标路径修改):
/* 替换欢迎页左上角图标 */
.welcome-page .codicon-logo {
  background-image: url('file:///你的图标文件绝对路径') !important;
  background-size: contain;
  background-repeat: no-repeat;
}

比如Windows路径是file:///C:/Users/xxx/Documents/my-icon.svg,macOS是file:///Users/xxx/Documents/my-icon.svg
3. 打开VS Code的设置(快捷键Ctrl+,),搜索「Custom CSS: Stylesheets」,把你刚才创建的css文件路径添加进去
4. 重启VS Code,插件会提示你需要重启生效,点击重启就可以看到自定义图标了

这个方法的好处是,VS Code更新后你的修改不会丢失,也不会触发“安装损坏”的提示。

备注:内容来源于stack exchange,提问作者LemonSalt

火山引擎 最新活动