本篇文章給大家分享一下你可能不知道的vscode小技巧蒙揣，它能夠讓你寫代碼效率更高悔醋，可以幫你提高開放效率妨蛹，快來收藏吧魂务！

image

vscode 是我們寫代碼常用的編輯器，它的功能很多卡骂，但其實(shí)我們有很多功能都沒用到，這篇文章就是想梳理下那些可能你不知道的但是卻對(duì)效率提高很有幫助的一些技巧形入∪纾【推薦學(xué)習(xí)：《vscode教程》】

包括：

• 一鍵執(zhí)行 npm scripts
• 一鍵 diff、預(yù)覽
• 在新頁面搜索
• git 視圖顯示目錄樹
• 在新編輯器打開文件
• 編輯時(shí)快速刪除亿遂、復(fù)制浓若、移動(dòng)行
• 全局搜索文件、跳轉(zhuǎn)到某行
• 快速切換大小寫

一鍵執(zhí)行 npm scripts

執(zhí)行 npm scripts 需要在命令行蛇数？那是你沒用過 vscode 自帶的這個(gè)功能挪钓。

1.png

vscode 會(huì)掃描所有的 npm scripts，然后列出來耳舅，直接點(diǎn)擊 run 就會(huì)打開 terminal 來跑诵原，而且高版本 vscode 還可以直接 debug 來跑。

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

在側(cè)欄打開文件

當(dāng)打開文件的時(shí)候绍赛，默認(rèn)會(huì)在當(dāng)前編輯器打開蔓纠，如果想新開一個(gè)編輯器打開呢？這時(shí)候可以按住 option 再點(diǎn)擊文件吗蚌，就會(huì)新開一個(gè)編輯器打開文件了腿倚。

2.png

因?yàn)槟J(rèn) vscode 都是在當(dāng)前編輯器打開新文件，如果不知道按住 option 點(diǎn)擊可以新開編輯器蚯妇，還是挺麻煩的事情敷燎。

更強(qiáng)大的搜索

搜索這個(gè)面板有個(gè)按鈕可能很多同學(xué)都沒注意到過，點(diǎn)擊之后會(huì)打開搜索頁面來搜索箩言，可以預(yù)覽的搜索結(jié)果更豐富硬贯，行數(shù)更多。

3.png

比如我搜索一個(gè) @babel/core：

4.png

看陨收，是不是比在左側(cè)那個(gè)小框里顯示的更多饭豹。

5.png

對(duì)比一下就可以看出來，還是在右邊搜索結(jié)果更清晰一些务漩，因?yàn)闀?huì)顯示多行拄衰。

文件 diff 顯示目錄信息

當(dāng)我們改了多個(gè)文件的時(shí)候，會(huì)列在 source control 面板的列表里饵骨，有多個(gè)同名文件的時(shí)候特別不直觀翘悉。

6.png

這時(shí)候其實(shí)可以切換成 tree view 的，顯示目錄樹居触。

7.png

當(dāng)有多個(gè)同名文件的時(shí)候妖混，這樣會(huì)清晰的多：

8.png

編輯器一鍵預(yù)覽 markdown

markdown 需要安裝插件么？不需要轮洋，vscode 本身就內(nèi)置了這個(gè)功能源葫。

9.png

右上角有個(gè)預(yù)覽按鈕，點(diǎn)擊就會(huì)打開 markdown 預(yù)覽界面砖瞧，按住 option 再點(diǎn)擊息堂，則是同個(gè)窗口打開預(yù)覽。

預(yù)覽之后再點(diǎn)擊 show source 按鈕就會(huì)回去

10.png

編輯區(qū)一鍵 diff

快速切換 diff 和文件編輯視圖

當(dāng)改了文件內(nèi)容的時(shí)候块促，可以點(diǎn)擊編輯區(qū)右上角的按鈕荣堰，直接打開 diff，可能很多同學(xué)都沒注意到這些按鈕竭翠，但其實(shí)是很有用的振坚。

11.png

再次點(diǎn)擊就可以回到文件編輯狀態(tài)

