讓你 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
在新編輯器打開文件
編輯時快速刪除、複製、移動行
全局搜索文件、跳轉到某行
快速切換大小寫
禪模式

熟悉了這些功能的使用，相信會給咱們平常開發提高一些效率，學習下天天寫代碼的工具的使用技巧仍是挺有意義的。