vscode 多光標(biāo)

VSCode 多光標(biāo)特性，在我們的日常編碼過程中，有很多工作，它本身就是具有“重復(fù)”屬性的。比如你需要把多個(gè)單詞的第一個(gè)字母從小寫變成大寫，這種跟業(yè)務(wù)邏輯相關(guān)的重復(fù)性操作，編輯器很難為它們一個(gè)個(gè)單獨(dú)做優(yōu)化。

而 VS Code 的多光標(biāo)特性其實(shí)就是用來解決這類問題的。當(dāng)你在一個(gè)文本框或者某個(gè)輸入框里打入字符時(shí)，會有一個(gè)豎線來顯示你將要輸入文字的位置，這就是“光標(biāo)”。顧名思義，多光標(biāo)其實(shí)就是多個(gè)輸入位置，這里你可以腦補(bǔ)下多個(gè)豎線的場景。

多光標(biāo)特性允許你在輸入框的多個(gè)位置創(chuàng)建光標(biāo)，這樣你就可以在多個(gè)不同的位置同時(shí)輸入文字或者執(zhí)行其他操作。是不是很酷？

比如我上面提到的例子，你想把多個(gè)單詞的第一個(gè)字母從小寫變成大寫。這個(gè)時(shí)候你只需要在每個(gè)單詞的開頭創(chuàng)建一個(gè)光標(biāo)，然后按住 “shift + 右方向鍵” 選中這些單詞的第一個(gè)字母，最后執(zhí)行 “轉(zhuǎn)換為大寫” ，這樣這些被選中的字符，就可以全部被轉(zhuǎn)換成了大寫了。

那怎樣才能創(chuàng)建多個(gè)光標(biāo)呢？這其中又有什么規(guī)則？別急，且聽我道來。

創(chuàng)建多個(gè)光標(biāo)

我還是以一段 CSS 代碼作為例子來介紹吧，如果你要練習(xí)，直接把這段代碼復(fù)制到編輯器中即可。

.foo {
  padding: 5;
  margin: 5;
  font-size: 5;
}

CSS

你可以看到，在上面這段 CSS 代碼中，所有屬性的值都是“5”，但你可能覺得這樣的寫法不規(guī)范，想把它們都改成 “5px”。之前你肯定是吭哧吭哧挨個(gè)在5后面加“px”。而現(xiàn)在，有了多光標(biāo)特性之后，你第一步要做的事情，就是把光標(biāo)移動(dòng)到第一個(gè) “5”的前面。接下來就有兩種操作方式可以選擇。

使用鼠標(biāo)

第一種添加多光標(biāo)的方式，就是使用鼠標(biāo)。在鍵盤上按住 “Option”（Windows 上是 Alt），然后鼠標(biāo)點(diǎn)在第二個(gè)“5”之前，那么第二個(gè)光標(biāo)就創(chuàng)建好了?，F(xiàn)在你可以看到兩個(gè)光標(biāo)，第二個(gè)光標(biāo)比第一個(gè)要細(xì)一點(diǎn)。

聰明的你肯定知道通過同樣的方式來創(chuàng)建第三個(gè)光標(biāo)。然后，按下右方向鍵，將光標(biāo)們移動(dòng)到 “5”的后面，輸入“px”。這樣，“5”后面就都已經(jīng)加上“px”了，而這中間，你只做了一次輸入。是不是很方便？

使用鍵盤

第二種方式是使用鍵盤，但是比第一種方式要多兩個(gè)步驟，我們來一起看看是為什么。

首先你還是先移動(dòng)光標(biāo)到第一個(gè)“5”的前面。然后按下 “Cmd + Option + 下方向鍵”（Windows 上是 “Ctrl + Alt + 下方向鍵”），在當(dāng)前光標(biāo)的下面創(chuàng)建一個(gè)光標(biāo)。

相信你已經(jīng)看出來了，第二個(gè)光標(biāo)，由于就在第一個(gè)光標(biāo)的正下方，所以它不在第二行的“5”前面。不過沒關(guān)系，我們有辦法搞定它。先別急，你還是如法炮制，把第三個(gè)光標(biāo)創(chuàng)建好。

下面你該嘗試把光標(biāo)移動(dòng)到正確的位置啦。雖說現(xiàn)在三個(gè)光標(biāo)的位置都是散亂的，沒有什么規(guī)則，但你可以讓它們移動(dòng)到類似的位置：按下 “Cmd + 右方向鍵”（Windows 上是 End），這樣它們就都移動(dòng)到每一行的末尾了。

到這里問題就簡單了，你只需按下 “左方向鍵” 將光標(biāo)移動(dòng)到 5的后面，然后輸入 px即可完成整個(gè)操作。

