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 {
	content: "文件";
	position: absolute;
	top: 56px;
	height: 32px;
	text-align: center;
	font-size: 14px;
	width: 50px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item1:after {
	content: "管理";
	position: absolute;
	top: 56px;
	font-size: 14px;
	height: 32px;
	text-align: center;
	width: 50px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item2:after {
	content: "调试";
	position: absolute;
	top: 56px;
	height: 32px;
	font-size: 14px;
	text-align: center;
	width: 50px;
}

.monaco-workbench > .activitybar > .content .monaco-action-bar .action-item3:after {
	content: "扩展";
	position: absolute;
	top: 56px;
	height: 32px;
	font-size: 14px;
	text-align: center;
	width: 50px;
}

最后我们再修改活动栏的宽度，使之看起来更显眼，可能我们按上一个方法的话找不到宽度和高度这些，
我们这一个方法也不是万能的，所以我们需要结合自身的研究，我觉得vscode的命名还是很规范的，所以参考目录结构和命名，
我们最终找到一个activitybarpart.css文件，找到第7行：将width修改为70px；然后将源码运行起来。
发现，这修改没有生效啊。
通过研究vscode启动时它会执行一个布局文件layout.ts，31行定义了ACTIVITY_BAR_WIDTH = 50;
看到这里我们知道修改css为什么没有生效了，我们将ACTIVITY_BAR_WIDTH = 50改成ACTIVITY_BAR_WIDTH = 70，
保证和activitybarpart.css文件中activitybar的width相同;
这时我们执行源码发现宽度生效了，当我们将宽度改成70，那么相应的图标文字的宽度也应该改成70，
所以将上面css代码中的width: 50px改成width: 70px
最终结果图5所示

隐藏菜单栏

通过vscode设置我们能直接修改菜单栏的显示或隐藏，sidebar显示在左侧还是右侧，但是如果我们想从代码里设置也是可以的，
也是通过切换开发人员工具的方法进行关键字搜索，找到vscode主要的设置都是在main.contribution.ts文件里。

'window.menuBarVisibility': {
				'type': 'string',
				'enum': ['default', 'visible', 'toggle', 'hidden'],
				'enumDescriptions': [
					nls.localize('window.menuBarVisibility.default', "Menu is only hidden in full screen mode."),
					nls.localize('window.menuBarVisibility.visible', "Menu is always visible even in full screen mode."),
					nls.localize('window.menuBarVisibility.toggle', "Menu is hidden but can be displayed via Alt key."),
					nls.localize('window.menuBarVisibility.hidden', "Menu is always hidden.")
				],
				'default': 'hidden',
				'scope': ConfigurationScope.APPLICATION,
				'description': nls.localize('menuBarVisibility', "Control the visibility of the menu bar. A setting of 'toggle' means that the menu bar is hidden and a single press of the Alt key will show it. By default, the menu bar will be visible, unless the window is full screen."),
				'included': isWindows || isLinux
			},

可以看到菜单栏有4种选项，可以按需求进行默认设置。
还有搜索功能的位置，我喜欢放在开发工具的下面和终端一起，可以搜索关键词search.location快速找到search.contribution.ts文件进行修改

'search.location': {
			type: 'string',
			enum: ['sidebar', 'panel'],
			default: 'panel',
			description: nls.localize('search.location', "Controls whether the search will be shown as a view in the sidebar or as a panel in the panel area for more horizontal space."),
		},

更多

还有更多的界面修改，这里我就不一一和大家介绍了，大家可以尽情去探索，本文最重要的就是向大家介绍使用切换开发人员工具的方法进行界面修改，
所以关键还是运用方法，不断熟悉vsocde源码目录结构来进行修改，希望能够帮助到有需要的朋友。