玩轉(zhuǎn)VS Code

~工欲善其事? 必先利其器~

(以下快捷鍵操作針對(duì) windows坚弱,括號(hào)里是針對(duì) macOS)

學(xué)習(xí)新的編輯器方法:

第一步:了解編輯器的快捷鍵和語(yǔ)言支持摹芙,快捷鍵值得多花時(shí)間;

第二步:開(kāi)始挑剔編輯器的其他組件,但凡是跟自己的工作習(xí)慣或者工作流不匹配的绑嘹,就會(huì)想辦法換掉它郭脂,這是個(gè)做減法的過(guò)程年碘;

第三步:最后一步,就是自己學(xué)習(xí)寫(xiě)插件了展鸡,編輯器本身的功能和社區(qū)不能夠完全滿(mǎn)足自己的需求屿衅,本著“麻煩別人不如磨煉自己”的精神,我開(kāi)始自己動(dòng)手莹弊。?

這個(gè)過(guò)程可以作為一個(gè)通用的學(xué)習(xí)新工具的方法涤久。下面是我整理的日常工作中用到的快捷鍵和一些插件(一些常用插件就沒(méi)有整理)涡尘。

code 命令行

code --help ------------------------打印命令行所支持的所有參數(shù)。

code 命令后加上文件或文件夾的地址-----------vscode 會(huì)在一個(gè)新窗口打開(kāi)這個(gè)文件或文件夾

code 命令后添加參數(shù)-r ----------可以進(jìn)行窗口的復(fù)用响迂。

code -r -g 文件名:行數(shù) ---------打開(kāi)某個(gè)文件并自動(dòng)跳到某一行考抄。

code -r -d 文件 1 文件 2 ---------比較兩個(gè)文件的內(nèi)容

ls | code -r -? ? ?---------------------在編輯器里顯示當(dāng)前項(xiàng)目目錄下所有的文件名

基本鍵盤(pán)操作

Ctrl(Option) 鍵搭配方向鍵,home栓拜,end -----------主要是針對(duì)光標(biāo)的移動(dòng)座泳;

shift 鍵搭配方向鍵,home幕与,end ---------------------主要是針對(duì)文本的選擇挑势;

快捷鍵進(jìn)階

ctrl+shift+k (Cmd+shift+k) ----------------------------刪除當(dāng)前代碼行;

ctrl+x/c/v (Cmd+x/c/v) ---------------------------------剪切/復(fù)制/粘貼當(dāng)前代碼行啦鸣;

ctrl+enter/ctrl+shift+enter(Cmd+enter/Cmd+shift+enter) -------------------------------在當(dāng)前行的下面或者上面開(kāi)始一段新的代碼潮饱;

Alt+上下方向鍵(Option+上下方向鍵) -----------------上下移動(dòng)當(dāng)前行。如果同時(shí)按住 shift诫给,則是上下復(fù)制當(dāng)前行香拉;

Alt+shift+f(Option+shift+f) ---------------------------對(duì)整個(gè)文檔進(jìn)行格式化(插件也可以);

ctrl+shift+p —— 轉(zhuǎn)置游標(biāo)處的字符(ctrl+t) 調(diào)換字符位置;

ctrl+shift+p —— 轉(zhuǎn)換為大寫(xiě)/小寫(xiě) 調(diào)整字符大小寫(xiě);

ctrl+shift+p —— 合并行(ctrl+j) 合并代碼行;

ctrl+shift+p —— 按升/降序排列行;

ctrl+u(cmd+u)撤銷(xiāo)光標(biāo)的移動(dòng)和選擇;

小技巧:

? ? ?(1).批量重命名:選中變量/方法名,按 f2中狂,編輯新名字凫碌。所有相關(guān)的實(shí)例名字都會(huì)被修改。

胃榕!多光標(biāo)

按住 alt (option)點(diǎn)擊盛险,可以創(chuàng)建多個(gè)光標(biāo)。?

選中第一個(gè)后勋又,按 ctrl+D(cmd+D) 處理多次出現(xiàn)的相同內(nèi)容苦掘。

文件,符號(hào)楔壤,代碼之間跳轉(zhuǎn)

ctrl+tab -----------文件跳轉(zhuǎn)

ctrl+p(cmd+p) ---------最近打開(kāi)文件的列表鹤啡,支持搜索

