• 周六. 4 月 25th, 2026

物嫩软件资讯网

软件资讯来物嫩

vscode高效开发方案【护眼绿主题,插件,和控制台】研究

admin@wunen

5 月 18, 2025



最近写代码太累,眼睛疲劳,修改写主题配色



最近这边文章本人投诉侵权啦,也无所谓啦,反正这篇文章该更新啦,现在我的vscode 配置基本大变化啦!




插曲


Rollup 打包通用项目工程库,工程化之路



配置开发插件提高工作效率




插件安装参考文章大前端插件集合

tips: 为了减少系统盘的大小或者后期重装系统造成的一些插件丢失,告诉大家一个好方案,因为vscode 可以解压的方式运行,下载下来,把目录弄到非系统盘,我的在E:\install_path\VSCode,打开vacode,把上面的插件安装到vscode上



配置主题

因为侵权问题,我现在已另外一种方式去实现,这样通过改文件的方式,

我们首先确定我们的主题文件在哪个目录下,之后修改默认的配置文件,或者自己新建一个配置文件,名字改为自己喜欢的专属名字。

主题目录在 E:\install_path\VSCode\resources\app\extensions这里会看到theme***的插件

package.json 可以加一个自己定制的主题文件,package.json的内容



以下为分类的颜色明细说明:

文本编辑区

  • editor.foreground :编辑区前景颜色
  • editor.background:编辑区背景颜色

文本编辑区

  • titleBar.activeBackground :背景颜色
  • titleBar.activeForeground:前景颜色

titleBar

  • titleBar.activeBackground :背景颜色
  • titleBar.activeForeground:前景颜色

工具栏

  • toolBar.background 工具栏背景颜色
  • toolBar.border 工具栏边框颜色
  • toolBar.hoverBackground 工具栏上图标被选中时的背景颜色

文件资源管理器

  • sideBar.background 背景颜色
  • sideBar.border 边框颜色

标签卡

  • editorGroupHeader.tabsBackground tabs背景颜色
  • tab.activeBackground 选中时的背景颜色
  • tab.border 边框颜色
  • tab.inactiveBackground 未选中时的背景颜色
  • tab.hoverBackground 鼠标滑过时的背景颜色
  • tab.inactiveForeground 未选中时的前景颜色
  • tab.activeBorder 选中时的边框颜色
  • tab.activeForeground 选中时的前景颜色
  • tab.unfocusedInactiveForeground 未选中分栏里未选中标签的前景颜色
  • tab.unfocusedHoverBackground 未选中分栏里鼠标滑过未选中标签的背景颜色
  • tab.unfocusedActiveForeground 未选中分栏里选中标签的前景颜色

控制台

  • terminal.background 终端背景颜色
  • console.background 控制台背景颜色
  • panelTitle.activeForeground tab选中时的前景颜色
  • debug.foreground 前景颜色



tips:

more



tips: 绿柔的几个颜色【#faf6e6,#338a3e】在这上面进行扩展浅色和深色


    "sideBar.background":"#faf6e6" //加深项目管理器背景色  
    "sideBar.background":"#FFFFCC",  
    "editorGroupHeader.tabsBackground":"#FFFFCC",  
    "tab.inactiveBackground":"#FFFFCC",  
    "editor.background":"#FFFFCC" //取消设置需重启生效  



控制台的风格设置

相信大家都是用过控制台的,windows 看起来很不爽,一个小小的设置,让你眼前一亮。一目了然看到当前的分支,还可以使用linux 指令,很不错哦!

  1. 找到git的安装目录,本人的在 E:\install_path\Git
  2. 找到git目录下的bash.exe 在安装目录下bin目录下,E:\install_path\Git\bin
  1. 在vscode 配置中设置
"terminal.integrated.shell.windows": "E:\\install_path\\Git\\bin\\bash.exe",

最后的效果如下,是不是事半功倍啊!



有需要上面的配置的包括护眼绿主题等,私信,我把配置发你们。



欢迎进入个人公众号 ,一起学习啊!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注