包括:
一鍵執行 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 的,顯示目錄樹。
當有多個同名文件的時候,這樣會清晰的多:
編輯器一鍵預覽 markdownmarkdown 需要安裝插件麼?不需要,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 中那些可以提效的一些功能,大家可能沒有注意到過。
熟悉了這些功能的使用,相信會給我們日常開發提升一些效率,學習下每天寫代碼的工具的使用技巧還是挺有意義的。
- EOF -
覺得本文有幫助?請分享給更多人
推薦關注「算法愛好者」,修煉編程內功
點讚和在看就是最大的支持❤️