vscode 多光標

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

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

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

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

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

創(chuàng)建多個光標

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

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

CSS

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

使用鼠標

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

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

使用鍵盤

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

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

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

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

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

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

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

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

創(chuàng)建多光標的兩個特別命令

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

Cmd + D

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

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

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

Option + Shift + i

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

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

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

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

利用鼠標中鍵添加多光標

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

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

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