0

0

21个极大提高开发效率的VSCode快捷键

青灯夜游

青灯夜游

发布时间:2019-11-18 09:25:25

|

4161人浏览过

|

来源于segmentfault

转载

做为前端开发者来说,大都数都用过 vscode,并且也有很多是经常用的。但 vscode 的一些快捷键可能我们不知道,也比较少用,毕竟这很好,因此本文就列出一些快捷键方便大家学习与记忆。

21个极大提高开发效率的VSCode快捷键

在这篇文章中,我将列出我最喜欢的快捷键,这些快捷键让我更快的编写代码,也让编码变得更有趣,以下是21 个 VSCode 快捷键,分享给你。

注意:自己尝试的时候,Mac(17, pro) 与原文提供的快捷键盘不太一样,mac 对应的 Ctrl 要换成 command

1. 一次搜索所有文件的文本

Windows: Ctrl + Shift + F
Mac: Command + Shift + F

VSCode中我最喜欢的特性之一是能够在项目目录中的所有文件中搜索任何匹配的文本。

要使用此特性,可以按Ctrl + Shift + f打开视图,它将显示编辑器左侧的侧边栏:

1.png

输入查找的內容并回车,VS code 将提供与输入内容匹配的结果列表,如下所示:

2.png

你还可以同时规制每个搜索果文件中的所有匹配内容。如果你单击左边的这个小箭头,它将在下面弹出第二个输入框,可以在这里输入要替换的文本,同时单击右边出现的小框:

3.png

2.为 tabs 设置强调色(Material Theme)

你是否厌倦了每天看到相同的 tabs 底部颜色?可以使用 Material Theme 来扩展 VsCode 的主题,这样就可以为 tabs 设置不同的颜色。

红色:

4.png

紫色

5.png

黄色

6.png

有16种不同的颜色可供选择。

因此,如果胸有安装此扩展,打开的命令面板(Ctrl + Shift + P),选择 Material Theme: Set accent color并从列表中选择一个颜色,它将更改选项卡的下划线颜色,如下所示

21个极大提高开发效率的VSCode快捷键

3.进程资源管理器

你是否发现你的VsCode 编辑器有时有点慢?这时候你希望哪个进程在吃我们的内存?

好吧,如果你还不知道,VsCode 有一个进程资源管理器功能,如下所示:

7.png

是不是看起来很熟悉?

windows任务管理器中看到过这一点,在VsCode 中按Ctrl + Alt + Delete可以打开该任务管理器。

4.Expand Bracket Selection

打开键盘快捷键(Ctrl + Shift + P 或 command + Shift + p),搜索 Expand Bracket Selection

这是我需要花费一些时间才能发现的,因为我无法猜出该功能的名称。使用此功能可以自动选择整个块,从开始的大括号到结束。

21个极大提高开发效率的VSCode快捷键

我发现这个功能在想要找到 if/else 对应的结束块很有用。

5. 重新打开 关闭的编辑页面

Windows: Ctrl + Shift + T
Mac: command + Shift + T

当你处理一个文件很多的大型项目时,如果不小心关闭了一个页面,并且不得不在侧菜单中再次搜索它,这可能会有点令人沮丧。

现在,可以按 Ctrl + Shift + T 重新打开一个关闭的页面。

6. 通过匹配文本打开文件

Windows: Ctrl + T
Mac: command + T

说到搜索文件,你可以动态地搜索和打开文件。这是我最喜欢的特性之一,因为不需要手动单击目录来重新打开一个不再打开的文件。

7. 集成终端

Windows: Ctrl + Mac: control +