對于這個(gè)樣例而言，第一種方案比第二種要方便，但這兩種方法解決問題的思路是一致的。前者通過鼠標(biāo)操作，把光標(biāo)移動(dòng)到了你期望的位置，然后再執(zhí)行別的操作；后者則是運(yùn)用了 VS Code 內(nèi)置的其他命令，把光標(biāo)最終移動(dòng)到你想要的位置。

在第二種方案中，你是把光標(biāo)全部移動(dòng)到行末，從而統(tǒng)一了光標(biāo)的位置，進(jìn)而進(jìn)行“重復(fù)性”的操作。但這個(gè)問題的解決方案不是唯一的，你也可以想一想，還有沒有其他別的解法。

在這里，我還是想重復(fù)下我之前說過的一個(gè)觀點(diǎn)，使用這樣的功能的時(shí)候，你可以想想如果你是設(shè)計(jì)者，你會怎么樣來設(shè)計(jì)多光標(biāo)特性。閉著眼睛順著這個(gè)路徑思考，也許你會更容易理解和記住 VS Code 的模式。

創(chuàng)建多光標(biāo)的兩個(gè)特別命令

接下來，我再給你介紹兩個(gè)關(guān)于多光標(biāo)的創(chuàng)建的特別方法，如果你還沒有消化上面的內(nèi)容，也先別急，等把后面的全部看完之后再回去練習(xí)。

Cmd + D

首先講第一種，還是上面的代碼，你把光標(biāo)移動(dòng)到數(shù)字“5”之前，按下 “Cmd + D”，這樣第一個(gè)“5”就被選中了；然后再按一次 “Cmd + D”（Windows 上是 Ctrl + D），你可以看到，第二個(gè)“5”也被選中了。

“Cmd + D” 這個(gè)命令的作用是，第一次按下時(shí)，它會選中光標(biāo)附近的單詞；第二次按下時(shí)，它會找到這個(gè)單詞第二次出現(xiàn)的位置，創(chuàng)建一個(gè)新的光標(biāo)，并且選中它。這樣只需要按下三次，你就選中了所有的“5”。這個(gè)時(shí)候你再按下 “右方向鍵”，輸入“px”，即可完成任務(wù)。

之所以說這個(gè)方法特別，是因?yàn)樗倪m用情況比較特別：處理多次出現(xiàn)的“相同”單詞。如果你要處理的文本并不是相同的，那么這個(gè)方法就不適用了。

Option + Shift + i

接下來講講第二種，是跟代碼行批量處理有關(guān)，也還是用的前面的代碼。首先你選擇多行代碼，然后按下 “Option + Shift + i” （Windows 上是 Alt + Shift + i），這樣操作的結(jié)果是：每一行的最后都會創(chuàng)建一個(gè)新的光標(biāo)。

同樣的，這種方法是基于代碼行的，如果你的需求是在同一行添加多個(gè)光標(biāo)，那么就不適用了。

就上面的例子，我個(gè)人第一反應(yīng)是使用“Cmd + D”這種方式來處理。也許你會問，是不是學(xué)習(xí)一種方式就夠了呢？畢竟這些方式也不那么容易記憶。我的回答也很簡單，你應(yīng)該都學(xué)，然后熟能生巧，融會貫通。我前段時(shí)間讀《鞋狗》這本書，里面有一段論述相當(dāng)精彩：

在劍道中，只有在心中不再被我和你，不再被對手和他的劍，不再被自己的劍和使劍的方法所困擾時(shí)，才能達(dá)到最完美的狀態(tài)……一切都是虛空：你自己、揮舞的劍和舞劍的胳膊，即便是空虛的想法都不再存在。

利用鼠標(biāo)中鍵添加多光標(biāo)

VS Code多光標(biāo)，我們已經(jīng)學(xué)習(xí)了如何使用鼠標(biāo)添加多光標(biāo)。不得不承認(rèn)，在鼠標(biāo)的幫助下，多光標(biāo)的創(chuàng)建顯得格外便捷。我們只需按下 Option 鍵，然后在需要?jiǎng)?chuàng)建新光標(biāo)的地方，按下鼠標(biāo)左鍵即可。簡言之，就是按住 Option 鍵，然后哪里需要點(diǎn)哪里。

不過，VS Code 中還有一個(gè)更加便捷的鼠標(biāo)創(chuàng)建多光標(biāo)的方式。當(dāng)然，這首先要求你的鼠標(biāo)擁有中鍵。你只需按下鼠標(biāo)中鍵，然后對著一段文檔拖出一個(gè)框，在這個(gè)框中的代碼就都被選中了，而且每一行被選中的代碼，都擁有一個(gè)獨(dú)立的光標(biāo)。

我們已經(jīng)嘗試了用多種方法去創(chuàng)建光標(biāo)然后修改代碼，現(xiàn)在我們又為鼠標(biāo)用戶多提供了一種更為便捷的操作方式。嘗試掌握它們吧，我相信這些便捷操作肯定能為你的高效編程之路盡一份力的。