12.png

看功能描述 open changes、open files斋扰，很明顯就是用于 diff 視圖和文件編輯視圖的切換渡八。

diff 視圖快速在 diff 之間跳轉(zhuǎn)

當(dāng)文件內(nèi)容特別多啃洋，比如好幾千行的時(shí)候，要找 diff 還是比較麻煩的屎鳍。其實(shí)根本不用自己去找宏娄，還容易漏，vscode 編輯器提供了上下按鈕逮壁，可以直接跳到上一個(gè) diff孵坚、下一個(gè) diff

13.png

一鍵預(yù)覽、一鍵 diff窥淆，這些都是能提高效率的功能卖宠。

快速搜索功能入口

知道 vscode 有某個(gè)功能但是不知道入口在哪？ 直接用 help下面的搜索框忧饭，搜索結(jié)果會(huì)直接標(biāo)出來在哪個(gè)菜單下有什么按鈕扛伍。

14.png

編輯快捷鍵

編輯器最主要的功能還是編輯，但其實(shí)有很多 vscode 的請(qǐng)打編輯功能大家可能沒有過词裤，我來羅列一下刺洒。

行上下移動(dòng)/復(fù)制

如果把一行內(nèi)容上移下移怎么做？

15.png

手動(dòng)剪切粘貼的效率太低了亚斋，不如試下 option + 上/下 的快捷鍵，快速把一行內(nèi)容上下移動(dòng)攘滩。

移動(dòng)的時(shí)候想復(fù)制呢帅刊？再按住 shift 就行了。

16.png

快速刪除行

我們知道了如何快速復(fù)制行漂问，那快速刪除行呢赖瞒？

按 command + shift + k 就好了。

如果刪除多行蚤假，那么先選中栏饮，再按 command + shift + k。

多光標(biāo)同時(shí)編輯

同時(shí)修改多個(gè)地方的內(nèi)容磷仰？按住 option 點(diǎn)擊要修改的地方就可以了袍嬉。

17.png

如果是上下行的同一位置呢？那就 option + command + 上/下灶平，這樣就是添加多行的同一位置的光標(biāo)伺通。

18.png

comand + shift + p 相關(guān)

這可能是大家都知道的一個(gè)快捷鍵，輸入框中會(huì)有一個(gè) > 代表后面是命令逢享，但還有一些大家可能不知道罐监。

19.png

比如直接 command + p，不按 shift瞒爬，這時(shí)候就是搜索文件弓柱。

20.png

比如直接按 ctrl + g沟堡，或者在輸入框輸入冒號(hào)就代表后面是跳轉(zhuǎn)的行號(hào)，可以快速跳到某一行

21.png

當(dāng)然搜索文件的時(shí)候也可以加冒號(hào)和行號(hào)矢空，快速跳到該文件的那一行航罗。

22.png

快速切換大小寫

還有一個(gè)小功能，有個(gè)內(nèi)置的 upppercase妇多、lowercase 的切換功能伤哺，可以快速切換選中內(nèi)容的大小寫。

23.png

24.png

總結(jié)

本文梳理了 vscode 中那些可以提效的一些功能者祖，大家可能沒有注意到過立莉。

• 一鍵 diff、預(yù)覽
• 在新頁面搜索
• git 視圖顯示目錄樹
• 一鍵執(zhí)行 npm scripts
• 在新編輯器打開文件
• 編輯時(shí)快速刪除七问、復(fù)制蜓耻、移動(dòng)行
• 全局搜索文件、跳轉(zhuǎn)到某行
• 快速切換大小寫

熟悉了這些功能的使用械巡，相信會(huì)給我們?nèi)粘ｉ_發(fā)提升一些效率刹淌，學(xué)習(xí)下每天寫代碼的工具的使用技巧還是挺有意義的。

本文轉(zhuǎn)載自： https://www.php.cn/tool/vscode/480098.html

更多編程相關(guān)知識(shí)讥耗，請(qǐng)?jiān)L問：編程視頻Ｓ泄础！