首页 > 其他分享 >VS Code | 重新认识VSCode的界面

VS Code | 重新认识VSCode的界面

时间:2023-12-24 18:34:41浏览次数:45  
标签:Code 输入框 VSCode 代码 命令 VS 面板

VS Code | 重新认识VSCode的界面_前端

VS Code的整个界面被称为工作台(Workbench)

侧边栏,活动栏

在默认设置下 VS Code 的左侧那一栏被称为活动栏,这里有五个组件,它们分别是:

  • 文件资源管理器:主要用于浏览以及管理文件和文件夹。
  • 跨文件搜索:用于在当前文件夹内进行跨文件的搜索。
  • 源代码管理器:对当前文件夹下的代码进行版本管理,VS Code 支持的版本管理软件是Git
  • 启动和调试:启动或者调试当前文件夹下的项目
  • 拓展管理:管理 VS Code里面的插件,可以进行安装、更新和卸载等操作。

把鼠标移动到活动栏的空白处,然后点击鼠标右键,可以对这些组件进行显示和隐藏的设置。如果把鼠标移动到组建上面,可以看到多了一项“隐藏XXX”的选项。

VS Code | 重新认识VSCode的界面_前端_02

当然也可以根据个人的使用习惯, 用鼠标拖动这些组件,对它们进行重新排序。

在左侧这个活动栏的下面有两个选项,一个是登陆账号的,可以同步 VS Code的配置,包括设置、键盘快捷键、代码片段扩展、UI状态等,这样下次再换台电脑的时候,不用重新配置一遍,还是很方便的。

在登录账号的下面是一个小齿轮的按钮,这里面提供了一些常用功能的入口。包括命令面板,设置、用户代码片段等……

状态栏

在整个软件窗口的最下面,有横着的一小栏,这个就是状态栏。主要是把当前文件夹,编辑器状态、代码版本、代码错误的基础信息展示出来。另外一些插件的信息也会在状态栏展示出来。

面板

在状态栏的上面有一块隐藏的区域,就是上图标记为“组件面板”的区域,官方称之为“面板”。一般这里是不显示的,当我们使用终端等工具的时候,它会显示出来。

这里默认有四个组件:

  • 问题面板 :展示当前文件夹下代码里的所有问题和警告,比如代码中的语法错误、格式问题、拼写错误等。我们可以在这个问题面板里面浏览这些问题,并且可以访问到对应的文件
  • 输出面板 :将核心命令和插件的运行状态以及运行结果显示出来,比如git命令执行错误的时候,我们可以通过阅读输出面板找到问题出在哪里了。
  • 调试控制台 :调试代码的时候使用的
  • 终端 : 就是平时使用的系统命令行,系统不同,这里使用的终端工具也略有不同。

命令面板

在活动栏的齿轮按钮里面,或者代码编辑器点击右键,都可以打开命令面板。当然也可以使用快捷键:F1 或 Cmd + Shift + P,Windows的快捷键

这时候可以看到一个弹框,输入框的有一个大于号(>),这就是命令面板。

VS Code | 重新认识VSCode的界面_Code_03

当然了,开始的符号除了>,还有一些其他的符号,不同的符号分别表示不同的含义。

  • 输入框没有字符,命令面板提供的功能是访问最近使用的文件,这时候的输入框也有一段提示的内容。
  • >:提供所有的命令,继续输入字符,则在所有命令里进行搜索。
  • @:在当前文件中搜索,你会看到不同的“符号”(Symbols)(节点名,方法名等)。如果在@符号的后面添加冒号:,则可以把符号们按类别归类
  • ::跳转到当前文件中的某一行
  • edtedit 的缩写):输入edt和一个空格,命令面板就会按外观显示所有打开的文件
  • edt active:按最近使用显示当前活动组中的文件
  • edt mru:按最近使用显示所有打开的文件
  • ext(extension 的缩写):输入ext和一个空格,就可以进行插件的管理。
  • ext install:则可以在命令面板中搜索和安装插件
  • task:运行任务
  • debug:调试功能
  • term(terminal 的缩写):显示所有已打开的终端,也可以使用这个命令创建和管理终端实例。
  • view:打开 VS Code 的各个 UI 组件

在输入英文缩写的时候,后面需要输入一个空格。

如果记不住上面这些命令也没关系,我们可以清空命令面板的输入框,然后输入一个英文问好?,注意一定要是英文的!,接下来就能看到各种命令的提示了。

VS Code | 重新认识VSCode的界面_前端_04

常用配置

通过左下角的小齿轮,打开配置,然后在最上面的输入框,输入配置名称搜索配置。

  • workbench.commandPalette.history:刚刚执行过的操作就会被记录下来,并且最近执行的命令会显示在最上面。默认情况下,会存储50条历史记录,通过这个配置可以修改数量。
  • workbench.commandPalette.preservelnput:命令面板的输入框保存上一次执行的命令。默认值是false

