您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

十个极大提高开发效率的 VS Code 技巧!

时间:2023-09-07 12:30:55  来源:微信公众号  作者:前端充电宝
本文来分享 10 个极大提高开发效率的 VS Code 技巧!在VS Code中,可以在设置中搜索" Editor: Wrap Tabs"来实现选项卡换行的功能。

本文来分享 10 个极大提高开发效率的 VS Code 技巧!

标签换行

在VS Code中,可以在设置中搜索" Editor: Wrap Tabs"来实现选项卡换行的功能。

这样,在大型项目中工作时,就不需要像在浏览器中一样滚动来查找选项卡,而是可以让选项卡自动换行,更方便地跟踪模板和组件。

Timeline 视图:本地源代码控制

Git等代码控制工具能够轻松跟踪文件的变更,并且在需要时还原到之前的状态。为了提供更好的版本控制和代码历史的可视化,VS Code提供了Timeline视图。

Timeline视图是一个自动更新的面板,它显示与文件相关的重要事件,如Git提交、文件保存和测试运行等。通过Timeline视图,你可以更直观地浏览代码的演变过程,追踪各种操作对文件的影响。

展开此视图可查看与当前文件相关的事件快照列表。这里是文件保存,也是 Git 提交文件暂存的地方。

将鼠标悬停在快照项上可查看 VS Code 制作快照的日期和时间。

选择快照项可查看差异视图,显示快照时的文件与当前文件之间的更改。

自定义布局

VS Code 界面的左侧选项卡通常包括资源管理器、搜索、源代码控制、项目管理等功能。而终端中会显示诸如 “problems”, “output”, “terminal”和“debug console”等工具栏。

VS Code 支持自由地拖放这些选项卡,按照喜好来重新排列界面,让它更适合你的使用习惯。

通过简单的拖拽操作,可以改变它们的位置。比如,可以将资源管理器移到右侧,将搜索放在顶部,或者将终端移动到左侧。只需点击选项卡的标题栏,并将其拖动到你想要的位置。释放鼠标按钮后,选项卡将会被放置在你选择的位置上,可以更方便地访问和管理这些功能。

自动保存

在编辑文件时,默认情况下需要手动保存文件,比如按下Ctrl + S快捷键。这个过程可能很麻烦,特别是当频繁修改文件时。为了减轻这种繁琐的操作,VS Code 引入了自动保存功能。

自动保存功能会在我们进行文件编辑时自动保存文件的更改,而无需手动按下保存快捷键。这意味着我们可以专注于写代码而不用担心保存文件,节省了不少时间和精力。此外,自动保存还确保我们始终使用的是最新的文件版本,避免了由于未及时保存而丢失修改的情况。

使用“文件”>“自动保存”可以轻松启用该功能。

然而,自动保存功能并非完美无缺。有些人可能喜欢手动控制保存的时机,以便在修改完成之前进行检查和确认。自动保存也可能导致一些意外情况,比如误操作或者意外修改了文件内容,因为一旦保存,修改就会立即生效。

是否启用自动保存功能取决于个人偏好和实际需求。权衡利弊,根据自己的习惯和工作流程来决定是否使用自动保存功能。

使用命令面板执行操作

在 VS Code 中,除了输入文本之外,几乎任何操作都可以通过命令面板完成。命令面板允许我们在编辑器中执行各种任务,包括与文件相关的命令、导航命令、编辑命令和终端命令,每个命令都被优化设计以提升编辑体验。通过命令面板,可以简单地搜索所需的命令,并选择执行相应的操作。

打开命令面板的方式如下:

  • windows/linux: 使用快捷键 Ctrl + Shift + P
  • mac: 使用快捷键 Shift + Command + P

快捷键是一种使用键盘更快地运行命令的方式。与使用快捷键相比,命令面板的主要优势在于当某个命令没有快捷键时,或者当你不确定某个命令是否存在时,可以通过命令面板进行查找和执行。

在 VS Code中,有大量的命令可供使用,比如打开文件、查找替换、调试应用程序等。虽然很多命令都有对应的快捷键,但并不是所有命令都有快捷键。此时,命令面板就发挥了作用。命令面板提供了一个搜索功能,可以输入关键字来查找你想要执行的命令。即使你不知道具体的命令名称,只需输入相关的描述性关键字,命令面板也能帮助你找到合适的命令。这种灵活性让你无需记忆全部命令及其快捷键,只需用简单的搜索即可找到所需的命令并执行操作。

因此,命令面板是一个非常实用的工具,特别适合当需要执行没有快捷键的命令,或者想查找你不确定是否存在的命令时使用。

新设备同步

当在一台电脑上设置好了自己喜欢的 VS Code 环境后,如果换了一台新电脑,不想再重新配置一遍。这时,VS Code的设置同步功能就派上用场了。

