VSCode怎么創(chuàng)建多光標(biāo)? vscode多光標(biāo)操作方法

VSCode 多光標(biāo)特性,在我們的日常編碼過程中,有很多工作,它本身就是具有“重復(fù)”屬性的。比如你需要把多個單詞的第一個字母從小寫變成大寫,這種跟業(yè)務(wù)邏輯相關(guān)的重復(fù)性操作,編輯器很難為它們一個個單獨做優(yōu)化。
而 VS Code 的多光標(biāo)特性其實就是用來解決這類問題的。當(dāng)你在一個文本框或者某個輸入框里打入字符時,會有一個豎線來顯示你將要輸入文字的位置,這就是“光標(biāo)”。顧名思義,多光標(biāo)其實就是多個輸入位置,這里你可以腦補(bǔ)下多個豎線的場景。
多光標(biāo)特性允許你在輸入框的多個位置創(chuàng)建光標(biāo),這樣你就可以在多個不同的位置同時輸入文字或者執(zhí)行其他操作。是不是很酷?
比如我上面提到的例子,你想把多個單詞的第一個字母從小寫變成大寫。這個時候你只需要在每個單詞的開頭創(chuàng)建一個光標(biāo),然后按住 “shift + 右方向鍵” 選中這些單詞的第一個字母,最后執(zhí)行 “轉(zhuǎn)換為大寫” ,這樣這些被選中的字符,就可以全部被轉(zhuǎn)換成了大寫了。
那怎樣才能創(chuàng)建多個光標(biāo)呢?這其中又有什么規(guī)則?別急,且聽我道來。
創(chuàng)建多個光標(biāo)
我還是以一段 CSS 代碼作為例子來介紹吧,如果你要練習(xí),直接把這段代碼復(fù)制到編輯器中即可。
.foo { padding: 5; margin: 5; font-size: 5;}
你可以看到,在上面這段 CSS 代碼中,所有屬性的值都是“5”,但你可能覺得這樣的寫法不規(guī)范,想把它們都改成 “5px”。之前你肯定是吭哧吭哧挨個在5后面加“px”。而現(xiàn)在,有了多光標(biāo)特性之后,你第一步要做的事情,就是把光標(biāo)移動到第一個 “5”的前面。接下來就有兩種操作方式可以選擇。
使用鼠標(biāo)
第一種添加多光標(biāo)的方式,就是使用鼠標(biāo)。在鍵盤上按住 “Option”(Windows 上是 Alt),然后鼠標(biāo)點在第二個“5”之前,那么第二個光標(biāo)就創(chuàng)建好了?,F(xiàn)在你可以看到兩個光標(biāo),第二個光標(biāo)比第一個要細(xì)一點。
聰明的你肯定知道通過同樣的方式來創(chuàng)建第三個光標(biāo)。然后,按下右方向鍵,將光標(biāo)們移動到 “5”的后面,輸入“px”。這樣,“5”后面就都已經(jīng)加上“px”了,而這中間,你只做了一次輸入。是不是很方便?
使用鍵盤
第二種方式是使用鍵盤,但是比第一種方式要多兩個步驟,我們來一起看看是為什么。
首先你還是先移動光標(biāo)到第一個“5”的前面。然后按下 “Cmd + Option + 下方向鍵”(Windows 上是 “Ctrl + Alt + 下方向鍵”),在當(dāng)前光標(biāo)的下面創(chuàng)建一個光標(biāo)。
相信你已經(jīng)看出來了,第二個光標(biāo),由于就在第一個光標(biāo)的正下方,所以它不在第二行的“5”前面。不過沒關(guān)系,我們有辦法搞定它。先別急,你還是如法炮制,把第三個光標(biāo)創(chuàng)建好。
下面你該嘗試把光標(biāo)移動到正確的位置啦。雖說現(xiàn)在三個光標(biāo)的位置都是散亂的,沒有什么規(guī)則,但你可以讓它們移動到類似的位置:按下 “Cmd + 右方向鍵”(Windows 上是 End),這樣它們就都移動到每一行的末尾了。
到這里問題就簡單了,你只需按下 “左方向鍵” 將光標(biāo)移動到 5
的后面,然后輸入 px
即可完成整個操作。
對于這個樣例而言,第一種方案比第二種要方便,但這兩種方法解決問題的思路是一致的。前者通過鼠標(biāo)操作,把光標(biāo)移動到了你期望的位置,然后再執(zhí)行別的操作;后者則是運用了 VS Code 內(nèi)置的其他命令,把光標(biāo)最終移動到你想要的位置。
在第二種方案中,你是把光標(biāo)全部移動到行末,從而統(tǒng)一了光標(biāo)的位置,進(jìn)而進(jìn)行“重復(fù)性”的操作。但這個問題的解決方案不是唯一的,你也可以想一想,還有沒有其他別的解法。
在這里,我還是想重復(fù)下我之前說過的一個觀點,使用這樣的功能的時候,你可以想想如果你是設(shè)計者,你會怎么樣來設(shè)計多光標(biāo)特性。閉著眼睛順著這個路徑思考,也許你會更容易理解和記住 VS Code 的模式。
創(chuàng)建多光標(biāo)的兩個特別命令
接下來,我再給你介紹兩個關(guān)于多光標(biāo)的創(chuàng)建的特別方法,如果你還沒有消化上面的內(nèi)容,也先別急,等把后面的全部看完之后再回去練習(xí)。
Cmd + D
首先講第一種,還是上面的代碼,你把光標(biāo)移動到數(shù)字“5”之前,按下 “Cmd + D”,這樣第一個“5”就被選中了;然后再按一次 “Cmd + D”(Windows 上是 Ctrl + D),你可以看到,第二個“5”也被選中了。
“Cmd + D” 這個命令的作用是,第一次按下時,它會選中光標(biāo)附近的單詞;第二次按下時,它會找到這個單詞第二次出現(xiàn)的位置,創(chuàng)建一個新的光標(biāo),并且選中它。這樣只需要按下三次,你就選中了所有的“5”。這個時候你再按下 “右方向鍵”,輸入“px”,即可完成任務(wù)。
之所以說這個方法特別,是因為它的適用情況比較特別:處理多次出現(xiàn)的“相同”單詞。如果你要處理的文本并不是相同的,那么這個方法就不適用了。
Option + Shift + i
接下來講講第二種,是跟代碼行批量處理有關(guān),也還是用的前面的代碼。首先你選擇多行代碼,然后按下 “Option + Shift + i” (Windows 上是 Alt + Shift + i),這樣操作的結(jié)果是:每一行的最后都會創(chuàng)建一個新的光標(biāo)。
同樣的,這種方法是基于代碼行的,如果你的需求是在同一行添加多個光標(biāo),那么就不適用了。
就上面的例子,我個人第一反應(yīng)是使用“Cmd + D”這種方式來處理。也許你會問,是不是學(xué)習(xí)一種方式就夠了呢?畢竟這些方式也不那么容易記憶。我的回答也很簡單,你應(yīng)該都學(xué),然后熟能生巧,融會貫通。我前段時間讀《鞋狗》這本書,里面有一段論述相當(dāng)精彩:
在劍道中,只有在心中不再被我和你,不再被對手和他的劍,不再被自己的劍和使劍的方法所困擾時,才能達(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 鍵,然后在需要創(chuàng)建新光標(biāo)的地方,按下鼠標(biāo)左鍵即可。簡言之,就是按住 Option 鍵,然后哪里需要點哪里。
不過,VS Code 中還有一個更加便捷的鼠標(biāo)創(chuàng)建多光標(biāo)的方式。當(dāng)然,這首先要求你的鼠標(biāo)擁有中鍵。你只需按下鼠標(biāo)中鍵,然后對著一段文檔拖出一個框,在這個框中的代碼就都被選中了,而且每一行被選中的代碼,都擁有一個獨立的光標(biāo)。
我們已經(jīng)嘗試了用多種方法去創(chuàng)建光標(biāo)然后修改代碼,現(xiàn)在我們又為鼠標(biāo)用戶多提供了一種更為便捷的操作方式。嘗試掌握它們吧,我相信這些便捷操作肯定能為你的高效編程之路盡一份力的。
以上就是vscode多光標(biāo)操作方法,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
vscode鼠標(biāo)光標(biāo)動畫怎么設(shè)置? vscode修改光標(biāo)動畫樣式的技巧
VSCode快速移動光標(biāo)的雙快捷鍵? VSCode設(shè)置alt單擊可移動光標(biāo)的技巧
相關(guān)文章
- Visual Studio Code是微軟官方推出的一款實用I的代碼編輯器,下面小編就為大家詳細(xì)的介紹一下Vscode打開終端的方法,一起來看看2022-07-07
VS Code怎么設(shè)置自動檢測? Visual Studio Code開啟自動檢測的技巧
VS Code怎么設(shè)置自動檢測?這個功能能控制所有任務(wù)提供程序擴(kuò)展的provideTasks的啟用,默認(rèn)是關(guān)閉的,需要自己開啟,下面我們就來看看Visual Studio Code開啟自動檢測的技2022-07-04VSCode格式怎么設(shè)置模板化? Visual Studio Code設(shè)置格式模板的技巧
VSCode格式怎么設(shè)置模板化?VSCode中的代碼想要設(shè)置格式,該怎么設(shè)置呢?下面我們就來看看Visual Studio Code設(shè)置格式模板的技巧2022-07-04VS Code怎么禁止使用wsl配置文件? VSCode終端不顯示wsl發(fā)行版技巧
VS Code怎么禁止使用wsl配置文件?VS Code編程開發(fā)的時候,WSL發(fā)行版是可以顯示在終端下拉列表中的,如果不想顯示,該怎么操作呢?下面我們就來看看VSCode終端不顯示wsl發(fā)2022-07-01VS Code標(biāo)題模式怎么設(shè)置為可執(zhí)行文件?
VS Code標(biāo)題模式怎么設(shè)置為可執(zhí)行文件?VS Code中標(biāo)題模式是可以選擇的,該怎么設(shè)置為可執(zhí)行模式呢?下面我們就來看看VSCode設(shè)置標(biāo)題模式可執(zhí)行文件的方法2022-07-01Vscode如何關(guān)閉警報提示?Vscode關(guān)閉警報提示教程
Vscode是一款實用I的代碼編輯器,支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性,那么我們在使用的時2022-06-30Vscode如何設(shè)置垂直滾動敏感性數(shù)值?Vscode設(shè)置垂直滾動敏感性數(shù)值教程
VSCode是一個運行于 OS X,Windows和 Linux 之上的,針對于編寫現(xiàn)代 WEB 和云應(yīng)用的跨平臺編輯器,今天咱們就來看看怎么設(shè)置垂直滾動敏感性行數(shù)吧2022-06-30VSCode怎么開啟保留新線? Visual Studio Code設(shè)置保留新線的方法
VSCode怎么開啟保留新線?保留新線在設(shè)置中就可以開啟,具體在哪里呢?下面我們就來看看Visual Studio Code設(shè)置保留新線的方法2022-06-22VS Code怎么關(guān)閉php模板語言標(biāo)記? VSCode關(guān)閉格式模板設(shè)置的技巧
VS Code怎么關(guān)閉php模板語言標(biāo)記?在使用VS Code,很多功能都不知道在哪里設(shè)置,下面我們就來看看VSCode關(guān)閉格式模板設(shè)置的技巧,詳細(xì)請看下文介紹2022-06-13- VS Code中g(shù)it承諾的時間表日期在哪里設(shè)置?VS Code中配置git的時候,承諾時間表日期默認(rèn)狀態(tài)是可以更換的,該怎么設(shè)置呢?下面我們就來看看詳細(xì)的教程2022-06-13