ctrl+g 行跳轉(zhuǎn)-----------直接輸入行數(shù)即可。

ctrl+p(cmd+p) --------某個(gè)文件某一行跳轉(zhuǎn)蹲嚣。eg:main.js:99

符號(hào):類(lèi)定義递瑰,函數(shù)定義等等

ctrl+shift+o(cmd+shift+o)當(dāng)前文件里所有符號(hào)。在@后輸入:會(huì)將所有符號(hào)進(jìn)行分類(lèi)端铛。

ctrl+t(cmd+t) 在所有打開(kāi)的文件中搜索符號(hào)泣矛。

ctrl/F12 跳轉(zhuǎn)到函數(shù)定義的位置

shift+f12 打開(kāi)函數(shù)引用預(yù)覽

書(shū)寫(xiě) code snippet(代碼片段)

代碼片段:將一段常用代碼抽象成模板。直接調(diào)用即可禾蚕。

1. ctrl+shift+p 打開(kāi)命令面板您朽,搜索“配置用戶(hù)代碼片段”回車(chē)打開(kāi)。在列表選擇語(yǔ)言;eg:JavaScript

2. 這時(shí)打開(kāi)一個(gè)下圖的 JSON 文件哗总,我們把 7-14 行取消注釋几颜。?


代碼片段

?必須要有“prefix”前綴和“body”內(nèi)容這兩個(gè)屬性.“description”不是必須的。

3. Tab Stop -------$1,$2讯屈。意思是當(dāng)我們按下 Tab 鍵之后蛋哭,光標(biāo)移動(dòng)到的位置。默認(rèn)移到$1涮母。shift+tab 移到上一個(gè) tab stop 的位置谆趾。


Tab Stop

4. 占位符。${1:label},在這個(gè)格式下叛本,$1 的位置處會(huì)預(yù)先填入 label 這個(gè)值沪蓬,并且選中。?


占位符

5. 多光標(biāo)来候。在代碼片段的多個(gè)位置使用同樣的 tab stop跷叉。使用代碼片段是就會(huì)出現(xiàn)多個(gè)光標(biāo)。?


多光標(biāo)

6. 預(yù)設(shè)變量营搅。eg:在某個(gè)位置使用剪切板的內(nèi)容云挟,那個(gè)位置寫(xiě)上$CLIPBOARD就可以了。放在tab stop中 語(yǔ)法是 ${1:$CLIPBOARD}转质。

代碼折疊园欣,小地圖,面包屑

1. 代碼折疊不用說(shuō)了休蟹,就是通過(guò)控制每段代碼塊前面的+/-俊庇,來(lái)實(shí)現(xiàn)代碼的折疊。說(shuō)一下它的快捷鍵鸡挠。

折疊:ctrl+shift+左方括號(hào)(cmd+option+左方括號(hào)),當(dāng)前光標(biāo)所處的最內(nèi)層,可以被折疊的代碼就會(huì)被折疊起來(lái);ctrl+k,ctrl+0(cmd+k,cmd+0),當(dāng)前文件里所有可以被折疊的代碼一次性全部折疊起來(lái)搬男。

展開(kāi):ctrl+shift+右方括號(hào)(cmd+option+右方括號(hào)),展開(kāi)最內(nèi)層拣展,可以被展開(kāi)的代碼塊;ctrl+k,ctrl+j(cmd+k,cmd+j),當(dāng)前文件里所有可以被展開(kāi)的代碼一次性全部展開(kāi)缔逛。

基于語(yǔ)言定義代碼折疊:(通過(guò)下圖的方式包裹要折疊的代碼塊)?


2. 小地圖和面包屑

工作區(qū)常用快捷鍵


Markdown

如今 Markdown 已經(jīng)成為主流的文檔書(shū)寫(xiě)語(yǔ)言备埃。在 VS Code 中書(shū)寫(xiě) Markdown 時(shí),VS Code 提供了語(yǔ)法高亮和側(cè)邊預(yù)覽的效果褐奴。

前面介紹過(guò)如何在符號(hào)中快速跳轉(zhuǎn)按脚,這個(gè)功能在 Markdown 中更加方便《囟可以通過(guò)符號(hào)辅搬,快速的在不同的章節(jié)直接進(jìn)行跳轉(zhuǎn)。?