通过设置同步功能,可以将一台电脑上的所有配置都保存下来。然后,在新的电脑上登录账号,开启设置同步功能,就可以让新电脑应用上与之前完全相同的设置。这样,不需要再花时间重新调整和配置所有的设置了。

禁用预览

在 VS Code 中,当打开一个文件后,立即打开另一个文件而没有编辑第一个文件时,第一个文件就会被替换掉。VS Code只是在选择文件时预览它们,所以一旦点击另一个文件,之前的文件就会消失。

可以在设置中搜索“Editor: Enable Preview”,取消勾选即可。这样,当打开一个文件后,即使打开了另一个文件,之前的文件也会保留在编辑器中,而不会自动关闭。这样,可以方便地在多个文件之间进行切换和比较。

除此之外,如果想在某些情况下时预览文件,而有些情况是固定文件。可以在 Tab 栏双击需要固定的文件,这样这个文件就被固定了,不会被替换掉。

快速跳到代码行

可以使用Ctrl + G 快捷键实现代码行的快速跳转。使用这个快捷键,会弹出一个输入框,可以在其中输入要跳转的行号。输入行号后,按回车键,编辑器将会直接跳转到指定的行数处。这样就能快速地导航到代码的特定行,而不需要手动滚动查找。

平滑光标打字

VS Code有一个称为"平滑光标"的功能,它可以在光标移动时产生平滑的动画效果。这让打字感觉更加流畅和精致,并且在我们浏览代码行并将光标放置在不同位置时,给予我们更平滑、更自然的感觉。

要打开平滑光标功能,可以在命令面板中打开设置界面,并搜索 "Editor: Cursor Smooth Caret Animation" ,打开该设置即可。

多光标编辑

多光标编辑功能允许我们在不同的位置同时编辑多个光标所在的文本,从而快速地进行批量操作。例如,我们可以一次性在多行代码中插入同样的内容,或者同时删除多处重复的文本,以加快编辑的效率。

在编辑时,至少会有一个光标,可以使用"Alt + 单击"的方式添加更多的光标。

还可以使用 Ctrl + Alt + Down 或 Ctrl + Alt + Up 快捷键轻松地在当前行上方或下方添加光标。



Tags:VS Code   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
十个极大提高开发效率的 VS Code 技巧!
本文来分享 10 个极大提高开发效率的 VS Code 技巧!在VS Code中,可以在设置中搜索" Editor: Wrap Tabs"来实现选项卡换行的功能。本文来分享 10 个极大提高开发效率的 VS Code...【详细内容】
2023-09-07  Search: VS Code  点击:(194)  评论:(0)  加入收藏
微软推出 VS Code 用 Unity 开发工具包,助力跨平台软件游戏开发
IT之家 8 月 4 日消息,微软日前针对 VS Code,推出了一款跨 Windows、macOS 和 Linux 平台的 Unity 开发工具包,该工具包基于微软此前于 6 月推出的 C# 开发工具包和 C# 扩展插...【详细内容】
2023-08-04  Search: VS Code  点击:(305)  评论:(0)  加入收藏
VS Code 的 六个优秀 ChatGPT 扩展插件
你在通过网络聊天向 ChatGPT 寻求编程问题的解答是正确的。但是频繁在 VS Code 和聊天之间切换可能会分散注意力。请记住,在任何任务中,每一毫秒都很重要。好消息是,你可以通过...【详细内容】
2023-06-05  Search: VS Code  点击:(360)  评论:(0)  加入收藏
VS Code - Vim 插件自动切换输入法
前言: 在使用 Linux 的过程中,vim 是一个不错的编辑器,以至于多数人将其用成了习惯,在没有 vim 的环境下还是习惯用 vim 的快捷键来编辑文本。所以便有开发者们为众多的 IDE 和...【详细内容】
2022-06-05  Search: VS Code  点击:(356)  评论:(0)  加入收藏
解锁 VS Code 更多可能性,轻松入门 WebView
作者:HelloGitHub-小夏说起 VS Code 大家普遍印象应该都差不多是这样:不就是个编辑器嘛,最主要的还是 coding 的快感咯。里面很多功能都应该是围绕如何提高 coding 效率、减少...【详细内容】
2021-09-01  Search: VS Code  点击:(290)  评论:(0)  加入收藏
▌简易百科推荐
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(5)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(12)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(8)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(5)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(10)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(8)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(11)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(12)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(4)  评论:(0)  加入收藏
Kubernetes 究竟有没有 LTS?
从一个有趣的问题引出很多人都在关注的 Kubernetes LTS 的问题。有趣的问题2019 年,一个名为 apiserver LoopbackClient Server cert expired after 1 year[1] 的 issue 中提...【详细内容】
2024-03-15  云原生散修  微信公众号  Tags:Kubernetes   点击:(6)  评论:(0)  加入收藏
站内最新
站内热门
站内头条