0

0

这些你可能不知道的vscode小技巧,可帮你提高开发效率!

青灯夜游

青灯夜游

发布时间:2021-07-19 10:09:29

|

3600人浏览过

|

来源于掘金--zxg_神说要有光

转载

本篇文章给大家分享一下你可能不知道的vscode小技巧,它能够让你写代码效率更高,可以帮你提高开发效率,快来收藏吧!

这些你可能不知道的vscode小技巧,可帮你提高开发效率!

vscode 是我们写代码常用的编辑器,它的功能很多,但其实我们有很多功能都没用到,这篇文章就是想梳理下那些可能你不知道的但是却对效率提高很有帮助的一些技巧。【推荐学习:《vscode教程》】

包括:

  • 一键执行 npm scripts
  • 一键 diff、预览
  • 在新页面搜索
  • git 视图显示目录树
  • 在新编辑器打开文件
  • 编辑时快速删除、复制、移动行
  • 全局搜索文件、跳转到某行
  • 快速切换大小写

一键执行 npm scripts

执行 npm scripts 需要在命令行?那是你没用过 vscode 自带的这个功能。

1.png

vscode 会扫描所有的 npm scripts,然后列出来,直接点击 run 就会打开 terminal 来跑,而且高版本 vscode 还可以直接 debug 来跑。

根本不需要自己输入 npm run xxx。

在侧栏打开文件

当打开文件的时候,默认会在当前编辑器打开,如果想新开一个编辑器打开呢?这时候可以按住 option 再点击文件,就会新开一个编辑器打开文件了。

2.png

因为默认 vscode 都是在当前编辑器打开新文件,如果不知道按住 option 点击可以新开编辑器,还是挺麻烦的事情。

更强大的搜索

搜索这个面板有个按钮可能很多同学都没注意到过,点击之后会打开搜索页面来搜索,可以预览的搜索结果更丰富,行数更多。

3.png

比如我搜索一个 @babel/core:

4.png

看,是不是比在左侧那个小框里显示的更多。

5.png

对比一下就可以看出来,还是在右边搜索结果更清晰一些,因为会显示多行。

文件 diff 显示目录信息

当我们改了多个文件的时候,会列在 source control 面板的列表里,有多个同名文件的时候特别不直观。

6.png

这时候其实可以切换成 tree view 的,显示目录树。

7.png

当有多个同名文件的时候,这样会清晰的多:

8.png

编辑器一键预览 markdown

markdown 需要安装插件么?不需要,vscode 本身就内置了这个功能。

9.png

右上角有个预览按钮,点击就会打开 markdown 预览界面,按住 option 再点击,则是同个窗口打开预览。

预览之后再点击 show source 按钮就会回去

10.png

编辑区一键 diff

快速切换 diff 和文件编辑视图

当改了文件内容的时候,可以点击编辑区右上角的按钮,直接打开 diff,可能很多同学都没注意到这些按钮,但其实是很有用的。

11.png

再次点击就可以回到文件编辑状态

12.png

看功能描述 open changes、open files,很明显就是用于 diff 视图和文件编辑视图的切换。

diff 视图快速在 diff 之间跳转

当文件内容特别多,比如好几千行的时候,要找 diff 还是比较麻烦的。其实根本不用自己去找,还容易漏,vscode 编辑器提供了上下按钮,可以直接跳到上一个 diff、下一个 diff

VWO
VWO

一个A/B测试工具

下载

13.png

一键预览、一键 diff,这些都是能提高效率的功能。

快速搜索功能入口

知道 vscode 有某个功能但是不知道入口在哪? 直接用 help下面的搜索框,搜索结果会直接标出来在哪个菜单下有什么按钮。

14.png

编辑快捷键

编辑器最主要的功能还是编辑,但其实有很多 vscode 的请打编辑功能大家可能没有过,我来罗列一下。

行上下移动/复制

如果把一行内容上移下移怎么做?

15.png

手动剪切粘贴的效率太低了,不如试下 option + 上/下 的快捷键,快速把一行内容上下移动。

移动的时候想复制呢?再按住 shift 就行了。

16.png

快速删除行

我们知道了如何快速复制行,那快速删除行呢?

按 command + shift + k 就好了。

如果删除多行,那么先选中,再按 command + shift + k。

多光标同时编辑

同时修改多个地方的内容?按住 option 点击要修改的地方就可以了。

17.png

如果是上下行的同一位置呢?那就 option + command + 上/下,这样就是添加多行的同一位置的光标。

18.png

comand + shift + p 相关

这可能是大家都知道的一个快捷键,输入框中会有一个 > 代表后面是命令,但还有一些大家可能不知道。

19.png

比如直接 command + p,不按 shift,这时候就是搜索文件。

20.png

比如直接按 ctrl + g,或者在输入框输入冒号就代表后面是跳转的行号,可以快速跳到某一行

21.png

当然搜索文件的时候也可以加冒号和行号,快速跳到该文件的那一行。

22.png

快速切换大小写

还有一个小功能,有个内置的 upppercase、lowercase 的切换功能,可以快速切换选中内容的大小写。

23.png

24.png

总结

本文梳理了 vscode 中那些可以提效的一些功能,大家可能没有注意到过。

  • 一键 diff、预览
  • 在新页面搜索
  • git 视图显示目录树
  • 一键执行 npm scripts
  • 在新编辑器打开文件
  • 编辑时快速删除、复制、移动行
  • 全局搜索文件、跳转到某行
  • 快速切换大小写

熟悉了这些功能的使用,相信会给我们日常开发提升一些效率,学习下每天写代码的工具的使用技巧还是挺有意义的。

更多编程相关知识,请访问:编程视频!!

相关专题

更多
自建git服务器
自建git服务器

git服务器是目前流行的分布式版本控制系统之一,可以让多人协同开发同一个项目。本专题为大家提供自建git服务器相关的各种文章、以及下载和课程。

642

2023.07.05

git和svn的区别
git和svn的区别

git和svn的区别:1、定义不同;2、模型类型不同;3、存储单元不同;4、是否拥有全局版本号;5、内容完整性不同;6、版本库不同;7、克隆目录速度不同;8、分支不同。php中文网为大家带来了git和svn的相关知识、以及相关文章等内容。

528

2023.07.06

git撤销提交的commit
git撤销提交的commit

Git是一个强大的版本控制系统,它提供了很多功能帮助开发人员有效地管理和控制代码的变更,本专题为大家提供git 撤销提交的commit相关的各种文章内容,供大家免费下载体验。

265

2023.07.24

git提交错误怎么撤回
git提交错误怎么撤回

git提交错误撤回的方法:git reset head^:撤回最后一次提交,恢复到提交前状态。git revert head:创建新提交,内容与之前提交相反。git reset :使用提交的 sha-1 哈希撤回指定提交。交互式舞台区:标记要撤回的特定更改,然后提交,排除已撤回更改。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

550

2024.04.09

git怎么对比两个版本的文件内容
git怎么对比两个版本的文件内容

要对比两个版本的 git 文件,请使用 git diff 命令:git diff 比较工作树和暂存区之间的差异。git diff 比较两个提交或标签之间的差异。git diff 输出显示差异块,其中 + 表示添加的行,- 表示删除的行, 表示修改的行。可使用 gitkraken、meld、beyond compare 等可视化工具更直观地查看差异。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

513

2024.04.09

vscode
vscode

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

589

2023.06.30

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

221

2023.07.21

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

390

2024.03.14

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

1

2026.01.21

热门下载

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

精品课程

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

共34课时 | 2.6万人学习

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

共98课时 | 7.5万人学习

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

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