vscode二次开发_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，找到符合的结果；