~工欲善其事? 必先利其器~
(以下快捷鍵操作針對 windows,括號里是針對 macOS)
學習新的編輯器方法:
第一步:了解編輯器的快捷鍵和語言支持,快捷鍵值得多花時間;
第二步:開始挑剔編輯器的其他組件,但凡是跟自己的工作習慣或者工作流不匹配的,就會想辦法換掉它,這是個做減法的過程;
第三步:最后一步,就是自己學習寫插件了,編輯器本身的功能和社區(qū)不能夠完全滿足自己的需求,本著“麻煩別人不如磨煉自己”的精神,我開始自己動手。?
這個過程可以作為一個通用的學習新工具的方法。下面是我整理的日常工作中用到的快捷鍵和一些插件(一些常用插件就沒有整理)。
code 命令行
code --help ------------------------打印命令行所支持的所有參數(shù)。
code 命令后加上文件或文件夾的地址-----------vscode 會在一個新窗口打開這個文件或文件夾
code 命令后添加參數(shù)-r ----------可以進行窗口的復用。
code -r -g 文件名:行數(shù) ---------打開某個文件并自動跳到某一行。
code -r -d 文件 1 文件 2 ---------比較兩個文件的內容
ls | code -r -? ? ?---------------------在編輯器里顯示當前項目目錄下所有的文件名
基本鍵盤操作
Ctrl(Option) 鍵搭配方向鍵,home,end -----------主要是針對光標的移動;
shift 鍵搭配方向鍵,home,end ---------------------主要是針對文本的選擇;
快捷鍵進階
ctrl+shift+k (Cmd+shift+k) ----------------------------刪除當前代碼行;
ctrl+x/c/v (Cmd+x/c/v) ---------------------------------剪切/復制/粘貼當前代碼行;
ctrl+enter/ctrl+shift+enter(Cmd+enter/Cmd+shift+enter) -------------------------------在當前行的下面或者上面開始一段新的代碼;
Alt+上下方向鍵(Option+上下方向鍵) -----------------上下移動當前行。如果同時按住 shift,則是上下復制當前行;
Alt+shift+f(Option+shift+f) ---------------------------對整個文檔進行格式化(插件也可以);
ctrl+shift+p —— 轉置游標處的字符(ctrl+t) 調換字符位置;
ctrl+shift+p —— 轉換為大寫/小寫 調整字符大小寫;
ctrl+shift+p —— 合并行(ctrl+j) 合并代碼行;
ctrl+shift+p —— 按升/降序排列行;
ctrl+u(cmd+u)撤銷光標的移動和選擇;
小技巧:
? ? ?(1).批量重命名:選中變量/方法名,按 f2,編輯新名字。所有相關的實例名字都會被修改。
!多光標
按住 alt (option)點擊,可以創(chuàng)建多個光標。?
選中第一個后,按 ctrl+D(cmd+D) 處理多次出現(xiàn)的相同內容。
文件,符號,代碼之間跳轉
ctrl+tab -----------文件跳轉
ctrl+p(cmd+p) ---------最近打開文件的列表,支持搜索
ctrl+g 行跳轉-----------直接輸入行數(shù)即可。
ctrl+p(cmd+p) --------某個文件某一行跳轉。eg:main.js:99
符號:類定義,函數(shù)定義等等
ctrl+shift+o(cmd+shift+o)當前文件里所有符號。在@后輸入:會將所有符號進行分類。
ctrl+t(cmd+t) 在所有打開的文件中搜索符號。
ctrl/F12 跳轉到函數(shù)定義的位置
shift+f12 打開函數(shù)引用預覽
書寫 code snippet(代碼片段)
代碼片段:將一段常用代碼抽象成模板。直接調用即可。
1. ctrl+shift+p 打開命令面板,搜索“配置用戶代碼片段”回車打開。在列表選擇語言;eg:JavaScript
2. 這時打開一個下圖的 JSON 文件,我們把 7-14 行取消注釋。?

?必須要有“prefix”前綴和“body”內容這兩個屬性.“description”不是必須的。
3. Tab Stop -------$1,$2。意思是當我們按下 Tab 鍵之后,光標移動到的位置。默認移到$1。shift+tab 移到上一個 tab stop 的位置。

4. 占位符。${1:label},在這個格式下,$1 的位置處會預先填入 label 這個值,并且選中。?

5. 多光標。在代碼片段的多個位置使用同樣的 tab stop。使用代碼片段是就會出現(xiàn)多個光標。?

6. 預設變量。eg:在某個位置使用剪切板的內容,那個位置寫上$CLIPBOARD就可以了。放在tab stop中 語法是 ${1:$CLIPBOARD}。
代碼折疊,小地圖,面包屑
1. 代碼折疊不用說了,就是通過控制每段代碼塊前面的+/-,來實現(xiàn)代碼的折疊。說一下它的快捷鍵。
折疊:ctrl+shift+左方括號(cmd+option+左方括號),當前光標所處的最內層,可以被折疊的代碼就會被折疊起來;ctrl+k,ctrl+0(cmd+k,cmd+0),當前文件里所有可以被折疊的代碼一次性全部折疊起來。
展開:ctrl+shift+右方括號(cmd+option+右方括號),展開最內層,可以被展開的代碼塊;ctrl+k,ctrl+j(cmd+k,cmd+j),當前文件里所有可以被展開的代碼一次性全部展開。
基于語言定義代碼折疊:(通過下圖的方式包裹要折疊的代碼塊)?

2. 小地圖和面包屑
工作區(qū)常用快捷鍵

Markdown
如今 Markdown 已經成為主流的文檔書寫語言。在 VS Code 中書寫 Markdown 時,VS Code 提供了語法高亮和側邊預覽的效果。
前面介紹過如何在符號中快速跳轉,這個功能在 Markdown 中更加方便??梢酝ㄟ^符號,快速的在不同的章節(jié)直接進行跳轉。?
?當然如果你打開了面包屑功能的話,你也可以通過面包屑工具欄跳轉。
插件整理
1. Auto Close Tag ----------------自動閉合html標簽。
2. Auto Rename Tag ------------修改html標簽時,自動修改匹配的標簽。
3. Code Spell Checker ----------單詞拼寫檢查。
4. Copy Relative Path -----------獲取文件相對路徑。
5. Bracket Pair Colorizer --------使用顏色標識匹配的括號。當你擁有深層嵌套的對象或函數(shù)時,這個插件非常有用。
6. GitLens ---------------------------單擊代碼行就可以看到編輯它的人,時間,提交的內容。
7. Code Runner -------------------代碼片段運行調試,支持多種語言。
8. Remove Comments -----------一鍵刪除當前文件的注釋,支持40多種語言。
9. Image preview ------------------實現(xiàn)圖片預覽功能。
10.?Reactjs code snippets? -------React代碼片段。

11. cssrem-------------------------- css值轉rem。
12. SC Copy---------------------- 復制粘貼管理器,可通過ctrl +1,ctrl +2,ctrl +3...以此類推,復制多個,粘貼則是Alt+1,Alt+2,Alt+3...一一對應粘貼的內容。
結語
歡迎各位指正和補充,謝謝。