善用 vscode 的批量和模板技巧来提效
vs code 其實有很多實用的技巧可以在日常工作中帶來很大的提效,但可能是開發(fā)中沒有相應的痛點場景,因此有些技巧接觸的人不多
本篇就來介紹下多光標的批量操作和模板代碼兩種技巧在日常工作中的提效
涉及的 vs code 技巧
不要看快捷鍵好像很多哈,主要是了解幾種可以進入多光標批量操作模式的用法
進入多光標之后的快捷鍵就是日常使用的選中、復制、粘貼了,只是以前是針對當前單個光標的操作,現(xiàn)在變成了針對多個光標的批量操作而已
如何進入多光標的批量操作模式
Ctrl + 鼠標左鍵(手動添加多個光標)
按住 Ctrl 鍵后,在哪里點擊鼠標左鍵就會增加一個光標,在原本就有光標的位置點擊鼠標左鍵,是取消當前這個光標
Ctrl + D(自動在滿足匹配規(guī)則的內(nèi)容處添加光標)
當我們選中一定內(nèi)容時,vs code 其實已經(jīng)將全文里面滿足相同規(guī)則的內(nèi)容都會給稍微呈現(xiàn)暗色來提示這是跟當前選中內(nèi)容一樣的內(nèi)容
比如上圖中但選中 </el-check 內(nèi)容時,其他相同的內(nèi)容顏色上明顯可以看出有點暗色樣式
Ctrl + D 就是將這些滿足相同匹配規(guī)則的內(nèi)容自動加上個光標,按一次往下處理一次,按一次處理一次
如果想一次性把所有滿足的都加上光標處理,快捷鍵是 Ctrl + Shift + L
Ctrl + Shift + Alt + 上下方向鍵(在當前光標上一行或下一行同列的地方添加光標)
如果你要添加多光標的場景剛好的相鄰行里同列的地方,那可以直接通過這個快捷鍵快速添加上多行的光標,就不用再鼠標左鍵一個個點過去了,也不用去尋找每一行的相同匹配內(nèi)容了
多光標后的批量操作
簡單說,你正常能做的操作,在多光標批量操作模式里也可以進行,區(qū)別只是變成了你的操作同時在多個光標中批量進行
所以當你有需要在當前代碼文件里進行多個重復操作時,就可以考慮多光標的批量操作模式了,比如國際化場景,下面會舉個實操場景
Shift + 左右方向鍵(左右移動選中單個字符)
Shift + Ctrl + 左右方向鍵(左右移動選中整個單詞)
Shift + End(選中從當前光標到當前行末尾)
Shift + Home(選中從當前光標到當前行開頭)
Ctrl + C/V(批量復制粘貼所有光標選中的內(nèi)容)
【User Snippets】如何配置模板代碼
我們可以配置一些代碼片段來自動快速生成模板代碼
比如國際化工作中需要給在 template 代碼里的中文詞條進行 {{ $t('xxx') }} 處理,常規(guī)來說是不是需要先剪切詞條,手動輸入 {{ $t('') }},最后再粘貼,如:
最后代碼不多,但也需要敲打好幾次鍵盤,如果用上模板代碼呢。
先看下如何配置模板代碼:
因為我已經(jīng)創(chuàng)建過了,所以上面動圖直接給你呈現(xiàn)模板配置代碼,你要創(chuàng)建的話,就是 New 一個自己的模板配置,然后參考類似的模板配置
創(chuàng)建完后,在代碼里只要輸入我們配置好的代碼前綴,再按 Tab 鍵,就會自動生成代碼了,如:
可能從上面的例子你沒覺得提效多少,那假如模板代碼很多呢?比如你看看這個:
可以把日常常用的一些代碼模板配置起來,輸入幾個前綴就可以自動生成部分代碼,比如請求的代碼,全局彈窗的代碼等等,這樣還省得我們自己敲,或者導出去復制粘貼
甚至說,你忘記我這篇主要介紹的是什么了嗎?當配合多光標的批量操作時,簡直是神兵利器,非常提效
實操場景
將代碼中的中文詞條都包裹上 $t 處理
這就是批量操作的提效!
上面動圖里,我用上了上面介紹的所有快捷鍵,全程沒有鼠標操作,一氣呵成,不知道為什么,這操作下來有種莫名的滿足
我先是用 Shift + 方向鍵 選中內(nèi)容,然后 Ctrl + D 來快速往我想要批量操作的內(nèi)容加上多光標,接著通過 Ctrl + 方向鍵 快速移動光標到中文詞條首個字母上,接著 Shift + End 選中光標到末尾,接著 Shift + Ctrl + 方向鍵 取消多余的選中內(nèi)容,讓每一行的光標都只選中了中文詞條,接著 Ctrl + X 剪切,再輸入 t1 + Tab 觸發(fā)模板代碼生成,最后 Ctrl + V 批量粘貼,搞定!
所以,當你熟能生巧之后,相信我,你會愛上批量操作的,不僅提效快捷,還能一定程度上解放鼠標,敲打到一半*中斷去操作鼠標是很難受的
將 el-checkbox 的 label 和 value 關系復制到一個對象里
批量復制,粘貼,是不是很提效!
總結
以上是生活随笔為你收集整理的善用 vscode 的批量和模板技巧来提效的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 如何接住一个“学渣”儿子?
- 下一篇: OfficeWeb365任意文件读取