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

大家好，又见面了，我是你们的朋友全栈君。

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

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

插曲 Rollup 打包通用项目工程库，工程化之路

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

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

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

在这里插入图片描述

，接下来是关键以的一步，安装的插件在C:\Users\“用户”.vscode\extensions下、

在这里插入图片描述

，把上面的所有文件复制到 E:\install_path\VSCode\resources\app\extensions 下，重新打开，你会发现之前的插件全部变成内置啦，就算重装系统，也不会丢失。

配置主题

因为侵权问题，我现在已另外一种方式去实现，这样通过改文件的方式， 我们首先确定我们的主题文件在哪个目录下，之后修改默认的配置文件，或者自己新建一个配置文件，名字改为自己喜欢的专属名字。 主题目录在 E:\install_path\VSCode\resources\app\extensions这里会看到theme***的插件

在这里插入图片描述

我们看看默认的是哪个主题

在这里插入图片描述

那这个系统默认的主题在哪里呢？仔细找找，其实并不难找。在E:\install_path\VSCode\resources\app\extensions这个目录下有个theme-defaults的文件夹

在这里插入图片描述

fileicons 这个是图标的icon themes 这个是主题文件，基本都是json格式的 打开themes 之后

在这里插入图片描述

dark_defaults.json 这个就是系统默认的那个主题

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

在这里插入图片描述

我自己新建一个主题的名字

在这里插入图片描述

在这里插入图片描述

重新启动vscode

在这里插入图片描述

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

文本编辑区

• 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",

最后的效果如下，是不是事半功倍啊！

在这里插入图片描述

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/142084.html原文链接：https://javaforall.cn