VS Code | 重新认识VSCode的界面_Code_05

参考

  • 吕鹏大佬的《玩转 VS Code》

标签:Code,输入框,VSCode,代码,命令,VS,面板
From: https://blog.51cto.com/u_15812995/8956391

相关文章

  • TiDB v7.5.0 vs Oceanbase v4.2.1.1: online ddl 吐血验证测试
    作者:h5n11         测试环境3台ARM服务器,同时部署TiDB和OceanBase。TiDB:v7.5.0社区版,kvcache32G,CPU48核(tidb+tikv+pd,numa),普通ssd。Oceanbase:4.2.1.1社区版,租户内存128G,48核,普通ssd。2         测试内容以Oceanbase4.2.1官网文档为基准测试......
  • 讲解'utf-8' codec can't decode byte 0xb6 in position 34: invalid start byte
    讲解'utf-8'codeccan'tdecodebyte0xb6inposition34:invalidstartbyte在编程过程中,我们经常会遇到各种编码和解码的问题。其中一个常见的错误是'utf-8'codeccan'tdecodebyte0xb6inposition34:invalidstartbyte。这个错误表示在使用utf-8编码解码时,无法解......
  • PVST模拟技术
    PVST模拟机制说明:通常,MST区域会连接到其他域,pvst或rapid-pvst。运行pvst或rapid-pvst的这些交换机无法处理MST类型BPDU。因此,必须运行向后兼容机制,以便这两个域能够无缝交互。这是PVST模拟地址和实现的功能。此模拟只能在边界端口上运行,这些端口直接连接到pvst或rapid-pvst域交换......
  • 文心一言 VS 讯飞星火 VS chatgpt (163)-- 算法导论13.1 3题
    三、用go语言,定义一棵松弛红黑树(relaxedred-blacktree)为满足红黑性质1、3、4和5的二叉搜索树。换句话说,根结点可以是红色或是黑色。考虑一棵根结点为红色的松弛红黑树T。如果将T的根结点标为黑色而其他都不变,那么所得到的是否还是一棵红黑树?文心一言:是的,如果将一棵根结......
  • 文心一言 VS 讯飞星火 VS chatgpt (163)-- 算法导论13.1 3题
    三、用go语言,定义一棵松弛红黑树(relaxedred-blacktree)为满足红黑性质1、3、4和5的二叉搜索树。换句话说,根结点可以是红色或是黑色。考虑一棵根结点为红色的松弛红黑树T。如果将T的根结点标为黑色而其他都不变,那么所得到的是否还是一棵红黑树?文心一言:是的,如果将一棵根......
  • [LeetCode Hot 100] LeetCode394. 字符串解码
    题目描述思路思路:碰到数字:压入数字栈,注意多位数的情况碰到字母:直接拼接到res遇到[:将num和res分别压入栈遇到]:开始处理栈顶元素方法一:classSolution{publicStringdecodeString(Strings){intnum=0;StringBuilderres=newStringBuil......
  • vscode+xdebug+phpenv本地调试php代码
    php环境变量先设置环境变量,找到php目录在vscode里安装phpdebug插件点击插件按钮,搜索phpdebug,找到这里标有Xdebug的,点击安装开启Xdebug组件找到对应版本的php去配置php.in文件把这个放到php.ini的最后,如果里面有则根据情况替换即可,端口号要和下面的vscode里面的统一......
  • 『LeetCode』7. 整数反转 Reverse Integer
    题目描述给你一个32位的有符号整数x,返回将x中的数字部分反转后的结果。如果反转后整数超过32位的有符号整数的范围[−231,231−1],就返回0。假设环境不允许存储64位整数(有符号或无符号)。示例1:输入:x=123输出:321示例2:输入:x=-123输出:-321示例3:输入:x......
  • [LeetCode Hot 100] LeetCode739. 每日温度
    题目描述思路:单调递减栈使用单调栈的模板即可。根据题意可知,该题使用的是单调递减栈。问题抽象为:找出数组中右边第一个比我大的元素。方法一:classSolution{publicint[]dailyTemperatures(int[]temperatures){//用于存放结果int[]res=new......
  • [LeetCode Hot 100] LeetCode42. 接雨水
    题目描述思路一:单调栈柱子的高度递减的时候是装不了水的,当碰到第一个比之前高的柱子才可以装水。此时计算栈顶索引能装的水:宽:i-left-1(这个left为栈顶元素pop之后的peek值)高:min(height[left],height[i])-height[top]该题维护的是一个单调递减栈方法一:对应思路......