开始使用VSCode

2018-10-22  本文已影响0人  建国_e12f

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没有默认快捷键

删除操作

首先了解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 + 鼠标左键 来打开超级链接。

上一篇下一篇

猜你喜欢

热点阅读