开始使用VSCode

1.快速上手

命令面板

可以通过 F1 或者 Cmd+Shift+P 打开

你可以在命令面板中快速搜索命令并且执行。如果你的 VS Code 是简体中文版,那么你可以在命令面板里使用中文或者英文来搜索命令。VS Code 的绝大多数命令都可以在命令面板里搜到,所以熟练使用命令面板,你就可以摆脱鼠标,完全通过键盘操作来完成全部编码工作。

命令行的使用

如果你是在 macOS 上使用,安装后打开命令面板,搜索Shell 命令:在 PATH 中安装 “Code” 命令 并执行,然后重启终端模拟就可以了。

运行 code --help 来打印出 VS Code 命令行所支持的所有参数。

// 打开文件
code filename

// 如果你希望使用已经打开的窗口来打开文件,可以在 code 命令后添加参数 -r来进行窗口的复用。
code -r filename

// -g打开文件后光标定位了第n行
code -r -g package.json:128

// Diff
code -r -d a.txt b.txt

VS Code 命令行除了支持打开磁盘上的文件以外,也接受来自管道中的数据。这样你就可以将原本在命令行中展示的内容,实时地展示在 VS Code 里,然后在编辑器中搜索和修改。比如,你可以把当前目录下所有的文件名都展示在编辑器里,此时只需使用 ls | code - 命令

2. 双手不离键盘

光标的移动、文本的选择、文本的删除,以及如何为编辑器命令绑定快捷键

光标移动

移动到单词首:option + 左方向键
移动到单词末:option + 右方向键

移动到单行首:command + 左方向键
移动到单行末:command + 右方向键

对于代码块的光标移动
当你把光标放在花括号上时,只需按下 Cmd + Shift + \ 就可以在这对花括号之间跳转。

移动到文档的第一行或者最后一行
只需按下 Cmd 和上下方向键 即可

文本选择

掌握了上面的快捷键之后,你还可以非常轻松地掌握文本选择的操作。因为对于基于单词、行和整个文档的光标操作,只需要多按一个 Shift 键,就可以在移动光标的同时选中其中的文本。

对于代码块的文本选择
VS Code没有默认快捷键

  • 方法1:
    使用命令面板找到命令 选择括号所有内容 并运行。
  • 方法2:
    绑定快捷键

删除操作

首先了解mac上的Backspace键为(fn + delete)

删除行: shift + cmd + k

删除光标到行首: cmd + delete
删除光标到行尾: cmd +backspacecmd + fn + delete

删除光标的单词首:option + delete
删除光标到单词尾:option + backspaceoption + fn + delete

自定义快捷键

可以根据自己的使用习惯,给自己常用的命令指定顺手的快捷键。

打开命令面板,搜索 打开键盘快捷方式 然后执行,这时你将看到相对应的界面。
然后通过搜索找到你希望修改快捷键的命令,双击,接下来你只要按下你期望的快捷键,最后按下回车键就可以了。

比如,你可以搜索“选择括号所有内容”,双击,按下 "Cmd + Shift + ]",然后按下回车,这个快捷键就绑定上了。

3. 快捷键进阶

代码行编辑

删除一行: cmd + shift + k

剪切行: cmd + x

当前行下面开始一行:cmd + Enter
当前行上面开始一行:cmd + shift + Enter

上下移动当前行或当前选中行:option + 上下键
复制这几行,然后粘贴到当前行的上面或者下面: option + shift + 上下键

添加注释

注释掉一行: cmd + /
注释掉选中的内容:option + shift + A

代码格式化

使用插件完成

代码缩进

其他小技巧

调换字符位置:ctrl + t

调整字符的大小写: 选中内容,命令面板运行转换为大写装换为小写 ,来变换字符大小写。搜索时可直接搜索tra...前缀即可自动查找到相关命令。

将选中的多行合并为一行:ctrl + j

多行数据按字母排序:选中内容,命令面板运行 按升序排列行 或者 按降序排列行。搜索时可直接搜索sort...前缀即可自动查找排序相关命令。

撤销光标的移动和选择:cmd + u 撤销光标的移动,光标回退到上一个位置。

4. 拒绝重复,你一定要学会的多光标特性

将光标插入多行:cmd + option + 上下键

