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

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

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

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

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

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

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

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

接下来是关键的一步，安装的插件位于C:Users“用户名”.vscodeextensions下、

将这些文件复制到E:install_pathVSCode esourcesppextensions下，重新打开vscode，你会发现之前的插件已经变成了内置插件，即使重装系统也不会丢失。

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

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

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

萤石开放平台

萤石开放平台：为企业客户提供全球化、一站式硬件智能方案。

106

查看详情

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

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

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

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

重新启动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

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

在vscode配置中设置：

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

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

发布者：全栈程序员栈长，转载请注明出处：https://www.php.cn/link/8995a6c234df0504e73ff81dd3af8ff5 原文链接：https://www.php.cn/link/c8377ad2a50fb65de28b11cfc628d75c

以上就是vscode高效开发方案【护眼绿主题，插件，和控制台】研究的详细内容，更多请关注php中文网其它相关文章！