VSCode怎么創(chuàng)建多光標? vscode多光標操作方法
VSCode 多光標特性,在我們的日常編碼過程中,有很多工作,它本身就是具有“重復”屬性的。比如你需要把多個單詞的第一個字母從小寫變成大寫,這種跟業(yè)務邏輯相關的重復性操作,編輯器很難為它們一個個單獨做優(yōu)化。
而 VS Code 的多光標特性其實就是用來解決這類問題的。當你在一個文本框或者某個輸入框里打入字符時,會有一個豎線來顯示你將要輸入文字的位置,這就是“光標”。顧名思義,多光標其實就是多個輸入位置,這里你可以腦補下多個豎線的場景。
多光標特性允許你在輸入框的多個位置創(chuàng)建光標,這樣你就可以在多個不同的位置同時輸入文字或者執(zhí)行其他操作。是不是很酷?
比如我上面提到的例子,你想把多個單詞的第一個字母從小寫變成大寫。這個時候你只需要在每個單詞的開頭創(chuàng)建一個光標,然后按住 “shift + 右方向鍵” 選中這些單詞的第一個字母,最后執(zhí)行 “轉換為大寫” ,這樣這些被選中的字符,就可以全部被轉換成了大寫了。
那怎樣才能創(chuàng)建多個光標呢?這其中又有什么規(guī)則?別急,且聽我道來。
創(chuàng)建多個光標
我還是以一段 CSS 代碼作為例子來介紹吧,如果你要練習,直接把這段代碼復制到編輯器中即可。
.foo { padding: 5; margin: 5; font-size: 5;}
你可以看到,在上面這段 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 + 下方向鍵”),在當前光標的下面創(chuàng)建一個光標。

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

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

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

對于這個樣例而言,第一種方案比第二種要方便,但這兩種方法解決問題的思路是一致的。前者通過鼠標操作,把光標移動到了你期望的位置,然后再執(zhí)行別的操作;后者則是運用了 VS Code 內置的其他命令,把光標最終移動到你想要的位置。
在第二種方案中,你是把光標全部移動到行末,從而統(tǒng)一了光標的位置,進而進行“重復性”的操作。但這個問題的解決方案不是唯一的,你也可以想一想,還有沒有其他別的解法。
在這里,我還是想重復下我之前說過的一個觀點,使用這樣的功能的時候,你可以想想如果你是設計者,你會怎么樣來設計多光標特性。閉著眼睛順著這個路徑思考,也許你會更容易理解和記住 VS Code 的模式。
創(chuàng)建多光標的兩個特別命令
接下來,我再給你介紹兩個關于多光標的創(chuàng)建的特別方法,如果你還沒有消化上面的內容,也先別急,等把后面的全部看完之后再回去練習。
Cmd + D
首先講第一種,還是上面的代碼,你把光標移動到數(shù)字“5”之前,按下 “Cmd + D”,這樣第一個“5”就被選中了;然后再按一次 “Cmd + D”(Windows 上是 Ctrl + D),你可以看到,第二個“5”也被選中了。

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

之所以說這個方法特別,是因為它的適用情況比較特別:處理多次出現(xiàn)的“相同”單詞。如果你要處理的文本并不是相同的,那么這個方法就不適用了。
Option + Shift + i
接下來講講第二種,是跟代碼行批量處理有關,也還是用的前面的代碼。首先你選擇多行代碼,然后按下 “Option + Shift + i” (Windows 上是 Alt + Shift + i),這樣操作的結果是:每一行的最后都會創(chuàng)建一個新的光標。

