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
最左边已经将设置进行了分类方便我们查找对应内容。

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允许你多行或者多列打开编辑器。1

  • 活动栏（默认最左边）
    活动栏包括五个主要部分：资源管理器（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这个文件夹。