VS Code有哪些奇技淫巧？
比如：
- Shift + ↑：可以移動整行
- Shift + Alt + ↓： 可以複製整行
------更新-----
stable版 1.31已經可以用了。
----------------
Insider版現在提供screencast模式，方便我錄製視頻用。會自動顯示你的鍵盤操作。
screencast mode評論區問是哪個版本，為什麼沒這個功能。VS Code有Stable和Insider兩種版本。我上面說了是Insider版現在提供的功能，將來會進入Stable的。
經常幫一些同學 One-on-One 地解決問題，在看部分同學使用 VS Code 的時候，有些蹩腳，實際上一些有用的技巧能夠提高我們的日常工作效率。
（ 豁，評論裏有人說看完就學會了 One-on-One →_→）
歡迎點擊頭像關注我們，後續持續分享更多阿里工程師的技術乾貨成長心得。
——————————————————————————————————————————
一、重構代碼
VS Code 提供了一些快速重構代碼的操作，例如：
將一整段代碼提取為函數：選擇要提取的源代碼片段，然後單擊做成槽中的燈泡查看可用的重構操作。代碼片段可以被提取到一個新方法中，或者在不同的範圍內（當前閉包、當前函數內、當前類中、當前文件內）提取到一個新函數中。在提取重構期間，VS Code 會引導為該函數進行命名。
將表達式提取到常量：為當前選定的表達式創建新的常量。
移動到新的文件：將指定的函數移動到新的文件，VS Code 將自動命名並創建文件，且在當前文件內引入新的文件。
轉換導出方式：export const name 或者 export default。
合併參數：將函數的多個參數合併為單個對象參數：
參考： 重構操作
Refactoring source code in Visual Studio Code?code.visualstudio.com
JS/TS 重構操作
https://code.visualstudio.com/Docs/languages/typescript#_refactoring?code.visualstudio.com二、自定義視圖佈局
VS Code 的佈局系統非常靈活，可以在工作臺上的活動欄、面板中移動視圖。
參考：重新排列視圖
Visual Studio Code April 2020?code.visualstudio.com
三、快速調試代碼
在 VS Code 內調試 JS/TS 代碼非常簡單，只需要使用 Debug: Open Link 命令即可。這在調試前端或 Node 項目時非常有用，這類型的項目通常會啟動一個本地服務，這時候只需要將本地服務地址填寫到 Debug: Open Link 輸入框中即可。
參考：Debug
Debugging in Visual Studio Code?code.visualstudio.com
四、查看和更新符號的引用
查看符號的引用、快速修改引用的上下文：例如，快速預覽某個函數在哪些地方被調用了及其調用時上下文，還可以在預覽視圖中更新調用上下文的代碼。
重命名符號及其引用：接著上面的例子，如果想更新函數名以及所有調用，怎麼實現？按 F2 鍵，然後鍵入所需的新名稱，再按 Enter 鍵進行提交。符號的所有引用都將被重命名，該操作還是跨文件的。
參考：Peek
Code Navigation in Visual Studio Code?code.visualstudio.comRename Symbol
https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol?code.visualstudio.com五、符號導航
在查看一個長文件的時候，代碼定位會是非常痛苦的事情。一些開發者會使用 VS Code 的小地圖，但其實還有更便捷的方法：可以使用 ??O 快捷鍵喚起符號導航面板，在當前編輯的文件中通過符號快速定位代碼。在輸入框中鍵入字元可以進行篩選，在列表中通過箭頭來進行上下導航。這種方式對於 Markdown 文件也非常友好，可以通過標題來快速導航。
參考：Go to Symbol
Code Navigation in Visual Studio Code?code.visualstudio.com
六、拆分編輯器
當對內容特別多的文件進行編輯的時候，經常需要在上下文中進行切換，這時候可以通過拆分編輯器來使用兩個編輯器更新同一個文件：按下快捷鍵 ? 將活動編輯器拆分為兩個。
可以繼續無盡地拆分編輯器，通過拖拽編輯器組的方式排列編輯器視圖。
參考：
Side by side editing
Visual Studio Code User Interface?code.visualstudio.com
七、重命名終端
VS Code 提供了集成終端，可以很方便地快速執行命令行任務。用得多了經常會打開多個終端，這時候給終端命名可以提高終端定位的效率。
參考：
Rename terminal sessions
Integrated Terminal in Visual Studio Code?code.visualstudio.com
八、Git 操作
VS Code 內置了 Git 源代碼管理功能，提供了一些便捷的 Git 操作方式。例如：
解決衝突：VS Code 會識別合併衝突，衝突的差異會被突出顯示，並且提供了內聯的操作來解決衝突。
暫存或撤銷選擇的代碼行：在編輯器內可以針對選擇的行來撤銷修改、暫存修改、撤銷暫存。
參考：Using Version Control in VS Code
Version Control in Visual Studio Code?code.visualstudio.com
九、搜索結果快照
VS Code 提供了跨文件搜索功能，搜索結果快照可以提供更多的搜索結果的信息，例如代碼所在行碼、搜索關鍵字的上下文，並且可以對搜索結果進行編輯和保存。
參考：Search Editors
https://code.visualstudio.com/updates/v143#search-editors?code.visualstudio.com十、可視化搭建頁面
在 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?ice.work最後這個是作者的廣告植入啦，作者給了一些 Tips(提升) 給大家，大家也要付一下作者的 Tips(小費) 哦~ ；D
————————————————————————————————————————
阿里巴巴集團淘系技術部官方賬號。
點擊下方主頁關注我們，你將收穫更多來自阿里一線工程師的技術實戰技巧成長經歷心得。另，不定期更新最新崗位招聘信息和簡歷內推通道，歡迎各位以最短路徑加入我們。
阿里巴巴淘系技術?www.zhihu.com
編輯於 2020-12-14繼續瀏覽內容
知乎發現更大的世界打開
Chrome繼續
知乎用戶
安裝 Zhihu On VSCode 插件，上班假裝打代碼，實則摸魚刷知乎。
Zhihu On VSCode，是由開發者 牛岱 開發的一個 VS Code 插件，它可以實現在 VS Code 中瀏覽知乎熱門話題、回答問題或發布文章等。
安裝了插件後，在 VS Code 的左側欄，會新增一個知乎的圖標。
點擊知乎圖標，可以打開如下圖的面板，面板劃分為三個區域：推薦、熱榜和收藏。
登錄知乎
瀏覽知乎個性推薦的內容，需要先登錄知乎帳號。
將滑鼠移動到推薦欄上方，右側會出現隱藏的菜單，第一個圖標即代表登錄。
這裡提供了兩種登錄方式，一種是掃描二維碼，一種則是使用密碼，使用密碼登錄需要較多步驟，建議掃描二維碼登錄。
成功登錄後，VS Code 右下角會出現「你好，XXX」的提示。
瀏覽內容
登錄之後，推薦下方就會根據你平時瀏覽的內容，給你推薦相關的信息。
點擊推薦下方的任意內容，在 VS Code 的右邊會打開一個新的窗口，可以瀏覽每個問題下方的回答。
推薦下方默認只展示 6 條內容，如果你對當前的內容都不感興趣，可以點擊推薦推薦欄右上角的刷新按鈕，獲取新的內容。
使用知乎進行搜索
除了瀏覽個性推薦的信息流內容，我們使用知乎，還可能出於明確的目的，想尋找我們關心的信息，這就需要用到搜索。
點擊推薦欄右上角的第三個圖標，即可進行搜索。
在彈出的輸入框，先點擊輸入框下方的「綜合」，再輸入你想尋找的信息。
前面的內容，是從內容消費者的角度，來介紹插件瀏覽和尋找信息的功能。
如果你平時會寫寫東西，發布到知乎等內容平臺，那麼這個插件也適合你，因為它支持把 VS Code 中的文章直接發布到知乎。
要想實現前面所說的，只需要滿足一個條件：在 VS Code 中使用 Markdown 編輯方式來書寫文檔。
在 VS Code 中創建 Markdown 格式文檔的方法為，使用快捷鍵 Ctrl + N 新建一個文檔，文檔的格式默認是 txt 格式，即純文本格式。
此時，你可以使用快捷鍵 Ctrl + S，對文檔進行保存操作，將保存類型設置為 Markdown，得到的文檔就是 Markdown 文檔了。
當你使用 Markdown 格式編輯文檔時，單擊滑鼠右鍵，在彈出的菜單中，選擇「Zhihu: Preview」，可以預覽 Markdown 渲染的效果。
完成文章的編輯時，右擊菜單，選擇「Zhihu: Publish」，將文章發布到知乎。
點擊發布文章的選項，在頂部彈出的輸入框中，輸入文章的標題，點擊輸入框下方的「發布新文章」：
接著敲擊回車鍵，等待返迴文章發布成功的提示，你可以選擇打開鏈接，前往知乎確認是否發布成功。
回答問題
Zhihu On VSCode 插件不僅可以發布文章，也可以用來回答知乎上的問題。
不過，相比發布文章，使用這個插件回答問題，稍微有一點麻煩。
與發布文章類似，你需要在 VS Code 中先創建一個空白的 Markdown 文檔。
在空白文檔的開頭處，需要使用 #! + 空格 + 問題鏈接的格式，引用問題的鏈接，方能將你的回答與待回答的問題匹配到一起。
接著在下方使用 Markdown 語法，輸入針對某個問題的回答，具體如下圖所示：
回答完成編輯後，與發布文章時進行類似的操作，右擊菜單，選擇「Zhihu: Publish」，即可發布回答。
添加圖片
在知乎發布文章或回答問題時，除了文字內容，我們大概率還會用到圖片。
而這個插件也為我們考慮到了這一點，在你需要添加圖片的位置，右擊菜單，選擇「Zhihu: Upload Image From Explorer」，在打開的窗口中，選擇想添加的圖片。
這樣一來，添加的圖片會自動上傳到知乎的伺服器，免去最後再添加圖片的麻煩。
插件安裝
VS Code 的插件有兩種安裝方法，一種是使用軟體內部的插件管理進行安裝，一種則是通過外部的插件市場安裝。
插件管理
點擊軟體左側邊欄第 5 個圖標，進入插件管理面板，在搜索欄輸入 Zhihu On VSCode 進行搜索。
搜索返回的結果中，點擊擬安裝的插件，在打開的詳情頁中，單擊 install 按鈕進行安裝。
插件市場
https://marketplace.visualstudio.com/items?itemName=niudai.vscode-zhihu
在瀏覽器中打開上方的鏈接，就可以看到 Zhihu On VSCode 插件在網站 Marketplace 上的介紹頁。
點擊綠色的 Install 按鈕，會提示在軟體 VS Code 中打開當前頁面，跳轉到 VS Code 內部，點擊安裝即可。
02. 打造成一個超好用的 Markdown 編輯器
以上，就是本次想和你分享的內容。
希望對你幫助。安裝 Zhihu On VSCode 插件，上班假裝打代碼，實則摸魚刷知乎。
Zhihu On VSCode，是由開發者 牛岱 開發的一個 VS Code 插件，它可以實現在 VS Code 中瀏覽知乎熱門話題、回答問題或發布文章等。
安裝了插件後，在 VS Code 的左側欄，會新增一個知乎的圖標。
點擊知乎圖標，可以打開如下圖的面板，面板劃分為三個區域：推薦、熱榜和收藏。
登錄知乎
瀏覽知乎個性推薦的內容，需要先登錄知乎帳號。
將滑鼠移動到推薦欄上方，右側會出現隱藏的菜單，第一個圖標即代表登錄。
這裡提供了兩種登錄方式，一種是掃描二維碼，一種則是使用密碼，使用密碼登錄需要較多步驟，建議掃描二維碼登錄。
成功登錄後，VS Code 右下角會出現「你好，XXX」的提示。
瀏覽內容
登錄之後，推薦下方就會根據你平時瀏覽的內容，給你推薦相關的信息。
點擊推薦下方的任意內容，在 VS Code 的右邊會打開一個新的窗口，可以瀏覽每個問題下方的回答。
推薦下方默認只展示 6 條內容，如果你對當前的內容都不感興趣，可以點擊推薦推薦欄右上角的刷新按鈕，獲取新的內容。
使用知乎進行搜索
除了瀏覽個性推薦的信息流內容，我們使用知乎，還可能出於明確的目的，想尋找我們關心的信息，這就需要用到搜索。
點擊推薦欄右上角的第三個圖標，即可進行搜索。
在彈出的輸入框，先點擊輸入框下方的「綜合」，再輸入你想尋找的信息。
前面的內容，是從內容消費者的角度，來介紹插件瀏覽和尋找信息的功能。
如果你平時會寫寫東西，發布到知乎等內容平臺，那麼這個插件也適合你，因為它支持把 VS Code 中的文章直接發布到知乎。
要想實現前面所說的，只需要滿足一個條件：在 VS Code 中使用 Markdown 編輯方式來書寫文檔。
在 VS Code 中創建 Markdown 格式文檔的方法為，使用快捷鍵 Ctrl + N 新建一個文檔，文檔的格式默認是 txt 格式，即純文本格式。
此時，你可以使用快捷鍵 Ctrl + S，對文檔進行保存操作，將保存類型設置為 Markdown，得到的文檔就是 Markdown 文檔了。
當你使用 Markdown 格式編輯文檔時，單擊滑鼠右鍵，在彈出的菜單中，選擇「Zhihu: Preview」，可以預覽 Markdown 渲染的效果。
完成文章的編輯時，右擊菜單，選擇「Zhihu: Publish」，將文章發布到知乎。
點擊發布文章的選項，在頂部彈出的輸入框中，輸入文章的標題，點擊輸入框下方的「發布新文章」：
接著敲擊回車鍵，等待返迴文章發布成功的提示，你可以選擇打開鏈接，前往知乎確認是否發布成功。
回答問題
Zhihu On VSCode 插件不僅可以發布文章，也可以用來回答知乎上的問題。
不過，相比發布文章，使用這個插件回答問題，稍微有一點麻煩。
與發布文章類似，你需要在 VS Code 中先創建一個空白的 Markdown 文檔。
在空白文檔的開頭處，需要使用 #! + 空格 + 問題鏈接的格式，引用問題的鏈接，方能將你的回答與待回答的問題匹配到一起。
接著在下方使用 Markdown 語法，輸入針對某個問題的回答，具體如下圖所示：
回答完成編輯後，與發布文章時進行類似的操作，右擊菜單，選擇「Zhihu: Publish」，即可發布回答。
添加圖片
在知乎發布文章或回答問題時，除了文字內容，我們大概率還會用到圖片。
而這個插件也為我們考慮到了這一點，在你需要添加圖片的位置，右擊菜單，選擇「Zhihu: Upload Image From Explorer」，在打開的窗口中，選擇想添加的圖片。
這樣一來，添加的圖片會自動上傳到知乎的伺服器，免去最後再添加圖片的麻煩。
插件安裝
VS Code 的插件有兩種安裝方法，一種是使用軟體內部的插件管理進行安裝，一種則是通過外部的插件市場安裝。
插件管理
點擊軟體左側邊欄第 5 個圖標，進入插件管理面板，在搜索欄輸入 Zhihu On VSCode 進行搜索。
搜索返回的結果中，點擊擬安裝的插件，在打開的詳情頁中，單擊 install 按鈕進行安裝。
插件市場
https://marketplace.visualstudio.com/items?itemName=niudai.vscode-zhihu
在瀏覽器中打開上方的鏈接，就可以看到 Zhihu On VSCode 插件在網站 Marketplace 上的介紹頁。
點擊綠色的 Install 按鈕，會提示在軟體 VS Code 中打開當前頁面，跳轉到 VS Code 內部，點擊安裝即可。
02. 打造成一個超好用的 Markdown 編輯器
以上，就是本次想和你分享的內容。
希望對你幫助。本文 GitHub https://github.com/imcoderlemon/CodeClass 已收錄，項目包含技術乾貨，幾百本計算機電子書，3本LeetCode刷題筆記，各類學習資源和大廠面試經驗，持續更新，歡迎 Star
其他的答主和高贊回答都說的很全面了，推薦了很多基本功能和實用技巧。我就說兩個其他人沒提到，但非常實用的技巧給大家，強烈推薦體驗一下。
作為一名VSCode重度愛好者，使用VSCode兩年多了，嘗試過各種編輯器，獨愛這一款。
奇淫巧技談不上，把VSCode常規功能都掌握了，完全就夠用了！
推薦兩個就是很多人不知道的常規功能。
遠程開發
傳統的遠程開發：在本地編輯文件，利用FTP工具上傳到遠程編譯機調試編譯，這一套繁瑣的操作，因此非常的方便。
VsCode 遠程開發：和其他 IDE 傳統的遠程開發不同，VSCode 在本地主機（一般是Windows或MAC）上的操作的對象直接就是遠程機（Linux），所有在本地主機上的操作直接作用於遠程機器，並且還能像在本地一樣查找遠端機的引用和定義，不受本地機器配置和環境影響！
工作原理是這樣：
要能連上遠程主機，首先我們需要下載VS Code遠程開發插件，VS Code其實是提供了一個遠程開發插件包，包括：
- Remote - SSH - 通過使用 SSH 鏈接虛擬或者實體Linux主機。
- Remote - Containers – 連接 Docker 開發容器。
- Remote - WSL - 連接 Windows Subsystem for Linux （Linux子系統）。
打開軟體的擴展界面，搜索 Remote 開頭的插件，也能看到這三個的不同遠程開發插件，我們這裡連接的是雲主機，選擇安裝 Remote - SSH 插件安裝即可。
具體的使用方式和詳細操作就不這裡展開了，可以看上面我寫過的文章介紹，有非常詳細的說明，強烈推薦體驗一下。
流程圖繪製
這是要推薦的第二個功能，需要安裝一款支持用VSCode繪圖的插件 PlantUML，去插件市場下載下面這個插件：
說是流程圖，其實不止能繪製流程圖，按官方網站上的說明可以畫下面這些圖：
時序圖 用例圖 類圖 活動圖 活動圖 組件圖 狀態圖 對象圖 部署圖 定時圖 Network Wireframe Archimate Gantt MindMap
簡直是開掛了的UML繪圖神器，有了它一個VSCode畫各種圖，我不是針對誰。
更厲害的是，畫圖不用畫筆，用類似Markdown語法的標記語言就能畫出好看的各種圖，手殘黨福音。語法說明在這裡：順序圖的語法和功能
舉個時序圖的例子：
上面這幅時序圖是用下面的代碼畫出來的！是不是很極客風~
@startuml
用戶 -&> 認證中心: 登錄操作
認證中心 -&> 緩存: 存放(key=token+ip,value=token)token
用戶 & 認證中心: 下次訪問頭部攜帶token認證
認證中心 & 用戶: 信息
@enduml
漂亮的狀態圖，寫出來的！
好看的組件圖，還是出來的！
太多類型的圖了，不再舉例。
今天的分享就到這了，還不趕緊去體驗一下！
------一條分割線------
如果覺得我的回答還行，對你有幫助，或是解決了你的問題。
不求什麼回報，
只希望你能點個贊、感謝與收藏~
一是當做對我的鼓勵，
二是防止下次想看卻找不到
如果你是計算機技術編程愛好者來看看我的其他回答吧，或許你會喜歡~
後端都要學習什麼？?www.zhihu.com
什麼是微服務架構？?www.zhihu.com
Visual Studio Code 如何編寫運行 C、C++ 程序？?www.zhihu.com
有哪些你看了以後大呼過癮的編程書？?www.zhihu.com
計算機專業，你的學校從大一到大四用了哪些教材？?www.zhihu.com
0. 如果只能安裝一個插件，那就是Tabnine，一個讓你懷疑人生的代碼補全插件
據評論區的大家反應，這個插件卡（或者佔內存）。
我自己用著不卡。
請大家根據實際情況選擇。
1. 如果只能推薦一個快捷鍵，那就是Ctrl+D，同時選擇多處文字，同時編輯
Ctrl+Shift+L 也是同樣的原理
2. 直播的時候打開 Screencast Mode 有奇效
上面的那張動圖的效果就是這麼做出來的。
3. 選擇多一點點點 Alt+Shift+→
4. PHP代碼的格式化非常惱人，但是phpfmt解決了
解決方式很粗暴醜陋，但是解！決！了！
5. PowerShell的快捷鍵也可以在集成終端裏用
跳詞
Ctrl+←
Ctrl+→
刪左右
Ctrl+Home
Ctrl+End
要使用這兩個快捷鍵，要在設置文件中增加
"terminal.integrated.commandsToSkipShell": [
"-workbench.action.terminal.scrollToBottom",
"-workbench.action.terminal.scrollToTop"
]
6. F1 可以打開命令面板，你可以充分發揮你的好奇心，看看到底有什麼命令
推薦閱讀：