同樣的,這種方法是基于代碼行的,如果你的需求是在同一行添加多個光標,那么就不適用了。
就上面的例子,我個人第一反應是使用“Cmd + D”這種方式來處理。也許你會問,是不是學習一種方式就夠了呢?畢竟這些方式也不那么容易記憶。我的回答也很簡單,你應該都學,然后熟能生巧,融會貫通。我前段時間讀《鞋狗》這本書,里面有一段論述相當精彩:
在劍道中,只有在心中不再被我和你,不再被對手和他的劍,不再被自己的劍和使劍的方法所困擾時,才能達到最完美的狀態(tài)……一切都是虛空:你自己、揮舞的劍和舞劍的胳膊,即便是空虛的想法都不再存在。
利用鼠標中鍵添加多光標
VS Code多光標,我們已經(jīng)學習了如何使用鼠標添加多光標。不得不承認,在鼠標的幫助下,多光標的創(chuàng)建顯得格外便捷。我們只需按下 Option 鍵,然后在需要創(chuàng)建新光標的地方,按下鼠標左鍵即可。簡言之,就是按住 Option 鍵,然后哪里需要點哪里。
不過,VS Code 中還有一個更加便捷的鼠標創(chuàng)建多光標的方式。當然,這首先要求你的鼠標擁有中鍵。你只需按下鼠標中鍵,然后對著一段文檔拖出一個框,在這個框中的代碼就都被選中了,而且每一行被選中的代碼,都擁有一個獨立的光標。

我們已經(jīng)嘗試了用多種方法去創(chuàng)建光標然后修改代碼,現(xiàn)在我們又為鼠標用戶多提供了一種更為便捷的操作方式。嘗試掌握它們吧,我相信這些便捷操作肯定能為你的高效編程之路盡一份力的。
以上就是vscode多光標操作方法,希望大家喜歡,請繼續(xù)關注腳本之家。
相關推薦:
vscode鼠標光標動畫怎么設置? vscode修改光標動畫樣式的技巧
VSCode快速移動光標的雙快捷鍵? VSCode設置alt單擊可移動光標的技巧
相關文章
Visual Studio Code是微軟官方推出的一款實用I的代碼編輯器,下面小編就為大家詳細的介紹一下Vscode打開終端的方法,一起來看看2022-07-07
VS Code怎么設置自動檢測? Visual Studio Code開啟自動檢測的技巧
VS Code怎么設置自動檢測?這個功能能控制所有任務提供程序擴展的provideTasks的啟用,默認是關閉的,需要自己開啟,下面我們就來看看Visual Studio Code開啟自動檢測的技2022-07-04
VSCode格式怎么設置模板化? Visual Studio Code設置格式模板的技巧
VSCode格式怎么設置模板化?VSCode中的代碼想要設置格式,該怎么設置呢?下面我們就來看看Visual Studio Code設置格式模板的技巧2022-07-04
VS Code怎么禁止使用wsl配置文件? VSCode終端不顯示wsl發(fā)行版技巧
VS Code怎么禁止使用wsl配置文件?VS Code編程開發(fā)的時候,WSL發(fā)行版是可以顯示在終端下拉列表中的,如果不想顯示,該怎么操作呢?下面我們就來看看VSCode終端不顯示wsl發(fā)2022-07-01
VS Code標題模式怎么設置為可執(zhí)行文件?VS Code中標題模式是可以選擇的,該怎么設置為可執(zhí)行模式呢?下面我們就來看看VSCode設置標題模式可執(zhí)行文件的方法2022-07-01
Vscode是一款實用I的代碼編輯器,支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性,那么我們在使用的時2022-06-30
Vscode如何設置垂直滾動敏感性數(shù)值?Vscode設置垂直滾動敏感性數(shù)值教程
VSCode是一個運行于 OS X,Windows和 Linux 之上的,針對于編寫現(xiàn)代 WEB 和云應用的跨平臺編輯器,今天咱們就來看看怎么設置垂直滾動敏感性行數(shù)吧2022-06-30
VSCode怎么開啟保留新線? Visual Studio Code設置保留新線的方法
VSCode怎么開啟保留新線?保留新線在設置中就可以開啟,具體在哪里呢?下面我們就來看看Visual Studio Code設置保留新線的方法2022-06-22
VS Code怎么關閉php模板語言標記? VSCode關閉格式模板設置的技巧
VS Code怎么關閉php模板語言標記?在使用VS Code,很多功能都不知道在哪里設置,下面我們就來看看VSCode關閉格式模板設置的技巧,詳細請看下文介紹2022-06-13
VS Code中git承諾的時間表日期在哪里設置?VS Code中配置git的時候,承諾時間表日期默認狀態(tài)是可以更換的,該怎么設置呢?下面我們就來看看詳細的教程2022-06-13












