這些你可能不知道的vscode小技巧，可幫你提高開發效率！

這篇文章跟大家分享一下你可能不知道的vscode小技巧，它能夠讓你寫程式碼效率更高，可以幫你提高開發效率，快來收藏吧！

vscode 是我們寫程式碼常用的編輯器，它的功能很多，但其實我們有很多功能都沒用到，這篇文章就是想梳理下那些可能你不知道的但是卻對效率提高很有幫助的一些技巧。 【推薦學習：《vscode教學》】

#包含：

• #一鍵執行npm scripts
• 一鍵diff、預覽
• 在新頁面搜尋
• git 檢視顯示目錄樹
• 在新編輯器開啟檔案
• 編輯時快速刪除、複製、移動行
• 全域搜尋檔、跳到某行
• 快速切換大小寫

#一鍵執行npm scripts

執行npm scripts需要在命令列？那是你沒用過 vscode 自帶的這個功能。

vscode 會掃描所有的 npm scripts，然後列出來，直接點擊 run 就會打開 terminal 來跑，而且高版本 vscode 還可以直接 debug 來跑。

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

在側邊欄打開檔案

當開啟檔案的時候，預設會在目前編輯器打開，如果想新開一個編輯器打開呢？這時候可以按住 option 再點選文件，就會新開一個編輯器開啟文件了。

因為預設 vscode 都是在目前編輯器開啟新文件，如果不知道按住 option 點擊可以新開編輯器，還是挺麻煩的事情。

更強大的搜尋

搜尋這個面板有個按鈕可能很多同學都沒注意到過，點擊之後會打開搜尋頁面來搜索，可以預覽的搜索結果更豐富，行數更多。

例如我搜尋一個@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 的請打編輯功能大家可能沒有過，我來羅列一下。

行上下移動/複製

如果把一行內容上移下移怎麼做？

手動剪下貼上的效率太低了，不如試下 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
• #在新編輯器開啟檔案
• 編輯時快速刪除、複製、移動行
• 全域搜尋檔案、跳到某行
• 快速切換大小寫

熟悉了這些功能的使用，相信會為我們日常開發提升一些效率，學習下每天寫程式碼的工具的使用技巧還挺有意義的。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是這些你可能不知道的vscode小技巧，可幫你提高開發效率！的詳細內容。更多資訊請關注PHP中文網其他相關文章！