VSCODE（三）用户界面

通过用户界面，我们可以设置软件的一些功能和表现，了解界面上各个UI功能块非常有必要。

一、设置

1.1 用户设置和工作区设置

• 用户设置（User Setting）: 所有VSCODE实例都有效的设置，因此也叫全局设置，这个设置通常放在计算机的固定位置；
• 工作区设置（Workspace Setting）:当前工作区有效的设置。工作区设置可以上传到服务器上方便所有成员共享。

工作区有点像是项目设置实例，如果你要设置一个所有项目都生效的设置，请设置在用户设置中。

1.2 打开设置

VSCODE有途径进行VSCODE设置，分别是JSON和UI方式。那么如何打开JSON或UI进行设置呢？

• 菜单栏选取。FIle-Preference-Settings(Linux)；Code-Preference-Settings(Mac)；
• 命令面板搜索。 ctrl+shift+P或者F1，搜索Preference:Open Setting(UI/JSON)；
• 快捷键。ctrl+,

命令面板搜索是一个方便的工具，在你不记得或需要设置某一项功能是，可以试试搜索它！

UI方法进行设置，其界面如下：

最左边已经将设置进行了分类方便我们查找对应内容。

1.3 修改设置

• UI设置。大部分的设置都可以通过复选框、输入框和下拉列表实现；
• JSON文件设置。对于比较复杂的设置，就需要编辑对应JSON文件实现设置。

JSON文件的全局默认位置：

• Windows: %APPDATA%\Code\User\settings.json
• macOS: $HOME/Library/Application Support/Code/User/setting.json
• Linux: $HOME/.config/Code/User/setting.json

JSON文件局部默认位置：
文件根目录的.vscode文件夹下

有时候我们某些语言需要特定设置，另一些语言则需要另一个设置。VSCODE通过设置语言特定的设置，通过命令面板查找：Preferences: Configure Language Specific Settings。

简单说一下JSON的语法，这是配置的基础。JSON 的语法基本上可以视为 JavaScript 语法的一个子集，包括以下内容：

• 数据使用名/值对表示。
• 使用大括号保存对象，每个名称后面跟着一个 ‘:’（冒号），名/值对使用 ,（逗号）分割。
• 使用方括号保存数组，数组值使用 ,（逗号）分割。

看个例子：

{
    "book": [
        {
            "id":"01",
            "language": "Java",
            "edition": "third",
            "author": "Herbert Schildt"
        },
        {
            "id":"07",
            "language": "C++",
            "edition": "second",
            "author": "E.Balagurusamy"
    }]
}

%appdata%就代表了C:Users\用户名\AppData\Roaming这个文件夹。

注意：一些关乎安全的设置，则只能在全局进行设置。如：git.path termianl.integrated.shell.linux

所有的设置都可以通过JSON来设置的，它包括：

1.4 常用设置

• 编辑器格式化粘贴

"editor.formatOnPaste" : true

• 保存后格式化

"edit006Fr.formatOnSave" : true

• 字体大小

"editor.fontSize": 18,//编辑区域
"terminal.integrated.fontSize":14,//集成终端
"[Log]":{
	"editor.fontSize"=15//输出窗口
}

• 窗口缩放级别

{
	"window.zoomLevel":5
}

这个缩放级别，相当于将整个VSCODE缩小或放大。0表示不缩放（默认），1+表示放大；-1-表示缩小。

• 设置连体字

"editor.fontFamily":"Fira Code",
"editor.fontLigatures":true

• 自动保存模式

"files.autoSave":"afterDelay",
"files.autoSaveDelay":1000

• 制表符空格数

"editor.tabSize":4

• Tab插入空格还是制表符

"editor.insertSpaces":true

• 空白字符显示符号

"editor.renderWhitespace":all

• 配置排除文件和文件夹的glob模式

"files.exclude":{
	"somefolder/":true
	"somefile":true
}

• 搜索中排除文件和文件夹的glob模式

"search.exclude":{
	"somefolder/":true
	"somefile":true
}

二、布局

2.1 主要布局

整个VSCODE被分为五个区域：

• 编辑器
  VSCODE允许你多行或者多列打开编辑器。

• 活动栏（默认最左边）
  活动栏包括五个主要部分：资源管理器（EXPLORER）、搜索（SEARCH）、版本控制（SOURCE CONTROL）、调试及运行（Run）和扩展（EXTENSIONS）。除此还有设置和账号相关的部分。
  

• 侧边栏
  在我们选中对应活动栏项目时，侧边栏将会展示其详细的功能行为。可以使用快捷键ctrl+b来显示\隐藏侧边栏。重点说说我们最常用的EXPLORER，安装插件可能会增加这儿的选项卡，但是插件不一定支持所有的文本格式。
  

• 状态栏（最下方）
  

• 面板
  包含调试、输出、终端和问题四个部分。每一个选项卡都有相应的功能。
  

2.2 其他布局

• 命令面板（ctrl+shift+P）
  这个面板非常实用，相当于VSCODE中的man指令。你不仅能够知道某个命令的设置位置，还能知道其快捷键。
  
  在查到对应的命令后，对于比较经常使用的命令，就可以使用快捷键来访问（如果有）。如：ctrl+p跳转到某个文件；ctrl+shift+Tab打开文件中跳转；ctrl+shift+o跳转到文件中的符号，对于C++而言诸如函数、变量等；ctrl+g，跳转到当前文件某一行。

• 缩略图（minimap）
  代码量较大时可以方便快速定位到大致区域。
  

• 并排编辑
  有时候我们需要参考某些地方的代码进行程序的编写，这时候来回切换非常不方便，有没有解决方法？有的，那就是split编辑区域，将整个编辑区域划分为指定块数，每次只有一个可写，其他则可读。那么如何split？资源管理器直接分割，alt+单击；当前文档分割。ctrl+\。还有很多方法和行为，不一一列举了。

• 面包屑导航（breadcrumbs）
  VSCODE是以文件夹对项目进行管理的，通过该导航可以获取当前文件所处的相对位置（相对于项目文件夹）。我们单击各个路径的名字可以进行导航。
  
  甚至可以是符号！
  

---

[1] %appdata%就代表了C:Users\用户名\AppData\Roaming这个文件夹。