vscode二次开发界面篇

---

title: vscode二次开发界面篇
date: 2019-05-13 10:17:19
tags: “VsCode”

本文给大家介绍vscode的界面的自定义修改

首先，先看vsocde界面如图1：

界面大致可以分为六部分：
1.标题栏titlebar 包含其中左边的（包括文件~帮助）为菜单栏menubar
2.活动栏activitybar
3.侧边栏sidebar
4.编辑器editor
5.终端及输出等panel
6.状态栏statusbar
通过分类我们已经清楚了每个部分，接下来我们就动手尝试吧！

自定义修改

修改左上角图标

其实vsocde本质是一个html页面，所以界面上看到的布局，都是通过div来生成的，那么界面是完全可以自定义的。
这里我推荐一种方法：
1.打开"切换开发人员工具"，快捷键Ctrl+Shift+I，标题栏->帮助->切换开发人员工具；
2.这个工具可以更快帮助我们找到修改目标的位置，作用和在页面F12调试是一样的，然后我们可以找到图标的class，如图2；

3.打开vscodeIDE工具，用IDE打开你要编译的源码；
4.用IDE搜索功能，搜索关键词，也就是搜索class，如图3，找到符合的结果；

5.由下图4可以知道，左上角图标就是svg图片，修改其实就是修改svg图片即可。

活动栏增加文字

无论要改什么界面，按照这个方法去修改就行。
增加图标文字
通过这个方法知道搜索出来的结果可能不止一个，比如css文件、ts文件，而ts文件一般是创建这个div，然后再css中进行样式修改，
我们通过搜索关键字找到actionbar.ts这个文件，602行

actions.forEach((action: IAction) => {
const actionItemElement = document.createElement('li');
actionItemElement.className = 'action-item';

我们看到activitybar（活动栏）的一个个图标是由action组成，但这样只能给每一个action添加统一的文字了，我们需要修改以下源码，
将actionItemElement.className = ‘action-item’;改成actionItemElement.className = ‘action-item’ + ’ action-item’ + index;
我们为action增加一个动态的class，index是action个数，从0开始，这样第一个action的class就是action-item0，以此类推……
接着我们再修改活动栏css样式，在activityaction.css中，我们注释下面这段代码

/* .monaco-workbench > .activitybar > .content .monaco-action-bar .action-item:focus:before {
	content: "";
	position: absolute;
	top: 9px;
	height: 32px;
	width: 0;
	border-left: 2px solid;
} */

然后给action-item0，1，2……增加样式，css代码为：

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item0:after