經常幫一些同學 One-on-One 地解決問題，在看部分同學使用 VS Code 的時候，有些蹩腳，實際上一些有用的技巧能夠提高我們的日常工作效率。

NO.1

一、重構代碼

VS Code 提供了一些快速重構代碼的操作，例如：

將一整段代碼提取為函數：選擇要提取的源代碼片段，然后單擊做成槽中的燈泡查看可用的重構操作。代碼片段可以被提取到一個新方法中，或者在不同的范圍內（當前閉包、當前函數內、當前類中、當前文件內）提取到一個新函數中。在提取重構期間，VS Code 會引導為該函數進行命名。

將表達式提取到常量：為當前選定的表達式創建新的常量。

移動到新的文件：將指定的函數移動到新的文件，VS Code 將自動命名并創建文件，且在當前文件內引入新的文件。

轉換導出方式：export const name?或者?export default。

合并參數：將函數的多個參數合并為單個對象參數：

參考：?重構操作(https://code.visualstudio.com/docs/editor/refactoring)、JS/TS 重構操作(https://code.visualstudio.com/Docs/languages/typescript#_refactoring)

NO.2

二、自定義視圖布局

VS Code 的布局系統非常靈活，可以在工作臺上的活動欄、面板中移動視圖。

參考：重新排列視圖(https://code.visualstudio.com/updates/v1_45?ref=codebldr#_dynamic-view-icons-and-titles)

NO.3

三、快速調試代碼

在 VS Code 內調試 JS/TS 代碼非常簡單，只需要使用?Debug: Open Link?命令即可。這在調試前端或 Node 項目時非常有用，這類型的項目通常會啟動一個本地服務，這時候只需要將本地服務地址填寫到?Debug: Open Link?輸入框中即可。

參考：Debug(https://code.visualstudio.com/docs/editor/debugging)

NO.4

四、查看和更新符號的引用

查看符號的引用、快速修改引用的上下文：例如，快速預覽某個函數在哪些地方被調用了及其調用時上下文，還可以在預覽視圖中更新調用上下文的代碼。

重命名符號及其引用：接著上面的例子，如果想更新函數名以及所有調用，怎么實現？按?F2?鍵，然后鍵入所需的新名稱，再按?Enter?鍵進行提交。符號的所有引用都將被重命名，該操作還是跨文件的。

參考：Peek(https://code.visualstudio.com/docs/editor/editingevolved#_peek)、Rename Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol)

NO.5

五、符號導航

在查看一個長文件的時候，代碼定位會是非常痛苦的事情。一些開發者會使用 VS Code 的小地圖，但其實還有更便捷的方法：可以使用???O?快捷鍵喚起符號導航面板，在當前編輯的文件中通過符號快速定位代碼。在輸入框中鍵入字符可以進行篩選，在列表中通過箭頭來進行上下導航。這種方式對于 Markdown 文件也非常友好，可以通過標題來快速導航。

參考：Go to Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_go-to-symbol)

NO.6

六、拆分編輯器

當對內容特別多的文件進行編輯的時候，經常需要在上下文中進行切換，這時候可以通過拆分編輯器來使用兩個編輯器更新同一個文件：按下快捷鍵??\?將活動編輯器拆分為兩個。

可以繼續無盡地拆分編輯器，通過拖拽編輯器組的方式排列編輯器視圖。

參考：Side by side editing(https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)

NO.7

七、重命名終端

VS Code 提供了集成終端，可以很方便地快速執行命令行任務。用得多了經常會打開多個終端，這時候給終端命名可以提高終端定位的效率。

參考：Rename terminal sessions(https://code.visualstudio.com/docs/editor/integrated-terminal#_rename-terminal-sessions)

NO.8

八、Git 操作

VS Code 內置了 Git 源代碼管理功能，提供了一些便捷的 Git 操作方式。例如：

解決沖突：VS Code 會識別合并沖突，沖突的差異會被突出顯示，并且提供了內聯的操作來解決沖突。

暫存或撤銷選擇的代碼行：在編輯器內可以針對選擇的行來撤銷修改、暫存修改、撤銷暫存。

參考：Using Version Control in VS Code(https://code.visualstudio.com/docs/editor/versioncontrol)

NO.9

九、搜索結果快照

VS Code 提供了跨文件搜索功能，搜索結果快照可以提供更多的搜索結果的信息，例如代碼所在行碼、搜索關鍵字的上下文，并且可以對搜索結果進行編輯和保存。

參考：Search Editors(https://code.visualstudio.com/updates/v143#search-editors)

NO.10

十、可視化搭建頁面

在 VS Code 中可以通過可視化搭建的方式生成 Web 頁面，這是通過安裝 VS Code 的?Iceworks(https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks)?插件實現的。安裝插件后，通過???P?喚起命名面板，在命令面板中輸入『可視化搭建』即可喚起可視化搭建界面，在界面內通過選擇網頁元素、進行拖拽布局、設置元素樣式和屬性來搭建頁面，最后點擊『生成代碼』就可以生成 React 代碼。

參考：Iceworks 可視化搭建(https://ice.work/docs/iceworks/guide/visual-construction)

推薦閱讀

我在阿里招前端，我該怎么幫你？（文末有福利）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何做出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？

末尾

你好，我是若川，江湖人稱菜如若川，歷時一年只寫了一個學習源碼整體架構系列~(點擊藍字了解我)

1. 關注我的公眾號若川視野，回復"pdf" 領取前端優質書籍pdf

2. 我的博客地址：https://lxchuan12.gitee.io?歡迎收藏

3. 覺得文章不錯，可以點個在看呀^_^另外歡迎留言交流～

   

小提醒：若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點擊閱讀