VS Code有哪些奇技淫巧？
點擊上方藍色“程序猿DD”，選擇“設為星標”
回復“資源”獲取獨家整理的學習資料！
前言
最近天氣變冷，就想著和以前的老友聚一聚，大家吃吃火鍋喝喝小酒，懷念當初一起加班編碼的日子。有位已經(jīng)退居二線不在一線開發(fā)崗位的老友跟我自嘲到，“現(xiàn)在剛?cè)肼毜哪贻p人都喜歡用VS Code,仿佛我這種喜歡用Eclipse的像老古董一樣~”。先不說這VS Code和Eclipse是否合適進行比較孰優(yōu)孰劣，現(xiàn)狀就是越來越多的人喜歡用VS Code，因為更輕便，對插件擴展的支持更豐富。很多人想必對VS Code都有自己的獨門使用訣竅，讓我們一起來看看知友們都有些什么奇技淫巧！
來自阿里巴巴淘系技術(shù)的10個非常好用的 VS Code 使用技巧（以下推薦整理自：https://www.zhihu.com/question/309112157/answer/1476287501）
一、重構(gòu)代碼
VS Code 提供了一些快速重構(gòu)代碼的操作，例如：將一整段代碼提取為函數(shù)：選擇要提取的源代碼片段，然后單擊做成槽中的燈泡查看可用的重構(gòu)操作。代碼片段可以被提取到一個新方法中，或者在不同的范圍內(nèi)（當前閉包、當前函數(shù)內(nèi)、當前類中、當前文件內(nèi)）提取到一個新函數(shù)中。在提取重構(gòu)期間，VS Code 會引導為該函數(shù)進行命名。
將表達式提取到常量：為當前選定的表達式創(chuàng)建新的常量。
移動到新的文件：將指定的函數(shù)移動到新的文件，VS Code 將自動命名并創(chuàng)建文件，且在當前文件內(nèi)引入新的文件。
轉(zhuǎn)換導出方式：export const name?或者?export default。
合并參數(shù)：將函數(shù)的多個參數(shù)合并為單個對象參數(shù)：
二、自定義視圖布局
VS Code 的布局系統(tǒng)非常靈活，可以在工作臺上的活動欄、面板中移動視圖
三、快速調(diào)試代碼
在 VS Code 內(nèi)調(diào)試 JS/TS 代碼非常簡單，只需要使用?Debug: Open Link?命令即可。這在調(diào)試前端或 Node 項目時非常有用，這類型的項目通常會啟動一個本地服務，這時候只需要將本地服務地址填寫到?Debug: Open Link?輸入框中即可。
四、查看和更新符號的引用
查看符號的引用、快速修改引用的上下文：例如，快速預覽某個函數(shù)在哪些地方被調(diào)用了及其調(diào)用時上下文，還可以在預覽視圖中更新調(diào)用上下文的代碼。
重命名符號及其引用：接著上面的例子，如果想更新函數(shù)名以及所有調(diào)用，怎么實現(xiàn)？按?F2?鍵，然后鍵入所需的新名稱，再按?Enter?鍵進行提交。符號的所有引用都將被重命名，該操作還是跨文件的。
五、符號導航
在查看一個長文件的時候，代碼定位會是非常痛苦的事情。一些開發(fā)者會使用 VS Code 的小地圖，但其實還有更便捷的方法：可以使用???O?快捷鍵喚起符號導航面板，在當前編輯的文件中通過符號快速定位代碼。在輸入框中鍵入字符可以進行篩選，在列表中通過箭頭來進行上下導航。這種方式對于 Markdown 文件也非常友好，可以通過標題來快速導航。
六、拆分編輯器
當對內(nèi)容特別多的文件進行編輯的時候，經(jīng)常需要在上下文中進行切換，這時候可以通過拆分編輯器來使用兩個編輯器更新同一個文件：按下快捷鍵??\?將活動編輯器拆分為兩個。
可以繼續(xù)無盡地拆分編輯器，通過拖拽編輯器組的方式排列編輯器視圖。
七、重命名終端
VS Code 提供了集成終端，可以很方便地快速執(zhí)行命令行任務。用得多了經(jīng)常會打開多個終端，這時候給終端命名可以提高終端定位的效率。
八、Git 操作
VS Code 內(nèi)置了 Git 源代碼管理功能，提供了一些便捷的 Git 操作方式。例如：解決沖突：VS Code 會識別合并沖突，沖突的差異會被突出顯示，并且提供了內(nèi)聯(lián)的操作來解決沖突。
暫存或撤銷選擇的代碼行：在編輯器內(nèi)可以針對選擇的行來撤銷修改、暫存修改、撤銷暫存。
九、搜索結(jié)果快照
VS Code 提供了跨文件搜索功能，搜索結(jié)果快照可以提供更多的搜索結(jié)果的信息，例如代碼所在行碼、搜索關(guān)鍵字的上下文，并且可以對搜索結(jié)果進行編輯和保存。
十、可視化搭建頁面
在 VS Code 中可以通過可視化搭建的方式生成 Web 頁面，這是通過安裝 VS Code 的 Iceworks((https://link.zhihu.com/?target=https%3A//marketplace.visualstudio.com/items%3FitemName%3Diceworks-team.iceworks)) 插件實現(xiàn)的。安裝插件后，通過???P?喚起命名面板，在命令面板中輸入『可視化搭建』即可喚起可視化搭建界面，在界面內(nèi)通過選擇網(wǎng)頁元素、進行拖拽布局、設置元素樣式和屬性來搭建頁面，最后點擊『生成代碼』就可以生成 React 代碼。
七步編程分享如下（以下推薦整理自：https://www.zhihu.com/question/309112157/answer/1580290447）
為了讓大家能夠更加清晰的了解VS Code，今天就來給大家介紹一些它的高效用法。
集成終端
在VS Code中，能夠直接打開終端。這使得，無論是調(diào)試代碼，還是執(zhí)行終端命令行工具，都無需切換窗口，避免一些時間的浪費。
要想使用VS Code終端，需要首先安裝它。安裝步驟非常簡單，只需要如下幾步：
1、 啟動VS Code
2、 shift+cmd+p打開命令面板，輸入shell command
3、點擊確認
這樣，就完成了VS Code集成終端的開發(fā)。
批量重命名
名稱，在開發(fā)過程中占據(jù)著至關(guān)重要的地位。函數(shù)名、類名、變量名....在編寫代碼過程中經(jīng)常會和各種名稱打交道。
重命名在這時候就會經(jīng)常被用到，如果一個變量名在代碼中出現(xiàn)了100次，逐個的手動修改顯然是很麻煩的。
通過快捷鍵shift+cmd+l能夠選擇代碼中所有出現(xiàn)的名稱，能夠批量重命名。
以重命名一次需要5秒來計算，這一項操作能夠介紹8分鐘左右。
多選模式
多行編輯在很多開發(fā)工具中都是支持的，因為，它的應用場景很多，而且很高效。
如果有多行相近的情況下，這一項功能是非常實用的，能夠同時修改多行、多個位置的內(nèi)容，避免重復勞動。
alt+click 每次點擊都會添加一個新的光標。
alt+cmd+down或alt+cmd+up將分別在下方或上方插入光標。
命令面板
VS Code的命令面板使VS Code完全可以僅通過鍵盤訪問。
鍵入shift+cmd+P將彈出命令面板，使你可以訪問VS Code的所有功能。
以下是一些最有用的命令的快捷方式：
1、cmd+P 將允許你通過輸入文件或符號的名稱來導航到任何文件或符號
2、 ctrl+tab 將帶你瀏覽打開的最后一組文件
3、 shift+cmd+P 將直接帶你進入編輯器命令
4、 shift+cmd+O 將允許你導航到文件中的特定符號
5、 ctrl+g 將允許你導航到文件中的特定行
快捷方式
快捷鍵往往會給使用者記憶方面帶來負擔，但是，如果經(jīng)常使用，把它融為自己的習慣，接下來就是提高效率的時候。
下面，就來介紹VS Code一些有用的快捷鍵。你不需要全部都記住，只需記住一些符合自己使用場景的即可。
導航快捷鍵
1、 shift+cmd+F 搜索
2、 shift+ctrl+G 源代碼管理
3、 cmd+shift+D 運行面板
4、 cmd+shift+X 擴展面板
5、 cmd+b 切換側(cè)欄可見性
6、 ctrl+cmd+w 切換標簽可見性
7、 cmd+j 使用終端，問題，輸出，調(diào)試控制臺切換打開的底部面板
常用快捷鍵
1、 alt+Z切換自動換行。如果文件中的行很長，并且需要查看所有內(nèi)容而無需格式化每一行。
2、 cmd+F 搜索當前文件
3、 alt+shift+left/alt+shift+right按詞選擇
4、 cmd+D 查找并選擇當前所選單詞的下一個匹配項。
5、 cmd+down/cmd+up將光標移到當前文件的結(jié)尾/開頭
6、 cmd+left/cmd+right將光標移到當前行的末尾
7、 alt+left/alt+right逐字移動光標
8、 ctrl+-/ctrl+shift+- 返回和前進
9、 shift+ctrl+cmd+left/shift+ctrl+cmd+right擴大或縮小塊選擇
10、 F12/cmd+click跳轉(zhuǎn)到定義
編輯中快捷鍵
1、 cmd+X 不選擇文字時將剪切當前行
2、 cmd+shift+K 刪除當前行
3、 shift+down/shift+up上下移動選擇
4、 alt+down/alt+up上下移動一行
5、 shift+alt+down/shift+alt+up復制行或選擇并粘貼在行或選擇的下方或上方
哎呦哥哥嗨你好有這些技巧（以下推薦整理自：https://www.zhihu.com/question/309112157/answer/1499779298）
cmd + shift + \ 光標在括號首尾跳轉(zhuǎn)
cmd + option + [ 折疊代碼塊，]是收起
ctrl + G 跳轉(zhuǎn)到指定行數(shù)
cmd + shift + O 跳轉(zhuǎn)到方法（Method Or Function）
F9 設置/取消當前行斷點 在 Flutter / Nodejs 開發(fā)中比較常用
shift + E 模擬鼠標懸浮到單詞，查看提示信息（這一條是我自定義的，具體在快捷鍵設置里搜索關(guān)鍵詞 show hover，快捷鍵設置按 cmd K + cmd S打開）
cmd + . 快速修復（相當于點擊黃色小燈泡，在Flutter/TS開發(fā)中很香）
F12 轉(zhuǎn)到定義（相當于按住cmd + 鼠標點擊）
cmd + P 快速打開文件
cmd + \ 橫向切分窗口（分屏）
cmd + 1、2.... 可以在上一步切分的窗口1 2 3... 之間切換
cmd + option + ← 或 → 方向鍵切換當前聚焦的Tab頁
接上條 ctrl + tab 也是切換Tab頁 哪個用著舒服用哪個
cmd K + cmd S 快速打開快捷鍵設置
cmd + shift + E 快速打開并聚焦到文件樹
a. 焦點在文件樹任意位置時，輸入字母，會搜索匹配文件名
b. 焦點在文件樹 - 文件夾時，??方向鍵：展開，??方向鍵收起
c. enter 鍵重命名焦點所在文件夾 & 文件
d. cmd + ??方向鍵打開焦點所在文件夾 & 文件(個人覺得有點別扭，可以快捷鍵搜索關(guān)鍵字，推薦改為 cmd + enter)
多行編輯，cmd + option + ??方向鍵，將光標往下多添加一個，十分有快感的操作
多行編輯2.0，選中多行，然后按住option + shift ，然后點擊鼠標，多行光標會以鼠標點擊位置為最大位置在選中的若干行添加光標(如果某一行沒到鼠標點擊位置，光標會加在行尾)
移動當前tab到左右分屏窗口 ctrl + cmd + ?? Or ??
你有什么獨門絕技想和大家分享的？
你有什么特別管用的技巧想和大家顯擺下？
趕緊來留言吧！
【往期推薦】
2020-11-28
2020-11-28
2020-11-27
2020-11-26
2020-11-25
掃一掃，關(guān)注我
一起學習，一起進步
每周贈書，福利不斷
﹀
﹀
﹀
深度內(nèi)容
推薦加入
