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

蓮花仙者

发布时间：2025-07-17 09:44:23

872人浏览过

来源于php中文网

原创

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

最近因为写代码太累，眼睛出现了疲劳的情况，所以我决定调整一下主题配色。

之前的文章因为版权问题被投诉了，不过没关系，这次我将分享我对vscode配置的最新调整。

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

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

关于插件的安装，可以参考大前端插件集合这篇文章。

tips: 为了减少系统盘的占用或者避免重装系统后插件丢失，我有一个好方法。vscode可以以解压的方式运行，首先下载vscode并将其目录放到非系统盘，例如我的在E:\install_path\VSCode。然后打开vscode，并将插件安装到vscode中。

vscode高效开发方案【护眼绿主题，插件，和控制台】研究接下来是关键的一步，安装的插件位于C:\Users\“用户名”\.vscode\extensions下、

vscode高效开发方案【护眼绿主题，插件，和控制台】研究将这些文件复制到E:\install_path\VSCode\resources\app\extensions下，重新打开vscode，你会发现之前的插件已经变成了内置插件，即使重装系统也不会丢失。

由于之前的主题因为版权问题被投诉，我现在通过修改文件的方式来实现新的主题。我们首先需要确定主题文件所在的目录，然后修改默认的配置文件，或者新建一个配置文件，并给它取一个自己喜欢的名字。主题目录在E:\install_path\VSCode\resources\app\extensions，这里会看到theme***的插件。

vscode高效开发方案【护眼绿主题，插件，和控制台】研究我们来看看默认的主题是哪个。

vscode高效开发方案【护眼绿主题，插件，和控制台】研究系统默认的主题在哪里呢？仔细找找，其实并不难找。在E:\install_path\VSCode\resources\app\extensions这个目录下有个theme-defaults的文件夹。

Jobright

专为北美求职者设计的AI求职助手平台

下载

vscode高效开发方案【护眼绿主题，插件，和控制台】研究 fileicons是图标的icon themes，这个是主题文件，基本都是json格式的。打开themes之后，

vscode高效开发方案【护眼绿主题，插件，和控制台】研究 dark_defaults.json就是系统默认的那个主题。

在package.json中可以添加一个自己定制的主题文件，package.json的内容如下：

vscode高效开发方案【护眼绿主题，插件，和控制台】研究我自己新建了一个主题的名字。

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

vscode高效开发方案【护眼绿主题，插件，和控制台】研究以下是颜色的详细说明：editor.foreground：编辑区前景颜色；editor.background：编辑区背景颜色；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: moretips: 绿柔的几个颜色【#faf6e6,#338a3e】可以在此基础上扩展浅色和深色。

代码语言：javascript 代码运行次数：0

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

控制台的风格设置可以找到git的安装目录，我的git在E:\install_path\Git。找到git目录下的bash.exe，在安装目录下的bin目录下，E:\install_path\Git\bin。

vscode高效开发方案【护眼绿主题，插件，和控制台】研究在vscode配置中设置：

vscode高效开发方案【护眼绿主题，插件，和控制台】研究代码语言：javascript 代码运行次数：0

运行复制 ```javascript "terminal.integrated.shell.windows": "E:\\install_path\\Git\\bin\\bash.exe", ```

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

vscode高效开发方案【护眼绿主题，插件，和控制台】研究发布者：全栈程序员栈长，转载请注明出处：https://www.php.cn/link/8995a6c234df0504e73ff81dd3af8ff5 原文链接：https://www.php.cn/link/c8377ad2a50fb65de28b11cfc628d75c

十大Java编程工具

使用VS Code插件远程连接Linux服务器

IntelliJ IDEA 2022 for Mac(最好用的Java开发工具)v2022.2.1汉化激活版

硬盘的读写原理详解

上班如何优雅摸鱼，送IDEA摸鱼插件神器！

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

557

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

754

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

478

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

434

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

1031

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

553

2023.09.20