- 作者:梧忌
- 來源:淘系前端團隊
經常幫一些同學 One-on-One 地解決問題,在看部分同學使用 VS Code 的時候,有些蹩腳,實際上一些有用的技巧能夠提高我們的日常工作效率。
一、重構代碼
VS Code 提供了一些快速重構代碼的操作,例如:
將一整段代碼提取為函數:選擇要提取的源代碼片段,然后單擊做成槽中的燈泡查看可用的重構操作。代碼片段可以被提取到一個新方法中,或者在不同的范圍內(當前閉包、當前函數內、當前類中、當前文件內)提取到一個新函數中。在提取重構期間,VS Code 會引導為該函數進行命名。
將表達式提取到常量:為當前選定的表達式創(chuàng)建新的常量。
移動到新的文件:將指定的函數移動到新的文件,VS Code 將自動命名并創(chuàng)建文件,且在當前文件內引入新的文件。
轉換導出方式:export const name
或者 export default
。
合并參數:將函數的多個參數合并為單個對象參數:
參考: 重構操作 、JS/TS 重構操作
二、自定義視圖布局
VS Code 的布局系統(tǒng)非常靈活,可以在工作臺上的活動欄、面板中移動視圖。
參考:重新排列視圖
三、快速調試代碼
在 VS Code 內調試 JS/TS 代碼非常簡單,只需要使用 Debug: Open Link
命令即可。這在調試前端或 Node 項目時非常有用,這類型的項目通常會啟動一個本地服務,這時候只需要將本地服務地址填寫到 Debug: Open Link
輸入框中即可。
參考:Debug
四、查看和更新符號的引用
查看符號的引用、快速修改引用的上下文:例如,快速預覽某個函數在哪些地方被調用了及其調用時上下文,還可以在預覽視圖中更新調用上下文的代碼。
重命名符號及其引用:接著上面的例子,如果想更新函數名以及所有調用,怎么實現?按 F2
鍵,然后鍵入所需的新名稱,再按 Enter
鍵進行提交。符號的所有引用都將被重命名,該操作還是跨文件的。
參考:Peek 、Rename Symbol
五、符號導航
在查看一個長文件的時候,代碼定位會是非常痛苦的事情。一些開發(fā)者會使用 VS Code 的小地圖,但其實還有更便捷的方法:可以使用 ??O
快捷鍵喚起符號導航面板,在當前編輯的文件中通過符號快速定位代碼。在輸入框中鍵入字符可以進行篩選,在列表中通過箭頭來進行上下導航。這種方式對于 Markdown 文件也非常友好,可以通過標題來快速導航。
參考:Go to Symbol
六、拆分編輯器
當對內容特別多的文件進行編輯的時候,經常需要在上下文中進行切換,這時候可以通過拆分編輯器來使用兩個編輯器更新同一個文件:按下快捷鍵 ?\
將活動編輯器拆分為兩個。
可以繼續(xù)無盡地拆分編輯器,通過拖拽編輯器組的方式排列編輯器視圖。
七、重命名終端
VS Code 提供了集成終端,可以很方便地快速執(zhí)行命令行任務。用得多了經常會打開多個終端,這時候給終端命名可以提高終端定位的效率。
八、Git 操作
VS Code 內置了 Git 源代碼管理功能,提供了一些便捷的 Git 操作方式。例如:
解決沖突:VS Code 會識別合并沖突,沖突的差異會被突出顯示,并且提供了內聯的操作來解決沖突。
暫存或撤銷選擇的代碼行:在編輯器內可以針對選擇的行來撤銷修改、暫存修改、撤銷暫存。
九、搜索結果快照
VS Code 提供了跨文件搜索功能,搜索結果快照可以提供更多的搜索結果的信息,例如代碼所在行碼、搜索關鍵字的上下文,并且可以對搜索結果進行編輯和保存。
十、可視化搭建頁面
在 VS Code 中可以通過可視化搭建的方式生成 Web 頁面,這是通過安裝 VS Code 的 Iceworks 插件實現的。安裝插件后,通過 ??P
喚起命名面板,在命令面板中輸入『可視化搭建』即可喚起可視化搭建界面,在界面內通過選擇網頁元素、進行拖拽布局、設置元素樣式和屬性來搭建頁面,最后點擊『生成代碼』就可以生成 React 代碼。