10 個(gè)你可能還不知道 VS Code 使用技巧（超實(shí)用?。?/h1>
大廠技術(shù) 高級(jí)前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
經(jīng)常幫一些同學(xué) One-on-One 地解決問題，在看部分同學(xué)使用 VS Code 的時(shí)候，有些蹩腳，實(shí)際上一些有用的技巧能夠提高我們的日常工作效率。
NO.1
一、重構(gòu)代碼
VS Code 提供了一些快速重構(gòu)代碼的操作，例如：
將一整段代碼提取為函數(shù)：選擇要提取的源代碼片段，然后單擊做成槽中的燈泡查看可用的重構(gòu)操作。代碼片段可以被提取到一個(gè)新方法中，或者在不同的范圍內(nèi)（當(dāng)前閉包、當(dāng)前函數(shù)內(nèi)、當(dāng)前類中、當(dāng)前文件內(nèi)）提取到一個(gè)新函數(shù)中。在提取重構(gòu)期間，VS Code 會(huì)引導(dǎo)為該函數(shù)進(jìn)行命名。
將表達(dá)式提取到常量：為當(dāng)前選定的表達(dá)式創(chuàng)建新的常量。
移動(dòng)到新的文件：將指定的函數(shù)移動(dòng)到新的文件，VS Code 將自動(dòng)命名并創(chuàng)建文件，且在當(dāng)前文件內(nèi)引入新的文件。
轉(zhuǎn)換導(dǎo)出方式：export const name 或者 export default。
合并參數(shù)：將函數(shù)的多個(gè)參數(shù)合并為單個(gè)對象參數(shù)：
參考： 重構(gòu)操作(https://code.visualstudio.com/docs/editor/refactoring)、JS/TS 重構(gòu)操作(https://code.visualstudio.com/Docs/languages/typescript#_refactoring)
NO.2
二、自定義視圖布局
VS Code 的布局系統(tǒng)非常靈活，可以在工作臺(tái)上的活動(dòng)欄、面板中移動(dòng)視圖。
參考：重新排列視圖(https://code.visualstudio.com/updates/v1_45?ref=codebldr#_dynamic-view-icons-and-titles)
NO.3
三、快速調(diào)試代碼
在 VS Code 內(nèi)調(diào)試 JS/TS 代碼非常簡單，只需要使用 Debug: Open Link 命令即可。這在調(diào)試前端或 Node 項(xiàng)目時(shí)非常有用，這類型的項(xiàng)目通常會(huì)啟動(dòng)一個(gè)本地服務(wù)，這時(shí)候只需要將本地服務(wù)地址填寫到 Debug: Open Link 輸入框中即可。
參考：Debug(https://code.visualstudio.com/docs/editor/debugging)
NO.4
四、查看和更新符號(hào)的引用
查看符號(hào)的引用、快速修改引用的上下文：例如，快速預(yù)覽某個(gè)函數(shù)在哪些地方被調(diào)用了及其調(diào)用時(shí)上下文，還可以在預(yù)覽視圖中更新調(diào)用上下文的代碼。
重命名符號(hào)及其引用：接著上面的例子，如果想更新函數(shù)名以及所有調(diào)用，怎么實(shí)現(xiàn)？按 F2 鍵，然后鍵入所需的新名稱，再按 Enter 鍵進(jìn)行提交。符號(hào)的所有引用都將被重命名，該操作還是跨文件的。
參考：Peek(https://code.visualstudio.com/docs/editor/editingevolved#_peek)、Rename Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol)
NO.5
五、符號(hào)導(dǎo)航
在查看一個(gè)長文件的時(shí)候，代碼定位會(huì)是非常痛苦的事情。一些開發(fā)者會(huì)使用 VS Code 的小地圖，但其實(shí)還有更便捷的方法：可以使用 ??O 快捷鍵喚起符號(hào)導(dǎo)航面板，在當(dāng)前編輯的文件中通過符號(hào)快速定位代碼。在輸入框中鍵入字符可以進(jìn)行篩選，在列表中通過箭頭來進(jìn)行上下導(dǎo)航。這種方式對于 Markdown 文件也非常友好，可以通過標(biāo)題來快速導(dǎo)航。
參考：Go to Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_go-to-symbol)
NO.6
六、拆分編輯器
當(dāng)對內(nèi)容特別多的文件進(jìn)行編輯的時(shí)候，經(jīng)常需要在上下文中進(jìn)行切換，這時(shí)候可以通過拆分編輯器來使用兩個(gè)編輯器更新同一個(gè)文件：按下快捷鍵 ?\ 將活動(dòng)編輯器拆分為兩個(gè)。
可以繼續(xù)無盡地拆分編輯器，通過拖拽編輯器組的方式排列編輯器視圖。
參考：Side by side editing(https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)
NO.7
七、重命名終端
VS Code 提供了集成終端，可以很方便地快速執(zhí)行命令行任務(wù)。用得多了經(jīng)常會(huì)打開多個(gè)終端，這時(shí)候給終端命名可以提高終端定位的效率。
參考：Rename terminal sessions(https://code.visualstudio.com/docs/editor/integrated-terminal#_rename-terminal-sessions)
NO.8
八、Git 操作
VS Code 內(nèi)置了 Git 源代碼管理功能，提供了一些便捷的 Git 操作方式。例如：
解決沖突：VS Code 會(huì)識(shí)別合并沖突，沖突的差異會(huì)被突出顯示，并且提供了內(nèi)聯(lián)的操作來解決沖突。
暫存或撤銷選擇的代碼行：在編輯器內(nèi)可以針對選擇的行來撤銷修改、暫存修改、撤銷暫存。
參考：Using Version Control in VS Code(https://code.visualstudio.com/docs/editor/versioncontrol)
NO.9
九、搜索結(jié)果快照
VS Code 提供了跨文件搜索功能，搜索結(jié)果快照可以提供更多的搜索結(jié)果的信息，例如代碼所在行碼、搜索關(guān)鍵字的上下文，并且可以對搜索結(jié)果進(jìn)行編輯和保存。
參考：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) 插件實(shí)現(xiàn)的。安裝插件后，通過 ??P 喚起命名面板，在命令面板中輸入『可視化搭建』即可喚起可視化搭建界面，在界面內(nèi)通過選擇網(wǎng)頁元素、進(jìn)行拖拽布局、設(shè)置元素樣式和屬性來搭建頁面，最后點(diǎn)擊『生成代碼』就可以生成 React 代碼。
參考：Iceworks 可視化搭建(https://ice.work/docs/iceworks/guide/visual-construction)
Node 社群
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
“分享、點(diǎn)贊、在看” 支持一波??
瀏覽
27
大廠技術(shù) 高級(jí)前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
經(jīng)常幫一些同學(xué) One-on-One 地解決問題，在看部分同學(xué)使用 VS Code 的時(shí)候，有些蹩腳，實(shí)際上一些有用的技巧能夠提高我們的日常工作效率。
NO.1
一、重構(gòu)代碼
VS Code 提供了一些快速重構(gòu)代碼的操作，例如：
將一整段代碼提取為函數(shù)：選擇要提取的源代碼片段，然后單擊做成槽中的燈泡查看可用的重構(gòu)操作。代碼片段可以被提取到一個(gè)新方法中，或者在不同的范圍內(nèi)（當(dāng)前閉包、當(dāng)前函數(shù)內(nèi)、當(dāng)前類中、當(dāng)前文件內(nèi)）提取到一個(gè)新函數(shù)中。在提取重構(gòu)期間，VS Code 會(huì)引導(dǎo)為該函數(shù)進(jìn)行命名。
將表達(dá)式提取到常量：為當(dāng)前選定的表達(dá)式創(chuàng)建新的常量。
移動(dòng)到新的文件：將指定的函數(shù)移動(dòng)到新的文件，VS Code 將自動(dòng)命名并創(chuàng)建文件，且在當(dāng)前文件內(nèi)引入新的文件。
轉(zhuǎn)換導(dǎo)出方式：export const name 或者 export default。
合并參數(shù)：將函數(shù)的多個(gè)參數(shù)合并為單個(gè)對象參數(shù)：
參考： 重構(gòu)操作(https://code.visualstudio.com/docs/editor/refactoring)、JS/TS 重構(gòu)操作(https://code.visualstudio.com/Docs/languages/typescript#_refactoring)
NO.2
二、自定義視圖布局
VS Code 的布局系統(tǒng)非常靈活，可以在工作臺(tái)上的活動(dòng)欄、面板中移動(dòng)視圖。
參考：重新排列視圖(https://code.visualstudio.com/updates/v1_45?ref=codebldr#_dynamic-view-icons-and-titles)
NO.3
三、快速調(diào)試代碼
在 VS Code 內(nèi)調(diào)試 JS/TS 代碼非常簡單，只需要使用 Debug: Open Link 命令即可。這在調(diào)試前端或 Node 項(xiàng)目時(shí)非常有用，這類型的項(xiàng)目通常會(huì)啟動(dòng)一個(gè)本地服務(wù)，這時(shí)候只需要將本地服務(wù)地址填寫到 Debug: Open Link 輸入框中即可。
參考：Debug(https://code.visualstudio.com/docs/editor/debugging)
NO.4
四、查看和更新符號(hào)的引用
查看符號(hào)的引用、快速修改引用的上下文：例如，快速預(yù)覽某個(gè)函數(shù)在哪些地方被調(diào)用了及其調(diào)用時(shí)上下文，還可以在預(yù)覽視圖中更新調(diào)用上下文的代碼。
重命名符號(hào)及其引用：接著上面的例子，如果想更新函數(shù)名以及所有調(diào)用，怎么實(shí)現(xiàn)？按 F2 鍵，然后鍵入所需的新名稱，再按 Enter 鍵進(jìn)行提交。符號(hào)的所有引用都將被重命名，該操作還是跨文件的。
參考：Peek(https://code.visualstudio.com/docs/editor/editingevolved#_peek)、Rename Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol)
NO.5
五、符號(hào)導(dǎo)航
在查看一個(gè)長文件的時(shí)候，代碼定位會(huì)是非常痛苦的事情。一些開發(fā)者會(huì)使用 VS Code 的小地圖，但其實(shí)還有更便捷的方法：可以使用 ??O 快捷鍵喚起符號(hào)導(dǎo)航面板，在當(dāng)前編輯的文件中通過符號(hào)快速定位代碼。在輸入框中鍵入字符可以進(jìn)行篩選，在列表中通過箭頭來進(jìn)行上下導(dǎo)航。這種方式對于 Markdown 文件也非常友好，可以通過標(biāo)題來快速導(dǎo)航。
參考：Go to Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_go-to-symbol)
NO.6
六、拆分編輯器
當(dāng)對內(nèi)容特別多的文件進(jìn)行編輯的時(shí)候，經(jīng)常需要在上下文中進(jìn)行切換，這時(shí)候可以通過拆分編輯器來使用兩個(gè)編輯器更新同一個(gè)文件：按下快捷鍵 ?\ 將活動(dòng)編輯器拆分為兩個(gè)。
可以繼續(xù)無盡地拆分編輯器，通過拖拽編輯器組的方式排列編輯器視圖。
參考：Side by side editing(https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)
NO.7
七、重命名終端
VS Code 提供了集成終端，可以很方便地快速執(zhí)行命令行任務(wù)。用得多了經(jīng)常會(huì)打開多個(gè)終端，這時(shí)候給終端命名可以提高終端定位的效率。
參考：Rename terminal sessions(https://code.visualstudio.com/docs/editor/integrated-terminal#_rename-terminal-sessions)
NO.8
八、Git 操作
VS Code 內(nèi)置了 Git 源代碼管理功能，提供了一些便捷的 Git 操作方式。例如：
解決沖突：VS Code 會(huì)識(shí)別合并沖突，沖突的差異會(huì)被突出顯示，并且提供了內(nèi)聯(lián)的操作來解決沖突。
暫存或撤銷選擇的代碼行：在編輯器內(nèi)可以針對選擇的行來撤銷修改、暫存修改、撤銷暫存。
參考：Using Version Control in VS Code(https://code.visualstudio.com/docs/editor/versioncontrol)
NO.9
九、搜索結(jié)果快照
VS Code 提供了跨文件搜索功能，搜索結(jié)果快照可以提供更多的搜索結(jié)果的信息，例如代碼所在行碼、搜索關(guān)鍵字的上下文，并且可以對搜索結(jié)果進(jìn)行編輯和保存。
參考：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) 插件實(shí)現(xiàn)的。安裝插件后，通過 ??P 喚起命名面板，在命令面板中輸入『可視化搭建』即可喚起可視化搭建界面，在界面內(nèi)通過選擇網(wǎng)頁元素、進(jìn)行拖拽布局、設(shè)置元素樣式和屬性來搭建頁面，最后點(diǎn)擊『生成代碼』就可以生成 React 代碼。
參考：Iceworks 可視化搭建(https://ice.work/docs/iceworks/guide/visual-construction)
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
“分享、點(diǎn)贊、在看” 支持一波??