這篇文章帶大家聊聊VSCode又酷又實用的多遊標編輯,介紹一下添加並使用多遊標的方法,希望對大家有所幫助!
如果要說 VSCode 哪個特性極大的提高了編碼效率,多遊標編輯絕對是其中之一。多遊標編輯讓我們避免重複進行相同的文字操作,VSCode 內建的和第三方擴充功能提供的文字處理指令更是能極大的增強多遊標編輯的彈性。希望透過閱讀這篇文章,能夠教導讀者如何在日常編輯中靈活運用多遊標編輯。 【推薦學習:《vscode入門教學》】
內容大綱:
按住⌥鍵不放,再將遊標移到任何你想新增遊標的地方直接點擊就會增加一個遊標。
VSCode 中和遊標相關的快速鍵中都有⌥ 鍵
⌘
⌘
⌥
↑: 在上一行同一列新增遊標新增選取範圍VSCode 編輯器中可以同時存在多個遊標,也可以同時存在多個選取範圍。在 VSCode 中大多數新增選區的命令,新增選區的同時也會新增一個遊標。因此我們可以利用新增選取範圍的快捷鍵來新增多遊標。 常用的有:
⌘
D:新增選取範圍到下一個查找到的匹配,如果匹配到多個,每觸發一次就多加入一個⌘ ⇧ L: 新增選取範圍到所有查找到的符合
⌘
D是添加選區到下一個查找到匹配,那麼大概率就會有一個命令用於新增選區到前一個查到的符合。
如過要查找的文字比較複雜,我們可以直接先打開搜索,利用搜尋框提供的大小寫忽略
,###匹配整個單字###,###正規### 功能來尋找複雜的文本,再使用###⌘### ###⇧### ###L###來選取所有。 ##################如果已經有一個選取範圍###,我們可以使用快速鍵###⌥### ###⇧### ###I ###來在選取範圍的所有行尾加上遊標。如果這時候你想將遊標移到行首,直接輸入 ###Home### 鍵即可。 ######下面的範例就是先選取多行,再將遊標加入所有行的行尾,將TypeScript 的interface 改成使用逗號來分隔屬性:############ ###遊標移動######多遊標編輯的時候顯然是無法使用滑鼠定位的,這就要求我們使用按鍵去移動。最基本的上下左右四個箭頭,Home, End 鍵就不用多說了。除此之外,常用的還有每次移動一個單字,或是單字的一部分。 ######透過搜尋 ###cursor right###,###cursor end### 之類的可以查看和移動遊標相關的快捷鍵:############單字層級的移動是非常常用的:
之前說過VSCode 指令的對稱設計,⌥ →是向右移動到下一個詞尾,那麼⌥ ←就是向左移動上一個詞首。
而且這裡也驗證了之前我們說的,和遊標相關的快捷鍵都有⌥。所以我們自訂快捷鍵時,和遊標相關的快捷鍵最好也帶上⌥。例如可以定義⌥ J為移動到上一個git change 處,再對稱式設計⌥ K移動到下一個git change 處。方便記憶,也方便搜尋。
有些Mac 用戶可能會覺得遊標移動太慢,這個可以在設定
-> 鍵盤
中調節,讓遊標移動的更絲滑:
重複前延遲
滑桿以設定字元開始重複前的等待時間。 按鍵重複
滑桿以設定字元重複的速率。 建議把 按鍵重複
速度調快,這樣遊標移動就會更快更絲滑。
在多遊標編輯時,最常見操作便是移動,選中,刪除,插入等。
##稍微列舉幾個例子驗證這個規律:移動遊標的快速鍵加上⇧就是選取移動區域的快速鍵
⌥
→
是向右移動到單字的下一個部分,
# ⇧vscode-smart-clicks←:減小選取範圍#最近antfu 有寫一個用雙擊來智慧選取文字的擴展,雖然和多遊標編輯沒啥關係,不過有興趣的讀者可以體驗:
。 刪除文字移動遊標的快速鍵加上⌫鍵就是向左刪除遊標移動區域的快速鍵,加上fn
⌫
就是向右刪除遊標移動區域的快速鍵
⌫
: 向左刪除到詞首
⌫
因為backspace 本身就帶有方向性,因此快捷鍵裡面不需要搭配方向鍵。
在多遊標編輯時我們可以藉助 VSCode 自帶的或第三方擴充功能提供的指令來快速插入特定文字或將選取文字轉換成特定文字。 letterCase
舉例,轉換結果分別為:Transform to Uppercase:LETTERCASE
舉個實際的使用例子,例如我們要把一堆原本是小駝峰的常數改成全大寫:
除了VSCode 內建的文字處理指令,還可以藉助第三方插件,這裡推薦:Text Power Tools。推薦原因:維護積極,功能豐富。
功能非常多,讀者可以查看擴充主頁自行了解。我覺得如果你沒有探索精神和折騰的能力估計也看不到文章這裡了。我這裡只示範插入數字的功能:
有能力的讀者也可以自己寫VSCode 擴充功能去實現更多的插入,轉換,甚至刪除等文字處理指令。需要注意的是實現的時候要處理所有選中,例如筆者的 VSCode 擴展 VSCode FE Helper 實現的將選中單字變複數的擴展是下面這樣實現的。程式碼很簡單。可以注意到裡面遍歷了所有選取範圍,所以在多遊標編輯時呼叫這個指令時能夠處理所有選取:
import { TextEditor } from 'vscode'; export default async function plur(editor: TextEditor): Promise<void> { const { default: pluralize } = await import('pluralize'); editor.edit((editorBuilder) => { const { document, selections } = editor; for (const selection of selections) { const word = document.getText(selection); const pluralizedWord = pluralize(word); editorBuilder.replace(selection, pluralizedWord); } }); }
接下來我會示範幾個我平常用到多遊標的幾個例子。對於不熟悉多遊標編輯的朋友可能看著會有點複雜,不過自己實操一遍多練練應該就沒問題。我平常開發的時候常常會用到多遊標編輯,但沒有文中示範的那麼絲滑,可能步驟也不是最少的,但還是比重複編輯效率高多了。也會常常輸錯,但沒關係反正可以撤回嘛。
眾所周知,當你學會了 ctrl c, ctrl v,你已經是個初級程式設計師了。當你不但能夠抄程式碼還能夠改別人的程式碼,那麼你已經是個成熟的程式設計師了。學會了多遊標編輯,可以大幅提高那我們修改程式碼的效率。
當我們從 stackoverflow 抄了一段 JS 程式碼下來,可能裡面有很多 var,我們可以利用多遊標編輯來將所有 var 替換成 let。
Steps:
將遊標定到var 上
⌘ ⇧ L,來選取所有var
輸入let
有時新開了一個項目,我會需要安裝很多eslint 外掛。最開始我的做法是到之前專案的 package.json 中把包名一個一個抄過來,那太麻煩了。有人說,你咋不直接把包名和版本號一塊複製到新項目的 package.json 就好了,不那樣做主要是之前項目的包版本號不一定是最新的,新項目需要安裝最新的版本。
Steps:
開啟package.json,把遊標定到第一個套件名稱
##⌘ Alt ↓新增多個遊標到多個套件名稱
#^ ⇧ →,利用smart select 選取套件名稱並
⌘ C複製
#⌘ N,新建一個臨時文件,⌘ V貼上過去
⌘ Alt ↓#在下面同一列新增多遊標
⌫,再敲一個空格就可以把整個文字複製到terminal 了
function App() { return ( <HashRouter> <Routes> <Route index element={<Home />} /> <Route path="/settings" element={<Settings />} /> <Route path="/collection" element={<Collection />} /> <Route path="/notFound" element={<NotFound />} /> </Routes> </HashRouter> ); }
export function App() { return ( <HashRouter> <Routes> <Route index element={<Home />} /> <Route path={RoutePath.Settings} element={<Settings />} /> <Route path={RoutePath.Collection} element={<Collection />} /> <Route path={RoutePath.NotFound} element={<NotFound />} /> </Routes> </HashRouter> ); } enum RoutePath { Settings = '/settings', Collection = '/collection', NotFound = '/notFound', }
#
在我 TypeScript 类型体操实例解析 这篇文章中有实现过一个将字符串字面量类型中所有字符转换成大写的类型:
type LetterMapper = { a: 'A'; b: 'B'; c: 'C'; d: 'D'; e: 'E'; f: 'F'; g: 'G'; h: 'H'; i: 'I'; j: 'J'; k: 'K'; l: 'L'; m: 'M'; n: 'N'; o: 'O'; p: 'P'; q: 'Q'; r: 'R'; s: 'S'; t: 'T'; u: 'U'; v: 'V'; w: 'W'; x: 'X'; y: 'Y'; z: 'Z'; }; type CapitalFirstLetter<S extends string> = S extends `${infer First}${infer Rest}` ? First extends keyof LetterMapper ? `${LetterMapper[First]}${Rest}` : S : S;
这个 LetterMapper
类型手敲会觉得很浪费光阴,让我们用多光标编辑酷炫的实现它:
VSCode 作为编辑器界的新生代王者,集百家之众长,除了多光标编辑还有很多可以提高编码和重构效率的特性。例如:
等等。作为一个 VSCode 老玩家,我都觉得 VSCode 还有很多使用的功能特性地方我没探索到。众所周知,折腾编辑器,折腾 shell,折腾系统,是程序员的三大乐趣。充满未知才会有趣,才能让我们热此不疲,让我们每一次发现新大陆的时候感叹自己以前的无知。
多光标编辑是 VSCode 一个非常实用的特性,熟练掌握光标的移动,选中,删除和一些常用的文本处理命令可以让我们使用多光标编辑时更加得心应手。VSCode 的快捷键设计有它的一套自己的设计哲学,理解它不但有助于我们记忆快捷键,也便于在快捷键表中搜索。在我们自定义快捷键或者编写扩展的提供默认快捷键的时候也应该要参考这套哲学。当你觉得对下前编码重构的效率不满意时,不妨折腾下编辑器,也许能够带给你意外的惊喜。
本文完。
更多关于VSCode的相关知识,请访问:vscode教程!!
以上是聊聊VSCode中怎麼加入並使用多遊標的詳細內容。更多資訊請關注PHP中文網其他相關文章!