通过 Ctrl + `可以打开或关闭终端

8. 查看正在运行插件

你可以通过打开命令面板(Ctrl + Shift + P)并输入Show running extensions来查看所有你安装的正在运行的插件。

8.png

9. 重新加载

我个人认为这是 VsCode 最酷的特性之一。它允许你在重新加载编辑器时将窗口放在前面,同时具有与关闭和重新打开窗口相同的效果。

淘宝互刷平台刷信誉源码
淘宝互刷平台刷信誉源码

淘宝互刷平台刷信誉源码主要特性:1、系统采用国内著名CMS内核做为基础模块化开发,继承CMS原有强大功能之外,同时拓展任务模块、快递单模块、会员模块、信用评价模块等多个相关模块,支持生成HTML静态和动态ASP,有效的提高了系统的性能,不仅减轻服务器的负载提高搜索收录率,增加网站收录。2、系统主要由淘宝任务、天猫任务、京东任务、阿里任务、拼多多任务、收藏任务、流量任务、快递单生成与查询系统、信用评

下载

Windows: Ctrl + Alt + R
Mac: Control + Option + R

10. 将选项卡交换到不同的组

在我开发的过程中,我习惯在错误的选项卡组中使用选项卡。 我也希望避免尽可能多地使用我的鼠标来解决问题,因为这会让我把手从键盘上抬起来,我很懒,手一起想放键盘上。

幸运的是,VsCode 有一种方法可以通过按Ctrl + Alt +右箭头(Mac:Control + Option +右箭头)将标签移动到右侧的组,或者按Ctrl + Alt + 左箭头将标签转移到单独的标签组 (Mac:Control + Option +左箭头))将标签移动到左侧的组:

21个极大提高开发效率的VSCode快捷键

11.选择左侧/右侧的所有内容

有时你想要删除光标右侧或左侧的所有内容。 你可以选择光标右侧或左侧的所有内容。例如,要选择右侧或左侧的所有内容:

Windows: Ctrl + Shift + Home/End
Mac: command + Shift + Home/End

苹果笔记本没home键,可以用组合键实现

  • fn键+左方向键是HOME
  • fn键+右方向键是END
  • fn+上方向键是page up
  • fn+下方向键是page down

21个极大提高开发效率的VSCode快捷键

12.删除上一个单词

要删除前一个单词,可以按Ctrl + Backspace (Mac: option + delete)。这在你打错字的时候非常有用。

21个极大提高开发效率的VSCode快捷键

你可以在 VsCode 之外的任何地方使用它。

21个极大提高开发效率的VSCode快捷键

13. 启动性能

有时候,缺乏关于性能问题的详细信息是一件非常痛苦的事情,同时还要找出哪些有性能问题。

有时候,如果你足够幸运,你会找到一个工具,它能给你所有的答案。在VsCode 中,启动性能是很重要的。这就是为什么你能弹出一个有用的窗口,奇迹般地提供所有你需要的信息:

9.png

打开命令面板(Ctrl + Shift + P),搜索Startup Performance

14.逐个选择文本

可以通过快捷键Ctrl + Shift +右箭头(Mac: option + Shift +右箭头)和Ctrl + Shift +左箭头(Mac: option + Shift +左箭头)逐个选择文本。

15. 重复的行

一个非常强大和已知的功能是复制行。只需按 Shift + Alt + 向下箭头 (Mac: command + Shift + 向下箭头)

21个极大提高开发效率的VSCode快捷键

16.移至文件的开头/结尾

要使光标移到文件的第一行或最后一行,最快的方法是按Ctrl + Home (Mac: command + Home)键开头,然后按Ctrl + End (Mac: command + End)键结尾。

21个极大提高开发效率的VSCode快捷键

17. 批量替换当前文件中所有匹配的文本

可以选择任何一组文本,如果该选中文本出现多个,可以通过按Ctrl + F2 (Mac: command + F2)一次改所有出现的文本。

21个极大提高开发效率的VSCode快捷键

18. 向上/向下移动一行

Alt + 向上箭头(Mac: command+ 向上箭头)当前行向上移动,按Alt + 向下箭头(Mac: command+ 向下箭头))当前行向下移动。

21个极大提高开发效率的VSCode快捷键

19. 删除一行

有两种方法可以立即删除一行。

使用Ctrl + X剪切命令(Mac:command + X)来删除一行。

21个极大提高开发效率的VSCode快捷键

或者使用 Ctrl + Shift + K (Mac: command + Shift + K)命令。

21个极大提高开发效率的VSCode快捷键

20.将编辑器向左或向右移动

如果你像我一样,你可能会有一种无法控制的欲望,想要在一个组中重新排列选项卡,其中选项卡相互关联,左边的选项卡是比较重要文件,而右边的选项卡是相对不重要的文件。
通过 Ctrl+Shift+PgUp/PgDown(command + +Shift+PgUp/PgDown)向左/向右移动编辑器。

21个极大提高开发效率的VSCode快捷键

21. 复制光标向上或者向上批量添加内容

在 VsCode 中复制游标可以证明是最节省时间的特性。

21个极大提高开发效率的VSCode快捷键

Ctrl + Alt +向上箭头(Mac: Control + Option +向上箭头)将光标添加到上面,按Ctrl + Alt +向下箭头(Mac: Control + Option + 向下箭头)将光标添加到下面。

推荐教程:vscode教程

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

713

2023.08.22

数据库Delete用法
数据库Delete用法

数据库Delete用法:1、删除单条记录;2、删除多条记录;3、删除所有记录;4、删除特定条件的记录。更多关于数据库Delete的内容,大家可以访问下面的文章。

266

2023.11.13

drop和delete的区别
drop和delete的区别

drop和delete的区别:1、功能与用途;2、操作对象;3、可逆性;4、空间释放;5、执行速度与效率;6、与其他命令的交互;7、影响的持久性;8、语法和执行;9、触发器与约束;10、事务处理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

208

2023.12.29

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

524

2023.07.26

查看端口占用情况windows
查看端口占用情况windows

端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1059

2023.07.27

windows照片无法显示
windows照片无法显示

当我们尝试打开一张图片时,可能会出现一个错误提示,提示说"Windows照片查看器无法显示此图片,因为计算机上的可用内存不足",本专题为大家提供windows照片无法显示相关的文章,帮助大家解决该问题。

754

2023.08.01

windows查看端口被占用的情况
windows查看端口被占用的情况

windows查看端口被占用的情况的方法:1、使用Windows自带的资源监视器;2、使用命令提示符查看端口信息;3、使用任务管理器查看占用端口的进程。本专题为大家提供windows查看端口被占用的情况的相关的文章、下载、课程内容,供大家免费下载体验。

427

2023.08.02

windows无法访问共享电脑
windows无法访问共享电脑

在现代社会中,共享电脑是办公室和家庭的重要组成部分。然而,有时我们可能会遇到Windows无法访问共享电脑的问题。这个问题可能会导致数据无法共享,影响工作和生活的正常进行。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2343

2023.08.08

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

74

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.5万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 7.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号