「解放雙手」老舅教你VS Code Disco

觀感度：🌟🌟🌟🌟🌟

口味：驢肉蒸餃

烹飪時間：15min

這是最好的時代，也是最壞的時代。

今年聽到過最浪漫的一句話：咱們在鍵盤上留下的餘溫，也將隨時代傳遞到更遠的未來。

感受讓理性的技術人多了份柔光濾鏡。

也許你收藏了千篇萬篇VS Code快捷鍵，很惋惜卻沒能記住他們，是由於你沒有實際操做過，英文很差不要緊，你真正須要的是讓你雙手指尖的肌肉增長一些記憶。

爲了讓大家能跟着我一塊兒操練起來，爲了讓大家節約寶貴的時間，提升工做效率、獲得leader誇獎、同事羨慕你瘋狂操做的同時還能夠有時間快樂摸🐟。

我只能請出老舅了。

(老舅來了趕忙點個贊)

左邊跟我一塊兒畫個龍🐲

左手鍵盤操做

左手不夠長，那就右手來湊。記住，觸控板鎖上，再把鼠標扔一邊。

面板控制

Command + Shift + P / F1命令面板

Command + Shift + E文件資源管理器

Command + Shift + F跨文件搜索

Command + Shift + D啓動和調試

Command + Shift + X管理擴展

Command + Shift + M查看錯誤和警告

Command + J打開關閉面板

Command + N新建文件

Command + Shift + N打開新的編輯器窗口

Command + W關閉當前編輯器內窗口

Command + Shift + W關閉當前的編輯器

Command + / —縮放

Command + /添加註釋

Ctrl + `打開/關閉終端

晃動你的胯胯軸

移動你的代碼塊

Command + Shift + Enter將光標移動到當前行的上面一行，開啓新的一行代碼

Command + Enter將光標移動到當前行的下面一行，開啓新的一行代碼

Option + 上下方向鍵將當前行，或者當前選中的幾行代碼，在編輯器裏上下移動

Shift + option + 上下方向鍵向上或向下複製一行

這些操做好好練習一下，你的Cmd + C和Cmd + V鍵壽命能長點。

格式化代碼

Option + Shift + F格式化代碼

Command + Shift + P打開命令面板輸入 tra 選擇大小寫實現切換

Command + J合併代碼行

選中代碼塊按Tab增長縮進，按Shift + Tab減小縮進

依次按下Command + k Command + 0所有摺疊代碼

依次按下Command + K Command + J所有展開代碼

指向閃耀的燈球兒

操做光標

Option + 左右方向鍵以單詞爲單位移動光標

Command + 左右方向鍵以行首行尾爲單位移動光標

Command + 上下方向鍵以文檔第一行和最後一行爲單位移動光標

Command + Shift + \以花括號爲單位移動光標

Option + 左右方向鍵 + Shift以單詞爲單位選中開頭/結尾到光標之間的字符

Command + Shift + 上下方向鍵以當前光標爲單位選中前面/後面全部內容

Option + Delete刪除當前單詞光標前的內容

fn + Option + Delete刪除當前單詞光標後的內容

fn + Command + Delete刪除當前行光標右側全部內容

Command + Delete刪除當前行光標左側全部內容

Command + Shift + K刪除當前行

Command + X剪切當前行

Command + U撤銷光標的移動和選擇

Command + Shift + V粘貼純文本

多光標組合技

Command + Option + 下方向鍵在當前光標下建立新的光標

Command + 右方向鍵將光標所有整理移動到每一行的行尾

Command + D

將光標處於須要建立多光標的單詞處，按Command + D、Command + D、Command + D……便可實如今同一單詞處添加光標

Option + Shift + I

選中內容的每一行行尾添加光標

跳轉操做

Command + P搜索文件，選中即打開，若是想要保留原文件，在新窗口打開選中文件後按Command + Enter

Ctrl + Tab同時按下，先鬆開Tab，在列表中經過Tab切換選擇你須要打開的文件，選中即鬆開Ctrl實現跳轉。

Ctrl + G:行號可實現行跳轉

Command + F12跳轉到函數定義的位置

Shift + F12跳轉到被引用的引用

在你右邊畫一道彩虹🌈

右手鼠標操做

雖說快捷鍵是解放鼠標，可是VS Code對鼠標的支持也整挺好的。

• 單擊鼠標左鍵：移動光標
• 雙擊：選中當前光標下的單詞
• 三連擊：選中當前行
• 四連擊：選中整個文檔
• 單擊行號並移動鼠標便可選中多行代碼
• 鼠標選中行直接拖放能夠移動被選中的代碼塊
• 鼠標左鍵拖拽過程當中按Option鍵 複製粘貼代碼塊

多光標操做

按住Option鼠標在須要建立光標處點擊

如何查看已有快捷鍵/自定義快捷鍵？

在命令面板輸入「打開鍵盤快捷方式(Open Keyboard Shortcuts)」並執行。

搜索框裏輸入對應字符「cmd+c」或者點擊右側小鍵盤圖標，進行錄製按鍵。

便可找到對應按鍵組合進行自定義修改。

正經插件推薦

正則大全any-rule做者：鐵皮飯盒

漢化chinese

在瀏覽器中打開Open-In-Browser

自動閉合HTML/XMl標籤Auto Close Tag

自動對應修改HTML/XMl標籤Auto Rename Tag

HTML片斷/模板HTML Snippets/HTML Boilerplate

高亮註釋TODO Highlight

代碼風格stylelint/TSLint

Vue開發必備Vetur

React開發必備ES7 React/Redux/GraphQL/React-Native snippets

Go開發必備Go

ES6代碼片斷JavaScript (ES6) code snippets

映射VSCode上的斷點到Chrome Debugger for Chrome

路徑自動提示補全Path Intellisense

彌補VSCode原生git不足GitLens

渲染顏色到代碼下vscode-pigments

代碼縮進提供顏色上的提示Indent Rainbow

npm的包最終致使項目的增長量Import Cost

花括號單獨配色Rainbow Brackets

項目管理器，多項目開發者福音Project Manager

同步VS Code配置Settings Sync

代碼格式化的神器 保證更容易寫出風格一致的代碼Prettier

icons圖標vscode-icons-mac

更多插件請自行探索

選擇適合本身項目需求的插件安裝下載

❤️愛心三連擊

1.看到這裏了就點個贊支持下吧，你的點贊是我搖頭的動力。

2.關注公衆號前端食堂，你的前端食堂，記得按時搖頭！

3.2019愛你永久，2020心想事成，在2019年的最後一天，祝你們新年快樂！