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