玩转VS Code

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

(以下快捷键操作针对 windows,括号里是针对 macOS)

学习新的编辑器方法:

第一步:了解编辑器的快捷键和语言支持,快捷键值得多花时间;

第二步:开始挑剔编辑器的其他组件,但凡是跟自己的工作习惯或者工作流不匹配的,就会想办法换掉它,这是个做减法的过程;

第三步:最后一步,就是自己学习写插件了,编辑器本身的功能和社区不能够完全满足自己的需求,本着“麻烦别人不如磨炼自己”的精神,我开始自己动手。 

这个过程可以作为一个通用的学习新工具的方法。下面是我整理的日常工作中用到的快捷键和一些插件(一些常用插件就没有整理)。

code 命令行

code --help ------------------------打印命令行所支持的所有参数。

code 命令后加上文件或文件夹的地址-----------vscode 会在一个新窗口打开这个文件或文件夹

code 命令后添加参数-r ----------可以进行窗口的复用。

code -r -g 文件名:行数 ---------打开某个文件并自动跳到某一行。

code -r -d 文件 1 文件 2 ---------比较两个文件的内容

ls | code -r -     ---------------------在编辑器里显示当前项目目录下所有的文件名

基本键盘操作

Ctrl(Option) 键搭配方向键,home,end -----------主要是针对光标的移动;

shift 键搭配方向键,home,end ---------------------主要是针对文本的选择;

快捷键进阶

ctrl+shift+k (Cmd+shift+k) ----------------------------删除当前代码行;

ctrl+x/c/v (Cmd+x/c/v) ---------------------------------剪切/复制/粘贴当前代码行;

ctrl+enter/ctrl+shift+enter(Cmd+enter/Cmd+shift+enter) -------------------------------在当前行的下面或者上面开始一段新的代码;

Alt+上下方向键(Option+上下方向键) -----------------上下移动当前行。如果同时按住 shift,则是上下复制当前行;

Alt+shift+f(Option+shift+f) ---------------------------对整个文档进行格式化(插件也可以);

ctrl+shift+p —— 转置游标处的字符(ctrl+t) 调换字符位置;

ctrl+shift+p —— 转换为大写/小写 调整字符大小写;

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

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

ctrl+u(cmd+u)撤销光标的移动和选择;

小技巧:

     (1).批量重命名:选中变量/方法名,按 f2,编辑新名字。所有相关的实例名字都会被修改。

!多光标

按住 alt (option)点击,可以创建多个光标。 

选中第一个后,按 ctrl+D(cmd+D) 处理多次出现的相同内容。

文件,符号,代码之间跳转

ctrl+tab -----------文件跳转

ctrl+p(cmd+p) ---------最近打开文件的列表,支持搜索

ctrl+g 行跳转-----------直接输入行数即可。

ctrl+p(cmd+p) --------某个文件某一行跳转。eg:main.js:99

符号:类定义,函数定义等等

ctrl+shift+o(cmd+shift+o)当前文件里所有符号。在@后输入:会将所有符号进行分类。

ctrl+t(cmd+t) 在所有打开的文件中搜索符号。

ctrl/F12 跳转到函数定义的位置

shift+f12 打开函数引用预览

书写 code snippet(代码片段)

代码片段:将一段常用代码抽象成模板。直接调用即可。

1. ctrl+shift+p 打开命令面板,搜索“配置用户代码片段”回车打开。在列表选择语言;eg:JavaScript

2. 这时打开一个下图的 JSON 文件,我们把 7-14 行取消注释。 


代码片段

 必须要有“prefix”前缀和“body”内容这两个属性.“description”不是必须的。

3. Tab Stop -------$1,$2。意思是当我们按下 Tab 键之后,光标移动到的位置。默认移到$1。shift+tab 移到上一个 tab stop 的位置。


Tab Stop

4. 占位符。${1:label},在这个格式下,$1 的位置处会预先填入 label 这个值,并且选中。 


占位符

5. 多光标。在代码片段的多个位置使用同样的 tab stop。使用代码片段是就会出现多个光标。 


多光标

6. 预设变量。eg:在某个位置使用剪切板的内容,那个位置写上$CLIPBOARD就可以了。放在tab stop中 语法是 ${1:$CLIPBOARD}。

代码折叠,小地图,面包屑

1. 代码折叠不用说了,就是通过控制每段代码块前面的+/-,来实现代码的折叠。说一下它的快捷键。

折叠:ctrl+shift+左方括号(cmd+option+左方括号),当前光标所处的最内层,可以被折叠的代码就会被折叠起来;ctrl+k,ctrl+0(cmd+k,cmd+0),当前文件里所有可以被折叠的代码一次性全部折叠起来。

展开:ctrl+shift+右方括号(cmd+option+右方括号),展开最内层,可以被展开的代码块;ctrl+k,ctrl+j(cmd+k,cmd+j),当前文件里所有可以被展开的代码一次性全部展开。

基于语言定义代码折叠:(通过下图的方式包裹要折叠的代码块) 


2. 小地图和面包屑

工作区常用快捷键


Markdown

如今 Markdown 已经成为主流的文档书写语言。在 VS Code 中书写 Markdown 时,VS Code 提供了语法高亮和侧边预览的效果。

前面介绍过如何在符号中快速跳转,这个功能在 Markdown 中更加方便。可以通过符号,快速的在不同的章节直接进行跳转。 

 当然如果你打开了面包屑功能的话,你也可以通过面包屑工具栏跳转。

插件整理

1. Auto Close Tag ----------------自动闭合html标签。

2. Auto Rename Tag ------------修改html标签时,自动修改匹配的标签。

3. Code Spell Checker ----------单词拼写检查。

4. Copy Relative Path -----------获取文件相对路径。

5. Bracket Pair Colorizer --------使用颜色标识匹配的括号。当你拥有深层嵌套的对象或函数时,这个插件非常有用。

6. GitLens ---------------------------单击代码行就可以看到编辑它的人,时间,提交的内容。

7. Code Runner -------------------代码片段运行调试,支持多种语言。

8. Remove Comments -----------一键删除当前文件的注释,支持40多种语言。

9. Image preview ------------------实现图片预览功能。

10. Reactjs code snippets  -------React代码片段。


11. cssrem-------------------------- css值转rem。

12. SC Copy---------------------- 复制粘贴管理器,可通过ctrl +1,ctrl +2,ctrl +3...以此类推,复制多个,粘贴则是Alt+1,Alt+2,Alt+3...一一对应粘贴的内容。

结语

欢迎各位指正和补充,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350