你不知道的 Vscode 之光標操作
前言
歡迎來到vscode的世界，vscode在前端屆是現(xiàn)在越來越普及的開發(fā)工具了，因為其開箱即用的特性讓人愛不釋手，但也因為這個特性讓我們開發(fā)者對它本身或者其很多提效的設計理念知之甚少，這也是本系列文章出現(xiàn)的原因，本文是系列文章的首篇，如果覺得有幫助的話請點贊鼓勵作者繼續(xù)寫下去吧~~
我們的目標只有一個，讓我們喊出我們的口號：讓開發(fā)如絲般順滑!文章中的示例大多mac版為主，因為本人是mac，但win版無需擔心，破陣心法，牢記于心：command就是ctrl鍵。
系列文章目錄
對于vscode的相關(guān)分享，大致如下，系列文章目錄如下
- 光標操作
- 空間控制：待完成
- 項目約束：待完成
- 插件開發(fā)：待完成
- 語言支持：待完成
- graph TB
- A[Vscode] --> F[命令世界]
- A[Vscode] --> D[語言支持]
- A[Vscode] --> B[光標操作]
- A[Vscode] --> C[空間控制]
- A[Vscode] --> G[項目約束]
- A[Vscode] --> E[插件開發(fā)]
- B --> B1[光標移動]
- B --> B2[多光標]
- B --> B3[自定義]
- C --> C1[編輯區(qū)]
- C --> C2[終端區(qū)]
- C --> C3[命令面板]
- C --> C4[側(cè)邊欄]
- G --> G1[調(diào)試debugger]
- G --> G2[任務task]
- G --> G3[代碼塊snipshapt]
本文只會涉及到與我們最息息相關(guān)的光標操作，那我們就開始吧!
vscode小技巧 -- 光標操作
光標操作我們?nèi)粘Ｊ褂梅较蜴I，我們在日常中其實肌肉記憶下意識也會用到很多它的技巧，比如按住cmd鍵左右就可以到行首行尾，但卻很難總結(jié)，一葉遮目的感覺。我拋磚引玉給個突破點：顆粒度。我們?nèi)粘Ｊ褂脮r左右方向鍵只會一個字符，即顆粒度是字符，如果我們想到詞尾或者句尾，這就很麻煩了;這句話其實就標明了我們的重點：顆粒度;那么，如何操作光標的顆粒度呢?
水平方向上
結(jié)合方向鍵
顆粒度
mac
win
單詞
option
ctrl
行
cmd
只用home/end即可
代碼塊
cmd + shift + \
Ctrl + shift + \
垂直方向上
| 顆粒度 | mac | win |
|---|---|---|
| 文首/文尾 | Cmd+上下方向鍵 | Ctrl + Home/End 鍵 |
| 當前行代碼上/下移 | Option + 上下方向鍵 |
注：【當前行上/下移】不是光標而是代碼塊操作(因為光標操作直接方向鍵就可以了)，但很適合放在這里，這樣就可以和水平方向上匹配了;水平上:行-cmd 單詞-option;垂直上文檔-cmd 行-option;
其他光標操作
| 含義 | mac | win |
|---|---|---|
| 撤銷光標處理 | Cmd + U | Ctrl + U |
擴展：【選中】操作只需要再加個【shift】即可;【刪除】操作顆粒度同光標操作，反方向則加fn即可(如刪除所在行光標前所有內(nèi)容為【cmd+delete】而光標后內(nèi)容則為【cmd+fn+delete】)
光標操作實例
針對單詞的光標移動
想把光標直接移動到整個單詞，也就是 function 的前面或后面，你只需按下 Option(Windows 上是 Ctrl 鍵)和左方向鍵。
光標移動到行首或者行末
按住 Cmd + 左方向鍵(Windows 上是 Home 鍵)，就可以把光標移動到了這行的第一列。
移動到文檔的第一行或者最后一行
按下 Cmd 和上下方向鍵即可(Windows 上是 Ctrl + Home/End 鍵)。
代碼塊的移動
Cmd + Shift + \(Windows 上是 Ctrl + Shift + \)，就可以在這對花括號之間跳轉(zhuǎn)。
當前行上/下移
其他光標操作
撤銷光標處理
多光標操作
至此，我們已經(jīng)了解了單光標的移動，選中(其實就是移動加上shift鍵)，刪除(選中加delete)等操作，那么，如果我們需要一次操作多個地方呢?這時我們就需要來到光標操作的高階使用了，多光標操作。
關(guān)于這個話題，其實重點就是如何在需要的位置創(chuàng)建多光標，因為創(chuàng)建后就和單光標的操作一致了。
基礎操作-鼠標創(chuàng)建多光標
在鍵盤上按住 “Option”(Windows 上是 Alt)，然后點擊要新建光標的地方即可。
但很明顯，這種方法普遍適用但不方便，我們每創(chuàng)建一個光標都需要找到位置并點一下，八二原則，我們可以用快捷鍵實現(xiàn)常見的那20%的操作，下文主要介紹三種常見場景。
提效操作
| 處理場景 | 快捷鍵 | 詳解 |
|---|---|---|
| 相同元素 | Cmd + D | 選中元素，然后按下快捷鍵，vscode就會選中下一個相同的元素并創(chuàng)建光標；再按再創(chuàng)建，依次類推。 |
| 上下行處理 | Cmd + Option + 下方向鍵 | 在當前光標的下面創(chuàng)建一個光標。 |
| 選中多行處理 | Option + Shift + i | 選中多行內(nèi)容，然后按下快捷鍵，vscode在每一行行尾創(chuàng)建一個光標 |
關(guān)于光標操作的擴展
其他光標操作
| 含義 | mac | win |
|---|---|---|
| 撤銷光標處理 | Cmd + U | Ctrl + U |
選中刪除聯(lián)想
【選中】操作只需要再加個【shift】即可;【刪除】操作顆粒度同光標操作，反方向則加fn即可(如刪除所在行光標前所有內(nèi)容為【cmd+delete】而光標后內(nèi)容則為【cmd+fn+delete】)
到此，我們就了解了vscode本身對光標操作的基本設計理念啦。
自定義快捷鍵
但如果我們用不慣呢?vscode自然也不會這么死板，它是支持為行為、也就是我們所說的命令自定義快捷鍵的，這里說之前困惑過我的一點，就是我們說的創(chuàng)建光標、移動等等對應vscode而言其實就是一條內(nèi)嵌的命令，理解了這個，才好進行自定義，我當初沒理解所以一直在想的問題是：我該怎么去翻譯我要做的事情。
三步走：找到定義keyboard Shorycut的地方，找到對應的操作，為操作綁定快捷鍵。
Eg：為【選擇括號內(nèi)所有內(nèi)容】的操作綁定Cmd + Shift + ]快捷鍵為例
找到定義keyboard Shorycut的地方
找到對應的操作
為操作綁定快捷鍵
雙擊-》按下需要綁定的快捷鍵-》回車確定(按錯的話別回車就可以了)
這里多說一句，快捷鍵其本質(zhì)就是行為和特定按鍵【在特定場景下】的綁定，在vscode中通過JSON進行描述，我們可以通過執(zhí)行>Open Keyboard Shortcuts(JSON)進行查看，如果我們需要實現(xiàn)一個高級的快捷鍵，就會需要這些知識了。
| 屬性 | 含義 | 備注 |
|---|---|---|
| Command | 命令值 | |
| When | 在什么情況下這個快捷鍵綁定能夠生效 | |
| Key | 快捷鍵 |
其中的when的定義注意點比較多，所有取值可以查看文檔(https://code.visualstudio.com/docs/getstarted/keybindings#_when-clause-contexts)
而對于高級寫法，VS Code 還支持幾個基礎的操作符。這樣我們就能夠書寫相對復雜的條件語句了。
- ! 取反。比如我們希望當光標不在編輯器里時，綁定一個快捷鍵，那么我們可以使用 !editorFocus，使用 !進行取反。
- ==等于。when 條件值除了是 boolean 以外，也可以是字符串。比如 resourceExtname 對應的是打開的文件的后綴名，如果我們想給 js 文件綁定一個快捷鍵，我們可以用 resourceExtname == .js。
- && And 操作符。我們可以將多個條件值組合使用，比如我希望當光標在編輯器里且編輯器里正在編輯的是 js 文件，那么我可以用 editorFocus && resourceExtname == .js。
- =~正則表達式。還是使用上面的例子，如果我要檢測文件后綴是不是 js，我也可以寫成 resourceExtname =~ /js/，通過正則表達式來進行判斷。
總結(jié)
到此，光標操作相關(guān)的分享就結(jié)束啦，關(guān)于vscode的了解，它并非銀彈，沒它也能用，但總覺得編程本身枯燥的事情，還是需要這種探尋的快樂的，生而有崖而學無涯，用我那時候?qū)W完寫的隨筆感想為我們這部分分享結(jié)個尾好了：人生性懶惰，不只是表面，更是思想，懶于思考只是習慣于遇坑填坑，跳進坑里幾乎是一件必然事件，勤于思考，享受思考。
最后，順口溜總結(jié)一下下，希望對諸君有所幫助：移動考慮顆粒度，多個就上快捷鍵，定制還需自綁定，操作牢記shift鍵。
王志遠，微醫(yī)前端技術(shù)部醫(yī)療支撐組
