分享少数人才了解的 VSCode 写代码效率更高的技巧

骑猪看日落 2022-08-31 00:53 14阅读 0赞

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

包括：

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

## 一键执行 npm scripts ##

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

![b9dd03f38f4ebb7292a8c2d8d7f82ff6.png][]

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

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

## 在侧栏打开文件 ##

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

![3bbf0ebf6857ae1cb8f180df468af219.png][]

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

## 更强大的搜索 ##

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

![7723baa0b1b72eea025de76e1a30ae19.png][]

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

![395b916365955283f9be51bdaf560017.png][]

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

![0d8f3d06f906163a5b166f97e5583902.png][]

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

## 文件 diff 显示目录信息 ##

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

![054f921f0cebb19f6a3d6f261a6942ad.png][]

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

![2ff4696149056ff1a127494f0ddfcd33.png][]

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

![3233333979e2ab4847e55ee4de663ca8.png][]

## 编辑器一键预览 markdown ##

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

![0444a08f16d2eb274186e0f0a260a8f0.png][]

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

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

![234ecaa853259a225626a91a8be5001d.png][]

## 编辑区一键 diff ##

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

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

![5edbc621f1767b542f7fff4e5e71bc7d.png][]

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

![0877ee7fbbe3b9b774183fcdd2323111.png][]

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

### diff 视图快速在 diff 之间跳转 ###

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

![84db18e80937d732fcb904a12c798b0d.png][]

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

## 快速搜索功能入口 ##

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

![0822d4856a8dbf149f5677af7286aba1.png][]

## 编辑快捷键 ##

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

### 行上下移动/复制 ###

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

![72fd8f15ee0ac03393b9c98c676af8e0.png][]

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

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

![a5856604687b4f0fd2adaadbf3490047.png][]

### 快速删除行 ###

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

按 command + shift + k 就好了。

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

### 多光标同时编辑 ###

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

![398e6c80e972b23ab355b779fe8fc8a7.png][]

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

![c76f7d8bcb6b21d534d7a66a8828be15.png][]

## comand + shift + p 相关 ##

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

![afb49063364b6e54b7e82ae1c93c0593.png][]

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

![d0aeb3a593cbc97e7b0eb8dc70c60f5b.png][]

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

![2320c550bd52ea723183ef5c691a5b24.png][]

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

![3050b78a2c1fcc3a2e353f48f1a37d9b.png][]

### 快速切换大小写 ###

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

![2efc0f96f06e176f3551839dfbab0db4.png][] ![1bdf0f92de580354bf67413033d9a497.png][]

## 总结 ##

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

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

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

[b9dd03f38f4ebb7292a8c2d8d7f82ff6.png]: /images/20220829/c077e68ea85c4f87acfe09c1f5435c26.png
[3bbf0ebf6857ae1cb8f180df468af219.png]: /images/20220829/d0f203edeb444f88bbed7ff7a238f0f0.png
[7723baa0b1b72eea025de76e1a30ae19.png]: /images/20220829/068d27e14f3b49a08227b26709389b3a.png
[395b916365955283f9be51bdaf560017.png]: /images/20220829/7a45495adc1e426ab509239f1a95f8ce.png
[0d8f3d06f906163a5b166f97e5583902.png]: /images/20220829/7e57f16394c145e0ab1683f483927a21.png
[054f921f0cebb19f6a3d6f261a6942ad.png]: /images/20220829/c9a3d825e62646f2bb5c4f9bc2c5e10b.png
[2ff4696149056ff1a127494f0ddfcd33.png]: /images/20220829/2872892eed674592a14360222913c1a6.png
[3233333979e2ab4847e55ee4de663ca8.png]: /images/20220829/178bed85ff0440ec8d10c1269f1a8437.png
[0444a08f16d2eb274186e0f0a260a8f0.png]: /images/20220829/c3d3064c22b146ed9707689f44e51bd5.png
[234ecaa853259a225626a91a8be5001d.png]: /images/20220829/7cd907ebb838480ca188477e9eff8424.png
[5edbc621f1767b542f7fff4e5e71bc7d.png]: /images/20220829/03b1e96d868a4fc4aa6a1db39a16b39c.png
[0877ee7fbbe3b9b774183fcdd2323111.png]: /images/20220829/47890a2c511045738c9ab5b41d3bc5be.png
[84db18e80937d732fcb904a12c798b0d.png]: /images/20220829/a1f0019f915e4cd8b0b20b8c646256cb.png
[0822d4856a8dbf149f5677af7286aba1.png]: /images/20220829/14185d2e897047c08c67a26ca1ea66b2.png
[72fd8f15ee0ac03393b9c98c676af8e0.png]: /images/20220829/d0b613522dff434dad1a19d4e30af3da.png
[a5856604687b4f0fd2adaadbf3490047.png]: /images/20220829/8d02116e67c4478586d25ca0cb634140.png
[398e6c80e972b23ab355b779fe8fc8a7.png]: /images/20220829/79455233440840319af26c2b7f7b1cb7.png
[c76f7d8bcb6b21d534d7a66a8828be15.png]: /images/20220829/e4d0af378ba344c1b1dd8203dd964a47.png
[afb49063364b6e54b7e82ae1c93c0593.png]: /images/20220829/e01e6f02a5b042d59a23fbf5cb34c53f.png
[d0aeb3a593cbc97e7b0eb8dc70c60f5b.png]: /images/20220829/bd57a9f1c1d74cb0a649b5f875155bae.png
[2320c550bd52ea723183ef5c691a5b24.png]: /images/20220829/49d058b305cd4a75b9235b7a9b8ffa65.png
[3050b78a2c1fcc3a2e353f48f1a37d9b.png]: /images/20220829/f0bb97ece77747d2b9bc4f7aa03cc700.png
[2efc0f96f06e176f3551839dfbab0db4.png]: https://img-blog.csdnimg.cn/img_convert/2efc0f96f06e176f3551839dfbab0db4.png
[1bdf0f92de580354bf67413033d9a497.png]: /images/20220829/52d09ff0132e4380b3386e853b071415.png