资讯专栏INFORMATION COLUMN

21 个VSCode 快捷键,让代码更快,更有趣

elina / 1748人阅读

摘要:在这篇文章中,我将列出我最喜欢的快捷键,这些快捷键让我更快的编写代码,也让编码变得更有趣,以下是个快捷键,分享给你。打开键盘快捷键或,搜索。在中,启动性能是很重要的。逐个选择文本可以通过快捷键右箭头右箭头和左箭头左箭头逐个选择文本。

为了保证的可读性,本文采用意译而非直译。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

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

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

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

1. 一次搜索所有文件的文本
Windows: Ctrl + Shift + F 
Mac: Command + Shift + F

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

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

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

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

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

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

红色:

紫色

黄色

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

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

3.进程资源管理器

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

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

是不是看起来很熟悉?

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

4.Expand Bracket Selection

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

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

我发现这个功能在想要找到 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来查看所有你安装的正在运行的插件。

9. 重新加载

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

Windows: Ctrl + Alt + R
Mac: Control + Option + R
10. 将选项卡交换到不同的组

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

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

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

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

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

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

fn键+左方向键是HOME

fn键+右方向键是END

fn+上方向键是page up

fn+下方向键是page down

12.删除上一个单词

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

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

13. 启动性能

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

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

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

14.逐个选择文本

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

15. 重复的行

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

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

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

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

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

18. 向上/向下移动一行

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

19. 删除一行

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

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

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

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

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

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

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

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

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

关注公众号,后台回复福利,即可看到福利,你懂的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105859.html

相关文章

  • 平时积累的前端资源,持续新中。。。

    本文收集学习过程中使用到的资源。 持续更新中…… 项目地址 https://github.com/abc-club/f... 目录 vue react react-native Weex typescript Taro nodejs 常用库 css js es6 移动端 微信公众号 小程序 webpack GraphQL 性能与监控 高质文章 趋势 动效 数据结构与算法 js core 代码规范...

    acrazing 评论0 收藏0
  • 前端周刊第55期:10X 程序员?

    摘要:本文作者王仕军,商业转载请联系作者获得授权,非商业转载请注明出处。想知道我接下来会写些什么欢迎订阅我的掘金专栏或知乎专栏前端周刊让你在前端领域跟上时代的脚步。 showImg(https://segmentfault.com/img/remote/1460000009407536?w=592&h=314); 共 2127 字,读完需 4 分钟。我本周读到 1 篇比较有趣的文章叫做《Th...

    KaltZK 评论0 收藏0
  • 实录分享&视频 | 微软Visual Studio Code是这样支持Docker的

    摘要:分享嘉宾是来自微软云计算事业部的高级软件开发工程师刘鹏。是微软开源的一款开发工具,它针对做了许多编译和命令上的支持。今天主要向大家介绍一下微软去年推出的一个,以及对的一些支持。年他加入微软,从事开发的工作。 本文是数人云分布式架构的开源组件大选Meetup的实录分享。分享嘉宾是来自微软云计算事业部的高级软件开发工程师刘鹏。Visual Studio Code是微软开源的一款开发工具,它...

    leoperfect 评论0 收藏0
  • VS Code上手与超实用插件安利

    摘要:软件跨平台支持以及,运行流畅,可谓是微软的良心之作微软有这个宇宙最强,自然也不会弱宇宙最强编辑器说到代码编辑器,我们有必要提一提还有。 原文链接:VS Code上手与超实用插件安利 工欲善其事必先利其器 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号...

    miracledan 评论0 收藏0
  • 如何优雅地使用 VSCode 来编辑 vue 文件?

    摘要:注本文首发在我的个人博客最近有个项目使用了,本来一直使用的是来进行开发,可是遇到了很多问题。此外,还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。,终于基本搞定了,可以愉快地开发应用了。 注:本文首发在 我的个人博客 最近有个项目使用了 Vue.js ,本来一直使用的是 PHPStorm 来进行开发,可是遇到了很多问题。 后来,果断放弃收费的 PHPStorm ,改用 vsco...

    pekonchan 评论0 收藏0

发表评论

0条评论

elina

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<