本文给大家介绍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行1
2
3actions.forEach((action: IAction) => {