VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

赞同是动力 ,喜爱是支撑 !
建议、疑问、话题欢迎在评论区留言哦!

我之前也是用过许多代码修正器,从NotePad++SublimeText一直到PHPStorm,最终VSC$ H ?ode。这个进程每一个修正器我都折腾了许多装备,插件和主题。开发者的修正器就等同w ; k 6 F D于一个刀客的随身佩刀,一个枪手的随身配枪。一个好的配备的配件能够大大进步[ x V咱们的战斗力。

所以关于一个好的程序员,一个好的代码修正器能够起到很大的效果,在开发的进程中能够给咱们带来许多便利、协助、功率和影响。乃至一个好的# * f 7 D P修正器能够给开发者日常编程中带来更高的喜悦感。

枪手挑选一把枪会经过几个纬度来挑9 { 6选:重量,击倒力,子弹量: A : 5 l 6和精准度等等。那对@ B w开发者来说也相同的,咱们会考虑这个修正器的插件,扩展性,兼容性,功用性,美观和快捷键等等。

其中咱们最在乎的便是:

  • 有多少有用的插件给咱们带来开发便利和功率
  • 能否兼容咱们的编程言语
  • 有没有定义或许办法跳转,让我在复杂的代码中定位到办法、变量和函数
  • 代码要看的舒服,代码高亮要美丽好看,养眼
  • 有常用的快捷键,进步开发3 @ $ z 2功率(最好让我不需求用鼠标)

总结一下其实便是“让咱们写代码更快速更愉悦更舒服

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

「始」前沿

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
要全面教咱们高效运用VSC| $ Z W T C = ( ,ode,就要讲到3大板块:快捷键插件/ K v 1 ,J I + N h F。由于内容十分之多,所以我拆分成了3篇文章提供给咱们学习。(感兴趣的童鞋能够关注一下哦 )

这篇文章首要% U * L具体解说VSCode的常用快捷键,让咱们在VSCode中编写代码时,愈加的顺手,根本能够脱离鼠标。

根本上记住这些常用的快捷键,咱们就能够立刻I % W进步运用VSCode的功率,也会进步咱们编写代码的速度!

让咱们一同成为VSCode的高档玩家!

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

「一」修正器运用

先讲讲运用修正器功用的快捷键,这些能够让咱们更快捷和顺手的运用VSCode的一些常用功用。一起能够运用M O S q b X D x 1这些R e } / 2 z快捷键发掘更多j n F h : K V修正器的隐藏功用哦。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

快捷] f ! r s / 2 r键列表检查「View Shortcut」

假如想检查一切快捷键的童鞋,能够运用一下快捷键:

Mac:Command + K,再按Command + S

Linux/Windows:Ctrl + K,再按Ctrl# t | 5 1 + 3 , + S

假如需求快速检查某一个特定的快捷键,只p . s h [ M !需求快E n U J h v yA a b 4 j [ ?键列表上方的查找栏输入直接查找即可

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

快速翻开文件「Quick open」

能够用于快速查找,然后翻开项目中的文件,当你想在一个大型项V + D , c m目中翻开某一个代码文件时,此办法十分有用。

Ma/ b k h ? h d @c: Command + P

Linux/Windows:Ctrl + P

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

小技巧

  • 输入?能够检查协助文档
  • 查找中会优先列出最近翻开过的文件
  • 假如想翻开多个文件有两种办法:(会在背面翻开新的文件,查找不] – @ K A | ~会被封闭)

    • 翻开新文件 Mac: Option + 或许 Linux/Windows:Alt +
    • 多窗口翻开 Mac: Command + 或许 Linux/Windows:Ctrl +
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

修正器指令「Command Palette」

在查找加上>. S ^ 4 L S A 1 M;前缀就能够调用指令了。修正器的指令能够做许多,能够快速查找快捷键,还能够履行插件的一些指令,十分有用哦!

Mac: Command + P

Linux/Windows:Ctrl + P

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

小技巧

想快速检查快捷键按钮也能够经过这种办D + i @ q法查找。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

拆分修正器「Splity r s @ E y Editor」

在开发的进程中,咱们会常常翻开几个文件I S J / s ? S一起修正,特别是高Y X * C n C度封装的代码就会一起在更改多个文件。

前端就更不必说的,许多时分咱们都在一起修正t ( A F = ~ % mHTML,CSS和JavaScry G a n vipt文件。

编写Vue的时分就更难受了,HTML和CSS和脚本都是在一个文件中, C (代码会十分的长,把当时文件在同一个修正器拆分开,然后分别滑动到HTMk . : 4L,CSS和脚本部分就能够一起更改了。​

Mac: Command + 或许 2,3,4

Windows: Shift + Alt + 或许 2,3,4

Linux: Shift + Alt + 或许^ + / 2,3,4

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

修正器网格布局「Editor Grid LX J fayout」

默许情况下! = n,修正器组是笔直列布局的(例如,当您拆分一个修正器,默许会横向拆分到右手边的)。可是许多时分拆分了多几个修正器就会发现每个修正器的宽度会越来越窄,可视度就会大大下降。这) ! 1 l y z C +个时分咱们希望能够运用网格布局。所以咱们能够用修正器的2x2 网格7 [ 8 1 o | & 0 )布局。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

首要咱们需求创建空的修正? x x I c器组:翻开办法检查 > 修正器布局 > 2x2 网格

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

默许情况下,封闭修正器组的最终一个修正器也将封闭整个修正组,下次要运用的时分需求从头开启网格布局,可是咱们能够在settingc ^ - m Q 3.json的装备里改动workH j Y b= T - I D , & ! ~ench.editor.closeEmptyGroups: false

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

快速翻开和封闭侧边栏「Opening and Closing the Sidebar」

在咱们专心于编程的时分,左边的侧边栏会占用咱们必定的宽度,特别是运用双屏(尤其是竖向的屏幕)或许是7 , / z 6 o :运用拆分修正器模式。​收起侧边栏能够帮咱们节约许多空间。

Mac: Command + B

Windows/Linux: Ctrl + B

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

快速翻开集成终端「Open new Termina? 5 D ^ Ml」

在开V | q , %发的进程中,咱们常常需求用到终端来履行指令。快速翻开终端会给咱们带来许多便捷。

Mac: ControlB ( R 6 [ + `

Winw w Odows/Linux: Ctrl + `

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

「二」辅佐代码编写

接下Y T ) y C I h来咱们来讲讲在编程2 # @ c p中常用的辅佐快捷键。这些快捷键能够辅佐咱们进步编写代码的速| D D f @ X O T /度和功3 & B K率,让咱们的双手更集中​在键盘上,削减耗费在键盘和鼠标切换进程的时间。
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

合并行「Join Line」

Mac:Control + JY ` + s

Linux/Windows:运用上面提到的快捷键翻开快捷键查询列表,查找”合l ^ ! 5 s 7 ` k并行”(editor.action.joinLines),鼠标放在合并行的快捷键上,然后点击修正图标,这儿) R X E E能够设置一个你喜爱的快捷i ` U键。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

代码格式化「Code Formatt2 { 5 r U 7 jing」

这个快捷键帮咱们快速调q K Y Q 1 D整代码减缩,不过我愈加引荐运用Prettier插件,这边文章后面会讲到。

Mac: Shift + Option + F

Windows:Shift + Alt + F

Linux:Ctrl + Shif- ( m = O 5 z k ^t + I

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

清楚剩余空格「Trim Trailing White Space」

这个指令协助咱们清楚代码前后的剩余空格,假^ N s C如咱们项目有设置严厉的Lint规范,这个会帮咱们削减剩余空格的报错。

Mac: Command + K Command + X

Windows/Linux:Ctrl + K Ctrl + X

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

小技巧

这个功用是能够主O v s = / / h _动履行的,不需求咱们一个个挑选去铲除,咱们能够在VSCode的装备里边设置主动铲除。下面z V n v D * / R ^教咱们两种装备办法。

运用settings.jsonO S | 2 k y W

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
  1. 翻开修正器指令(Mac:Command+P/Windows:Ctr- a s : 4l+P
  2. 在查找框输入> Open Settings,然后挑选首选项:翻开设置(json)
  3. 然后settings.confg中参加"files.trimTrailingWk u =hitespace": true,假如已存在这个装备,确保值是true
  4. 保存文件即可收效(假如没有立刻收效K S ] & x 6 S ( ],能够重启VSCode)

运用s J L可视w 2 [ S 9 Q Z )化(UI)设置

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
  1. 翻开修正器指令(Mac:Command+P/Windows:Ctrl+P
  2. 在查找框输入> Open Settings,然后挑选首选项:翻开设置(ui)
  3. 文本修正器&gtL M n;文件V U * z j u 0 = _找到Trim Trailling Whitespace而且勾上(咱们也能够在M K y V 3 J I X查找框直接输入Trim Trailling Whitespace快速找到这个装备的方位),可参考下面的截图q q y N Y 8 f
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

代码折叠「Code Folding」

在开发项目中,许多时分前端的代码在单个文件下都会越写越多,当咱们想专心看一部分或许寻觅某段代码时就颇有困难了​。一般这个时分咱们都会把一些@ p A a k o不重要的代码段折叠起来。可是手动用鼠标一个4 F N ) & q c h一个点击功率是很低的。代码折叠快捷键在这种情况就十分有用了。

折叠代码快捷键

Mac: Command + Option + [

Windows/linux: Ctrl + Shift + [

展开代码快捷键

M6 ) 0 % – E [ Dac: Command + Option + ]

Windows/linux: Ctrl + Shift + ]

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

往上/下仿制行8 0 j – { m C「Copy Line Up/Down」s : : N e c 7

在写代码的时分,咱们常常会编写一些十分相似的代码接连几遍或许是先仿制然后略微更改一下。​特别是在JS中的requi~ ^ H @ G . Cre或许import这种引进包的时分。假如咱们需求选中一行然后仿制,回车然后粘贴,这波操作确实不够快呀,有没有更快速的仿制办法呢?有的!

Mac: Shift + Option + ⬆️ / ⬇️

Windows: Shift + Alt + ⬆️ / ⬇️

Linux: Ci = k c 4trl + Shift + Alt + ⬆️ / ⬇️

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

当然,假如你不喜爱这个默许的快捷键,能够在快捷键列表中修正。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

挑选单词y * O $ 0 d a「Select Wo} c T A rd」

许多时分在开发进程中,咱们都会需求多个相同单词(多个变量名)一起修正,或许是部分办法中的单词,也或许是这个文件中的同名单词的修正。比较古老的办法便是用大局查找然后替换。

在VSCode中有一个愈加快速和简洁的办法,而且能够让你部分挑选或许是快速悉数挑选。选中后就能够一起修正选中的单词了。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

部分8 # x 6 : 6挑选

首要选* i F [中你需求的单词然后按下面的快捷键即可:

Mac: Command + D

WindowS j | (s/Linux: C5 K 4 t ]trl + D

假如咱们屡次按下快捷键,修正器会持续往下找到相同的单词,然后主动选中。

大局选中

相同首要选中你需求的单词,然后按下快捷键即可:

Mac: Command + Shift +# m H 3 L

Windows/Linux: Ctrl + Shift + L

这个唯一不相同的便是,这个会找到当时文件下的一切相同的单词,而且选中。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

跳转到特定行数「Navigate to a Specific Line」

在排查错误的时分常常会用到的一个快捷键,咱们需求找到当时文件下特定U Y &行的代码。

Mac: Command + G

Windows/Lint U k ; : X tux: Ctrl + G

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

小技巧1 S o . a d
结合咱们^ 9 ! s 7 ! }上面学习到的,o A _ = / .咱们也能够先运用快捷键(Mac:Command + P)翻开修正器指令 然后输入: 再输入行数即可。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

文件中跳转特定符号「Go to Symbol in File」

这儿我解说一下符号指的是什么,它便是在代码中的] _ i c办法或许是特点

所以在一个比较大的代码文件中,这个快捷键会十分有用。能让咱们快速找到想要修正的办法、特点或许类!

Mac: Command + Shift + O

Windows/Linux: Ctrl + Shift + O

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

小技巧

z ! E g O如文件中的符号过多,咱们能够在@后面加上:,就能够为一切符号分类让,咱们更好找到需1 y , 8 l求的符号和方位。

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

项目中跳转特定符号 「Go to Sy. ^ smbol in Workspace」

这个快捷键与文件中跳转的雷同,唯一差异便是7 c @ t ( * b m这个能够查找出整个项目中的办法特点,而且快速跳转到这些符号的方位。

Mac: Command + T

Windows/Linux: Ctrl + T

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

删去整个单词「Delete Previoul 4 # ns Word」

在咱们打错一个单词的时分,咱们常1 2 , a R b S 8常都会接连按删去键直到咱们想要从头开始的当地。其实对咱们程序员来说,打字都是飞快的,从头打过远远比一个一个字母删去来的快的多。(有些童鞋或许还会用鼠标来选中要删去的,其实在写代码的时分,能够不必鼠标尽量不必鼠标,这样速度会更快哦)只要按下这个快捷键就能够整个单词删去掉。

Mac: Command + Delete

Windows8 I E Q e X/Linux: Ctrl + Backspace

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

按单词挑选「Select by w? ] + ^ t b w l Cords」

为了在编程中脱离运用鼠标,咱们常常需求选L ) ? v % x + 0 t中一行代码中的几个单词,这个快捷键能够让咱们快速做到这样的操作。

Mac: Command + Shift + ← / →

W_ ; ( l u } 5 U nindows/Linux: Ctrl + Shift + ← / →

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

快速仿制当时行「Duplicate Line」

用过IDEF x j的根本都很了解{ & E 9这个操作,便是快速往下仿制当时行的代6 3 K ` s 4码。这个在编程进程中也是十分有用。​

其实咱们能够选中一段代码,按下这个快捷, T M G !键也能够​往下仿制整个内容哦。

Mac: Command + Shift + D

Windows/Linux: Ctrl + Shift + D

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

删去一行「Deleting a Line」

用于快速删去一整行的代码。

Mac: Command + X

Windows/Linux: Ctrl + X

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

往上/下增加r q 7 d =一起修正「Add Cursor Above/Below」

用过SublimeText的同学应该都很了解这个功用。咱们能够在多个方位增加鼠标修正点,然后一起修正。VSCode4 ! ? x f k也有这样的快捷键。

Mac: Command + Option + ↑ / ↓

Wind} 3 B o O F A Bows/Linux: Ctrl + Alt + ↑ / ↓

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

小技巧

假如想和上图相同,在特点的单词前增@ X % k 9加好一, h Z i C起修正鼠标点后,一下子即跳到一切特点名的最终面,咱们只需求先在一切名字前面k $ z参加一起修正鼠标然后用一f ! D ^下快捷键h $ k I即可:g Z Z x u s 3 L


Mac: Command +

Windows/Linux: Ctrl +

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

多行选中一起修正 「Column SelectiI X P , 4 ( Aon」

这个快捷键需求合[ V P作鼠标一同运用。咱们常常会在编写代码的时分选中一大串代码进行修正,这个时分这个快捷键就十分运用。

咱们还能够按住这个快捷键,然后挑选咱们需求一起修正的方位,然后多个鼠标方位一起修正哦!

Mac: Shift + OpG : = 1 ytion

Windows/Linux: Shift + Altw $ ; y % y

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

修正“符号” 「Rename Symbol」

VSCo4 $ P 4 H % ~ Yde默许支撑JavaScript和Typ+ i _ W P JeScript的办法I e - 0 : p类名特点名等符号修正。在修正后,文件下引用到这些符号的当地都会被主动的一起修正。其他言语的支撑需求插件。

ML 6 . jacW 0 _ J O c a r: F2

Windows/Linux: F2

VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇
在这儿刺进图片描绘
VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇

「待续」总结

这儿我已介绍完一切常用的快捷键和修正器中的运用小技h Z w A _巧。许多t p b T k 1 g需求学习快捷键的小伙伴们不或许一下子就会运用和记住。温馨提示:​所以能够先收藏本文章,当需求的时分就 _ v y K 1 Y能够立刻查找找到并运用。当咱们用多了,也就自然而然熟能生巧了。

当咱们习惯于运用这些快捷z w ] 0 x键,咱们就会发现咱们代码编写速度都会有所进步的。

下一篇VSCode高档玩家宝典,我会解G p J E说VSCodeJ Y t , c Q中的一切常用插件(包括前端/后端),敬请期待!

好文引荐

  • 《前端必看9 J i ; ) A的8个HTML+% + p A i ( ( [CSS技巧》 — CSS是一个很独特的言语。看起来十分简略,可是某种特殊效果看似简略,实现起来就颇有难度。这篇文章首要是给在学习前端的童鞋分享一些新的CSS技巧,一些在前端教程和训练课堂中不会讲到的常识。第二便是让还在前端开发这条道路上的童鞋们,从头燃起对前端排版和特效的热爱和热情!
  • 《写给想学和在学编程的d k * R d K你们,学习编程的7个优点》 — 其实挑选学编程是能改动人生的。或许起先许多人学编程,报了一个编程训练班,为了便是能拿到更高的工资或许有更好的工作环境。最终坚持着坚持着,最终B c ? & & t ( %会发现编程还会给咱们带来许多个A 8 I g ~人能力和技能上的进步。
  • 《5大规律助你 成为更超卓的开发者》 — 这篇文章教授5大规律助咱们成为更超卓的开发者,在众多开发者中脱颖而出的窍门,也会在咱们的技能职业生涯中给咱们许多的协助。
  • 《用“易于改编”准则# G C – , ^ o 1 f,进步编程水平,写出更好的代码》 —T D } 0 _ ) g * $– 无论新手还是资深开发者都会常常问一个问题,“怎么写好的代码?”,要知道怎么写好代码,首要咱们要7 = 9 k Y _知道怎么样才是好的代码。要有清8 r } X c D 3 b晰的方针,才能知道如何达到方针。在《程序{ t ~ ;员修炼之道》中提到= 7 Q (的“ETC Principle” — 易于改编准则。这个准则看似简略,可是咱们越是深入思考越是觉得“简约而不简略”。

本文运用 mdnice 排版