?當(dāng)然如果你打開(kāi)了面包屑功能的話(huà)脖旱,你也可以通過(guò)面包屑工具欄跳轉(zhuǎn)堪遂。

插件整理

1. Auto Close Tag ----------------自動(dòng)閉合html標(biāo)簽介蛉。

2. Auto Rename Tag ------------修改html標(biāo)簽時(shí),自動(dòng)修改匹配的標(biāo)簽溶褪。

3. Code Spell Checker ----------單詞拼寫(xiě)檢查币旧。

4. Copy Relative Path -----------獲取文件相對(duì)路徑。

5. Bracket Pair Colorizer --------使用顏色標(biāo)識(shí)匹配的括號(hào)猿妈。當(dāng)你擁有深層嵌套的對(duì)象或函數(shù)時(shí)吹菱,這個(gè)插件非常有用。

6. GitLens ---------------------------單擊代碼行就可以看到編輯它的人彭则,時(shí)間鳍刷,提交的內(nèi)容。

7. Code Runner -------------------代碼片段運(yùn)行調(diào)試贰剥,支持多種語(yǔ)言倾剿。

8. Remove Comments -----------一鍵刪除當(dāng)前文件的注釋?zhuān)С?0多種語(yǔ)言。

9. Image preview ------------------實(shí)現(xiàn)圖片預(yù)覽功能蚌成。

10.?Reactjs code snippets? -------React代碼片段前痘。


11. cssrem-------------------------- css值轉(zhuǎn)rem。

12. SC Copy---------------------- 復(fù)制粘貼管理器担忧,可通過(guò)ctrl +1芹缔,ctrl +2,ctrl +3...以此類(lèi)推瓶盛,復(fù)制多個(gè)最欠,粘貼則是Alt+1,Alt+2惩猫,Alt+3...一一對(duì)應(yīng)粘貼的內(nèi)容芝硬。

結(jié)語(yǔ)

歡迎各位指正和補(bǔ)充,謝謝轧房。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末拌阴,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子奶镶,更是在濱河造成了極大的恐慌迟赃,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,080評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厂镇,死亡現(xiàn)場(chǎng)離奇詭異纤壁,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)捺信,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)酌媒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事馍佑≌瘢” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,630評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵拭荤,是天一觀(guān)的道長(zhǎng)茵臭。 經(jīng)常有香客問(wèn)我,道長(zhǎng)舅世,這世上最難降的妖魔是什么旦委? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,554評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮雏亚,結(jié)果婚禮上缨硝,老公的妹妹穿的比我還像新娘。我一直安慰自己罢低,他們只是感情好查辩,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,662評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著网持,像睡著了一般宜岛。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上功舀,一...
    開(kāi)封第一講書(shū)人閱讀 49,856評(píng)論 1 290
  • 那天萍倡,我揣著相機(jī)與錄音,去河邊找鬼辟汰。 笑死列敲,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的帖汞。 我是一名探鬼主播戴而,決...
    沈念sama閱讀 39,014評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼翩蘸!你這毒婦竟也來(lái)了填硕?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,752評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤鹿鳖,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后壮莹,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體翅帜,經(jīng)...
    沈念sama閱讀 44,212評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,541評(píng)論 2 327
  • 正文 我和宋清朗相戀三年命满,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涝滴。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,687評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖歼疮,靈堂內(nèi)的尸體忽然破棺而出杂抽,到底是詐尸還是另有隱情,我是刑警寧澤韩脏,帶...
    沈念sama閱讀 34,347評(píng)論 4 331
  • 正文 年R本政府宣布缩麸,位于F島的核電站,受9級(jí)特大地震影響赡矢,放射性物質(zhì)發(fā)生泄漏杭朱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,973評(píng)論 3 315
  • 文/蒙蒙 一吹散、第九天 我趴在偏房一處隱蔽的房頂上張望弧械。 院中可真熱鬧,春花似錦空民、人聲如沸刃唐。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,777評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)画饥。三九已至,卻和暖如春耸棒,著一層夾襖步出監(jiān)牢的瞬間荒澡,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,006評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工与殃, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留单山,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,406評(píng)論 2 360
  • 正文 我出身青樓幅疼,卻偏偏與公主長(zhǎng)得像米奸,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子爽篷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,576評(píng)論 2 349