让你 vscode 写代码效率更高的技巧

vscode 是咱们写代码经常使用的编辑器，它的功能不少，但其实咱们有不少功能都没用到，这篇文章就是想梳理下那些可能你不知道的可是却对效率提升颇有帮助的一些技巧。git

包括：npm

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

一键执行 npm scripts

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

vscode 会扫描全部的 npm scripts，而后列出来，直接点击 run 就会打开 terminal 来跑，并且高版本 vscode 还能够直接 debug 来跑。markdown

根本不须要本身输入 npm run xxx。编辑器

在侧栏打开文件

当打开文件的时候，默认会在当前编辑器打开，若是想新开一个编辑器打开呢？这时候能够按住 option 再点击文件，就会新开一个编辑器打开文件了。工具

由于默认 vscode 都是在当前编辑器打开新文件，若是不知道按住 option 点击能够新开编辑器，仍是挺麻烦的事情。学习

更强大的搜索

搜索这个面板有个按钮可能不少同窗都没注意到过，点击以后会打开搜索页面来搜索，能够预览的搜索结果更丰富，行数更多。spa

好比我搜索一个 @babel/core：插件

看，是否是比在左侧那个小框里显示的更多。命令行

对比一下就能够看出来，仍是在右边搜索结果更清晰一些，由于会显示多行。

文件 diff 显示目录信息

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

这时候其实能够切换成 tree view 的，显示目录树。

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

编辑器一键预览 markdown

markdown 须要安装插件么？不须要，vscode 自己就内置了这个功能。

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

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

编辑区一键 diff

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

当改了文件内容的时候，能够点击编辑区右上角的按钮，直接打开 diff，可能不少同窗都没注意到这些按钮，但实际上是颇有用的。

再次点击就能够回到文件编辑状态

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

diff 视图快速在 diff 之间跳转

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

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

快速搜索功能入口

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

禅模式

vscode 提供了禅模式（zen mode），可让你专一于写代码。

先按 command + k 再按 z 就能够进入禅模式，再按一次退出禅模式。

禅模式下只显示编辑区的信息，而且会全屏，看不到其余的东西，写代码能更专一。

编辑快捷键

编辑器最主要的功能仍是编辑，但其实有不少 vscode 的请打编辑功能你们可能没有过，我来罗列一下。

行上下移动/复制

若是把一行内容上移下移怎么作？

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

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

快速删除行

咱们知道了如何快速复制行，那快速删除行呢？

按 command + shift + k 就行了。

若是删除多行，那么先选中，再按 command + shift + k。

多光标同时编辑

同时修改多个地方的内容？按住 option 点击要修改的地方就能够了。

若是是上下行的同一位置呢？那就 option + command + 上/下，这样就是添加多行的同一位置的光标。

comand + shift + p 相关

这多是你们都知道的一个快捷键，输入框中会有一个 > 表明后面是命令，但还有一些你们可能不知道。

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

好比直接按 ctrl + g，或者在输入框输入冒号就表明后面是跳转的行号，能够快速跳到某一行

固然搜索文件的时候也能够加冒号和行号，快速跳到该文件的那一行。

快速切换大小写

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

总结

本文梳理了 vscode 中那些能够提效的一些功能，你们可能没有注意到过。

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

熟悉了这些功能的使用，相信会给咱们平常开发提高一些效率，学习下天天写代码的工具的使用技巧仍是挺有意义的。