关于前端:提高生产力的10个必备VS-Code技巧和窍门

6次阅读

共计 3103 个字符,预计需要花费 8 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的,咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群,一起找 bug,另外新版作图神器已上线 https://cube.waixingyun.cn/home

1. 时光轴性能:源代码掌控新纬度

谁不晓得 Git 和各种源代码管制工具的威力呢?这些工具让咱们可能轻松地追踪文件变动、回退到过来的版本。VS Code 的工夫线视图主动刷新,展现与以后文件关联的重要流动,包含 Git 提交、文件保留和测试运行等。

开展此视图以查看与以后文件相干的事件快照列表。这里包含文件保留以及文件被暂存的 Git 提交。

将鼠标悬停在快照我的项目上,即可查看 VS Code 创立快照的日期和工夫。

抉择一个快照我的项目,查看差别视图,显示快照工夫的文件与以后文件之间的更改。

2. 主动存储:辞别 Ctrl + S 的日子

不用再依赖 Ctrl + S 快捷键,主动保留性能在你编辑时实时保留更改。这样不仅节俭了工夫,也确保你始终应用的是最新版本的文件。

尽管它并不完满,但你须要衡量其中的利弊——这些利弊在这里失去了全面的笼罩。

应用 File > Auto Save 轻松启用此性能:

3. 命令面板:一站式操作核心

VS Code 中简直所有工作都能够通过“命令”来执行。这些命令涵盖文件操作、导航、编辑以及终端工作等,都是通过精心设计的。

命令让咱们在编辑器中实现工作,它们包含与文件相干的命令、导航命令、编辑命令和终端命令,每个命令都通过最佳设计,以加强你的编辑体验的不同方面。

所以,通过命令面板,咱们只需搜寻命令并抉择执行相干操作。要关上命令面板,请应用以下键盘快捷键:

Windows/Linux: Ctrl + Shift + P
Mac: Shift + Command+ P
Mac:Shift + Command + P

4. 文件快速访问:不再依赖鼠标

应用 Ctrl + P 快捷键能够疾速搜寻并关上我的项目中的指定文件,而 Ctrl + Tab 则让你轻松在已关上的文件之间切换。

按住 Ctrl 并按下 Tab 以在编辑器实例中循环浏览以后关上的文件列表

你甚至能够应用 Alt + LeftAlt + Right 来疾速在这些关上的文件之间切换。所有这些都是比应用光标更快的办法来拜访文件。

5. 疾速跳转:调试的速度之王

在调试时,跳转到指定行号比滚动查找更高效。用 Ctrl + G 键能够轻松做到这一点。

6. 一键删除:辞别繁琐操作

你当初曾经到了这一行,如果你想删除它怎么办?你会拖拽并选中文本而后按下删除键吗?你会不知疲倦地按下退格键直到每个字符都隐没吗?

或者,你会应用 Ctrl + Shift + K 快捷方式在几秒钟内疾速删除那些行和其余几十行吗?

7. 平滑光标:优雅的代码体验

VS Code 有一个平滑光标性能,当光标挪动时会有动画成果,就像在 MS Word 中一样。这使得打字感觉更晦涩和粗劣,同时在浏览代码行并将光标搁置在不同地位时,给咱们带来更平滑和天然的感觉。

要关上它,请在命令面板中关上设置界面,并搜寻“smoot caret”。

寻找 Editor: Cursor Smooth Caret Animation 设置,有 3 个可能的选项:

  • off: 没有晦涩的光标动画
  • explicit:只有在咱们明确将光标搁置在代码的某个地位时才会使其动画化
  • on:平滑的光标动画始终保持启用状态,包含在输出时

将其设置为 on 以取得残缺的视觉体验。

8. 代码丑化:一键格式化

快捷键 Shift + Alt + F 能够疾速格式化代码,与 Prettier 等扩大配合应用成果更佳。

是的,咱们须要应用 Format Document 命令来主动格式化代码,该命令能够在命令面板中轻松拜访。依据以后文件的语言,将应用特定的“默认”格式化程序来应用各种缩进、行长度、括号等规定来格式化代码。

尽管有一个相当不错的内置 JS/TS 格式化工具,但为了更弱小的解决方案,我强烈推荐应用 Prettier 扩大。

装置后,把它设置为默认格式化程序。当你应用手动保留而不是主动保留时,有一个性能您应该启用,以使格局设置变得更加容易:

Editor: Format On Save:“保留时格式化文件。必须有可用的格式化程序,文件不能在提早后保留,并且编辑器必须正在敞开”。默认状况下禁用。

所以,当你在保留文件时,VS Code 会主动应用以后默认的格式化程序对你的代码进行格式化,就像你在下面的演示中看到的那样。

当你进行主动保留时,每隔一段时间都要关上命令面板来进行格式化会变得很繁琐。这就是键盘快捷键的用处所在:

  • Windows:Shift + Alt + F
  • Mac:Shift + Option + F
  • Linux:Ctrl + Shift + I

我应用的是 Windows 零碎,集体不太喜爱这个默认的键盘快捷键;主动保留性能让我不得不时不时地进行格式化,而 Shift + Alt + F 这个组合键用久了也会让人感到痛苦。

所以我把它改成了 Ctrl + D, Ctrl + D – 一个更容易按下和记住的键盘快捷键组合,并且没有抵触的按键绑定。我倡议你也这样做。

9. 多光标编辑:反复工作的终结者

在我最早应用 VS Code 的日子里,多光标编辑是一个令人惊叹的时刻。它容许你在不同的地位搁置多个光标,并屡次删除或插入雷同的文本。这大大放慢了编辑速度,极大地提高了生产力,因为咱们能够通过疾速创立代码高效地实现反复的工作。

当然,在编辑时,总是至多有一个光标。应用 Alt + Click 来增加更多。

还能够应用 Ctrl + Alt + DownCtrl + Alt + Up 在以后行的上方或下方轻松增加光标。

还能够应用 Ctrl + Alt + DownCtrl + Alt + Up 在以后行的上方或下方轻松增加光标。

这些快捷方式别离调用 Add Cursor BelowAdd Cursor Above 命令。

10. 新建文件 / 文件夹:轻松组织我的项目构造

没有一个庄重的我的项目不须要创立新的文件夹和文件,如果有一种减速文件 / 文件夹创立的办法,节省下来的工夫将累积起来,为咱们提供显著的生产力晋升。

如果你始终在应用 VS Code 的新建文件和新建文件夹按钮来创立新的文件和文件夹,那么是有方法的。

不用不停地挪动鼠标来定位那些小按钮,你晓得吗?你只需双击资源管理器面板就能够创立一个新文件

要不要新建一个文件夹?嗯,没有文件的文件夹就什么都不是。当你创立一个新文件时,你能够轻松应用 / 字符来示意层级关系,并创立新的文件夹和子文件夹来包容该文件。

因为 AShift + A 显然是用于编码的键,我在这里蕴含了 when 值,以确保它们只在资源管理器窗格具备焦点且以后编辑器中没有流动光标时创立新文件 / 文件夹。

因而,要在打字时应用这些快捷键,您必须首先专一于资源管理器窗格;单击它或应用 Ctrl/Command + Shift + E

总结

Visual Studio Code 不仅仅是一个文本编辑器,它是一个弱小的工具,当把握之后,能够显著进步您的生产力并简化编码工作流程。咱们摸索的十个技巧只是冰山一角。当您持续应用 VS Code 时,您将发现许多其余性能和快捷方式,进一步晋升您的编码体验。所以,请持续摸索,一直学习,并记住:高效编码的要害不仅在于代码自身,还在于您用来编写代码的工具。

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
 0