创建多光标的两个特别命令

  1. “Cmd + D”
    第一次按下时,它会选中光标附近的单词;第二次按下时,它会找到这个单词第二次出现的位置,创建一个新的光标,并且选中它。
  2. Option + shift + i
    在选中行的每行末尾插入光标

5.快速在文件、符号、代码之间跳转

文件跳转

Ctrl+Tab
cmd + shift + ]

这两个命令只能上一个下一个的移动,命令面板里提供了支持搜索的跳转方式。cmd + p 会弹出一个最近打开文件列表,支持搜索。移动到文件按 Enter即可打开文件。小技巧,移动到文件,按下cmd + Enter 可在新的窗口打开文件。

行跳转

按下 Ctrl + g 会弹出一个带冒号的输入框,输入数字,回车即可将光标移动到那一行。

介绍一个高阶组合技巧。如果你想跳转到某个文件的某一行,你只需要先按下 Cmd + P,输入文件名,然后在这之后加上 “:”和指定行号即可。

符号跳转

VS Code 项目或者文件里有哪些类、哪些函数或者标识符(我们把这些统称为符号)。

如果要在一个文件里的符号之间跳转,你只需按下 Cmd + Shift + O , 就能够看到当前文件里的所有符号。使用方向键,或者搜索,找到你想要的符号后,按下回车,就能够立刻跳转到那个符号的位置。

请注意,在按下 Cmd + Shift +O后,输入框里有一个 “@”符号,这个符号在这里的意义,我会在后面的章节里去介绍,你可以先留个心眼。这时,如果你输入 “:”,就可以将当前文件的所有符号,进行分类,这样搜索符号也就更加方便。

定义 (Definition) 和实现 (implementation) 跳转

符号跳转依托于语言插件对代码的分析,已经算得上具备一定的智能特性,但是它还是不够精确。比如说我们看到某个函数的调用,想要知道这个函数的接口定义是什么样的,它的实现细节是什么样的,光靠符号跳转,还是会不方便。我们需要的是直接跳转到定义和实现的位置,Java 程序员看到这里一定会深有感触。

当然,这个功能也需要语言本身的支持。比如说当你在使用 TypeScript 时,按下 F12,就可以跳转到函数的定义处。

也可以按下 “Cmd + F12” ,跳转到函数的实现的位置。

而在书写 JavaScript 时,因为并没有接口(interface)的概念,定义和实现恰好是相同的。

引用 (Reference) 跳转

很多时候,除了要知道一个函数或者类的定义和实现以外,你可能还希望知道它们被谁引用了,以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面,然后按下 “Shift + F12”,VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里,你选中某个引用,VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。

6. 玩转鼠标操作

文本选择

在 VS Code 中,你单击鼠标左键就可以把光标移动到相应的位置。而双击鼠标左键,则会将当前光标下的单词选中。连续三次按下鼠标左键,则会选中当前这一行代码。最后是连续四次按下鼠标左键,则会选中整个文档。

单击行号,就能够直接选中这一行。如果你在某个行号上按下鼠标,然后上下移动,则能够选中多行代码。

文本编辑

剪切 + 粘贴:拖拽选中的文本

复制 + 粘贴:拖拽选中的文本,在松开鼠标左键前按下option键即可

多光标

按住 Option 键,然后哪里需要点哪里。

悬停提示窗口

当鼠标移动到某些文本上之后,稍待片刻就能看到一个悬停提示窗口。这个窗口里会显示跟鼠标下文本相关的信息。

如果我们把鼠标移动到一个函数上面时,按下 Cmd 键 ,则能够在悬停提示窗口里直接看到该函数的实现。

在 JavaScript 或者 Java 这样的编程语言中,当我们把鼠标移动到某个变量上时,我们能够看到这个变量的定义信息。而在 CSS 中,当我们把鼠标移动到一个 CSS 规则上时,我们能看到的则是一段能够让这个 CSS 规则生效的 HTML 的样例代码。

代码跳转和链接

把鼠标移动到函数上,然后按下 Cmd 键,这时候 函数下面出现了一个下划线。然后当我们按下鼠标左键,就跳转到了函数的定义处。

当我们在编写 Markdown 这样的非编程语言的文档时,也可以通过 Cmd + 鼠标左键 来打开超级链接。

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