服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - 十个极大提高开发效率的 VS Code 技巧!

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

2023-09-07 11:39前端充电宝 编程技术

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

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

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

标签换行

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

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

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

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

Timeline 视图:本地源代码控制

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

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

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

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

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

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

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

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

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

自定义布局

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

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

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

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

自动保存

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

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

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

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

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

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

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

使用命令面板执行操作

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

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

  • Windows/Linux: 使用快捷键 Ctrl + Shift + P
  • Mac: 使用快捷键 Shift + Command + P

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

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

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

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

新设备同步

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

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

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

禁用预览

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

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

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

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

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

快速跳到代码行

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

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

平滑光标打字

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

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

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

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

多光标编辑

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

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

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

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

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

原文地址:https://mp.weixin.qq.com/s/k3yFCOXgR2EIqsU5HJdThA

延伸 · 阅读

精彩推荐
  • 编程技术如何熟练掌握多种编程语言

    如何熟练掌握多种编程语言

    学习一种新的编程语言很像学习说一种新的自然语言。但是,正如我确定我的许多双语和通俗的朋友会同意的那样,有时在两种或多种语言之间切换可能会...

    闻数起舞6162021-01-16
  • 编程技术前端性能优化笔记:性能优化体系与关键指标设定

    前端性能优化笔记:性能优化体系与关键指标设定

    本篇文章只是作为《前端性能优化笔记系列》文章的开篇,引导读者对于性能优化体系有个更好的认知,了解相关的指标和指标,因为学习性能优化。...

    前端万有引力4492022-01-11
  • 编程技术我就是那个35岁的Java程序员,我还健在

    我就是那个35岁的Java程序员,我还健在

    朋友,只要你是程序员,你一定知道996和“程序员35岁必死”的言论。这两个话题在互联网上的讨论一次比一次激烈。 ...

    今日头条3382020-12-02
  • 编程技术如何使用clion中配置ROS工程

    如何使用clion中配置ROS工程

    这篇文章主要介绍了如何使用clion中配置ROS工程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 ...

    Gavynlee5892020-08-19
  • 编程技术3分钟帮你理解常用的5种设计模式

    3分钟帮你理解常用的5种设计模式

    作为一个合格的程序员你一定听说过设计模式,设计模式有很多种,不用精通所有,至少得对常见的几种融会贯通。设计模式就相当于数学中的几何定理,...

    今日头条5302020-11-10
  • 编程技术Matlab使用fft画出信号频谱图的方法

    Matlab使用fft画出信号频谱图的方法

    这篇文章主要介绍了Matlab使用fft画出信号频谱图的方法,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需...

    非 常 道7442022-09-02
  • 编程技术VS Code 还是 Atom?你应该选择哪个

    VS Code 还是 Atom?你应该选择哪个

    如今,找到一个 好的开源代码编辑器 并不难,随便选择一个就可以了。如果你不能下定决心,想在 VS Code 和 Atom 之间进行一番比较和选择,这篇文章应该...

    Linux中国10032021-11-02
  • 编程技术聊一聊Typescript 高级技巧

    聊一聊Typescript 高级技巧

    用了一段时间的 typescript 之后,深感中大型项目中 typescript 的必要性,它能够提前在编译期避免许多 bug,如很恶心的拼写问题。而越来越多的 package 也开始...

    全栈成长之路9272021-08-04