文本编辑器切换到VSCode上很久了,主要用来看看代码,文档,写写Markdown文档,后面慢慢的使用VSCode来写写简单的C/CPP代码,后面Flutter的,Python等都切换到VSCode上开发了,已经成了第一生产力工具了.需要花时间探索它的技巧,提高效率.今天总结了常用的一些技巧快捷键,帮助大家更高效的使用VSCode.
1.了解界面功能
1.1 命令面板
首先来看命令面板，它是 VS Code 快捷键的主要交互界面，你可以通过 F1 或者“Cmd+Shift+P ”(Windows 上是 “Ctrl+Shift+P”) 打开。这里提醒一下，如无特殊说明，我在这个专栏里默认基于macOS平台进行讲解，但也会本着为你提供方便的原则，同时给出Windows或Linux平台下的操作说明。通过编辑器来实现高效编程的思路是一致的，这和具体的使用平台无关，所以你大可不必为此担心。
你可以在命令面板中快速搜索命令并且执行。如果你的 VS Code 是简体中文版，那么你可以在命令面板里使用中文或者英文来搜索命令。VS Code 的绝大多数命令都可以在命令面板里搜到，所以熟练使用命令面板，你就可以摆脱鼠标，完全通过键盘操作来完成全部编码工作。
1.2 界面概览
第二个是界面概览，它展示了 VS Code 默认界面里的不同部件的位置、名称和快捷键。VS Code 强调无鼠标操作，但是对于初学者而言快捷键的记忆是个麻烦，这个界面恰好可以帮助你渡过最初的不适应阶段。
1.3 交互式演习场
第三个是交互式演习场，打开这个界面，你会看到一个全英文的初学者教程，其中通过各种交互示例给出了 VS Code 的核心功能，展示了一些高级代码编辑功能的使用，每个功能都会有一个代码片段和编辑器供你实时使用。
2.命令行的使用
接下来我们看一下命令行的使用。命令行你应该不陌生，我们脑海中的大神级程序员都是可以在Linux中随意敲打长串的命令，或是与黑客斗智斗勇，或是解决某个紧急的线上问题。而对于VS Code而言，最基础的命令行当然是让你能够不动鼠标，就能快速打开界面了。
如果你是 Windows用户，安装并重启系统后，你就可以在命令行中使用 code 或者 code-insiders了，如果你希望立刻而不是等待重启后使用，可以将 VS Code 的安装目录添加到系统环境变量 PATH中， Windows 64 位下的 VS Code 安装路径是 C:\Program FIles\Microsoft VS Code下。
如果你是在 macOS 上使用，安装后打开命令面板，搜索Shell 命令：在 PATH 中安装 “Code” 命令并执行，然后重启终端模拟就可以了。
接下来，我们看一下 VS Code 的命令行都支持哪些操作，这里我先运行了 code --help来打印出 VS Code 命令行所支持的所有参数。
$ code --help
Visual Studio Code 1.43.2
Usage: code [options][paths...]
To read from stdin, append '-' (e.g. 'ps aux | grep code | code -')
Options
-d --diff <file> <file> Compare two files with each other.
-a --add <folder> Add folder(s) to the last active window.
-g --goto <file:line[:character]> Open a file at the path on the specified line and character position.
-n --new-window Force to open a new window.
-r --reuse-window Force to open a file or folder in an already opened window.
-w --wait Wait for the files to be closed before returning.
--locale <locale> The locale to use (e.g. en-US or zh-TW).
--user-data-dir <dir> Specifies the directory that user data is kept in. Can be used to open multiple
distinct instances of Code.
-v --version Print version.
-h --help Print usage.
--telemetry Shows all telemetry events which VS code collects.
--folder-uri <uri> Opens a window with given folder uri(s)
--file-uri <uri> Opens a window with given file uri(s)
Extensions Management
--extensions-dir <dir> Set the root path for extensions.
--list-extensions List the installed extensions.
--show-versions Show versions of installed extensions, when using
--list-extension.
--category Filters installed extensions by provided category, when using
--list-extension.
--install-extension <extension-id | path-to-vsix> Installs or updates the extension. Use `--force` argument to
avoid prompts.
--uninstall-extension <extension-id> Uninstalls an extension.
--enable-proposed-api <extension-id> Enables proposed API features for extensions. Can receive one or
more extension IDs to enable individually.
Troubleshooting
--verbose Print verbose output (implies --wait).
--log <level> Log level to use. Default is 'info'. Allowed values are 'critical', 'error',
'warn', 'info', 'debug', 'trace', 'off'.
-s --status Print process usage and diagnostics information.
--prof-startup Run CPU profiler during startup
--disable-extensions Disable all installed extensions.
--disable-extension <extension-id> Disable an extension.
--inspect-extensions <port> Allow debugging and profiling of extensions. Check the developer tools for the
connection URI.
--inspect-brk-extensions <port> Allow debugging and profiling of extensions with the extension host being
paused after start. Check the developer tools for the connection URI.
--disable-gpu Disable GPU hardware acceleration.
--max-memory Max memory size for a window (in Mbytes).
最基本的命令行使用方式是在 code 命令后加上文件或者文件夹的地址，这样VS Code 就会在一个新窗口中打开这个文件或文件夹。
如果你希望使用已经打开的窗口来打开文件，可以在 code 命令后添加参数 -r来进行窗口的复用。
你也可以使用参数 -g <file:line[:character]> 打开文件，然后滚动到文件中某个特定的行和列，比如输入 code -r -g package.json:128命令，你就可以打开 package.json 这个文件，然后自动跳转到 128 行。这个命令可以方便你从终端里快速地在 VS Code 里打开一个文件进行预览，一个特别常见的例子就是当我们使用脚本执行某个命令，这个命令告诉我们某个文件的某一行出现了错误，我们就能够快速定位了。
VS Code 也可以用来比较两个文件的内容，你只需使用 -d参数，并传入两个文件路径，比如输入 code -r -d a.txt b.txt命令，就可以比较a.txt和b.txt两个文件的内容了。有了这个命令，你就可以既使用命令行运行脚本，也可以借助 VS Code 的图形化界面进行文件内容的对比了。
VS Code 命令行除了支持打开磁盘上的文件以外，也接受来自管道中的数据。这样你就可以将原本在命令行中展示的内容，实时地展示在 VS Code 里，然后在编辑器中搜索和修改。比如，你可以把当前目录下所有的文件名都展示在编辑器里，此时只需使用ls | code -命令。
另外，VS Code 命令行还能够管理插件，查看 VS Code 的运行情况，记录和分析 VS Code 运行性能. 在我的日常工作中，经常会使用终端来操作脚本。这个时候，如果我需要打开 VS Code，使用命令行来打开 VS Code 再方便不过了。另外 VS Code 的命令行的各个参数，其实能够定制 VS Code 是怎样运行的，比如--disable-extensions、--max-memory，它们都有特殊的应用场景。当然，如果你发现了哪个配置是你特别希望默认就打开的，那么你可以在 shell 环境里创建一个别名 (alias)，而不用局限于 code 这个命令。
3.编辑区操作
3.1光标移动
移动光标最常用的就是方向键，但是方向键每次只能把光标移动一个位置，可以说是一种相对低效的方式。试想你打算把光标移动到当前行的行末，在没有鼠标的情况下，你可能需要按下右方向键几秒甚至十几秒钟。
不过，不用担心。虽然 VS Code 是基于 Web 技术开发的非原生应用，但是它支持针对单词、行、代码块、整个文档等多种光标移动方式。
今天，我会借助一段非常简单的 5 行 JavaScript 代码来讲解这些操作。
function foo() {
bar();
}
foo();
首先是针对单词的光标移动。这个你应该比较熟悉，绝大多数原生的编辑应用和文本框都支持。这也是我自己最常用的一组快捷键。
下面这张图显示，第一行代码中的第一个单词是 function，一共8个字符，光标的位置在第五个字符 t 的后面。当你想把光标直接移动到整个单词，也就是 function 的前面，你只需按下 Option（Windows 上是 Ctrl 键）和左方向键。相反，如果要把光标移动到单词的末尾，只需要按下 Option 和右方向键就好了。
我们都知道，一直按着方向键，光标就可以不停地，一个字符一个字符地在文档中移动。但如果你同时按住 Option 和方向键，那么光标移动的颗粒度就变成了单词，你就可以在文档中以单词为单位不停地移动光标了。
第二种方式是把光标移动到行首或者行末。比如第一行代码是 function foo() {，你只需按住 Cmd + 左方向键（Windows 上是 Home 键），就可以把光标移动到了这行的第一列；而如果你按住 Cmd 和右方向键（Windows 上是 End 键），光标就会被移动到 { 的后面。
接下来一种是对于代码块的光标移动。很多编程语言都使用花括号将代码块包裹起来，比如 if、for 语句等，你很可能会希望通过一个快捷键，就能实现在代码块的始末快速跳转。比如在这5行代码示例中，第一行到第三行代码是函数 foo 的定义，由一对花括号包裹起来，当你把光标放在花括号上时，只需按下 Cmd + Shift + \（Windows 上是 Ctrl + Shift + \），就可以在这对花括号之间跳转。
最后一种基础的光标操作就是移动到文档的第一行或者最后一行，你只需按下 Cmd 和上下方向键即可（Windows 上是 Ctrl + Home/End 键）。
3.2文本选择
掌握了上面的快捷键之后，你还可以非常轻松地掌握文本选择的操作。因为对于基于单词、行和整个文档的光标操作，你只需要多按一个 Shift 键，就可以在移动光标的同时选中其中的文本。
比如说，你把光标放在第一行代码第四个字符 c 的后面，按下 Option 加左方向键，你就可以把光标跳转到 function 这个单词的开头，这个在前面我有讲过。如果你同时按下 Option + 左方向键+ Shift 键，那么你就能把光标到 function 单词开头之间的所有字符全部选中，也就是选中 func 这四个字符。
同理，假设说光标放在第二行，然后你按下 Cmd、Shift 和上下方向键，就能把第二行光标到第一行，或者最后一行之间的字符选中。是不是很简单呢？
对于代码块的文本选择， VS Code 默认没有绑定快捷键。那么，是不是就没办法了呢？
当然不是。你可以先使用命令面板找到命令 “选择括号所有内容” 并运行。后面我还会讲述如何为一些未绑定快捷键的命令绑定自己熟悉的快捷键，请稍安勿躁。
3.3删除操作
了解了光标移动和文本选择，再来看删除操作，就变得相对简单了。
比如你想把当前行中光标之前的文本全部删除，就可以先选中这段文本（Windows/Linux: Home + Shift，macOS: Cmd + Left + Shift )，然后再按删除键。不过对于频繁使用的删除操作，你肯定希望单次操作就可以完成任务，而不是重复地选择文本然后删除，那么你需要记住下面几个命令。
(1)假设你把光标放在第二行代码的中间位置，然后按下 Cmd 和 Backspace（MacOS上就是“fn + delete”的组合，Windows 上未绑定快捷键，可以打开命令面板运行“删除右侧所有内容”），就能够把第二行代码光标后（右侧）的字符全部删掉。
(2)按下 Cmd 和 Delete 键则是删除当前行中光标前（左侧）的所有内容（Windows 上未绑定快捷键，可以打开命令面板运行“删除左侧所有内容”）。
(3)删除单词内的字符与此类似。假设把光标放在第一行第四个字符 c 的后面。Option 加左方向键把光标移动到 function 这个单词的开头，Option加左方向键再加 Shift 即可选中 func 这四个字符，而Option 加 Delete 则会删除 func 这四个字符。这里你可能看出来了，这些快捷键共同的是 Option 键，然后通过按下 Shift 或者 Delete 键，来达到不同的效果。
(4)相反地，Option 加 Backspace（MacOS上就是“fn + delete”的组合） 则会删除 function 的后四个字符 tion。
3.4自定义快捷键
前面我们提到，VS Code 内置了很多的命令，但是并没有为每个命令都提供一个快捷键，毕竟快捷键的组合总是有限的。不过 VS Code 提供了快捷键的修改和自定义功能，这样你就可以根据自己的使用习惯，给自己常用的命令指定顺手的快捷键。
首先你可以打开命令面板，搜索“打开键盘快捷方式”然后执行，这时你将看到相对应的界面。
然后通过搜索找到你希望修改快捷键的命令，双击，接下来你只要按下你期望的快捷键，最后按下回车键就可以了。
4.快捷键
4.1代码行编辑
下面我就以一段 CSS 代码作为例子，来和你分享下代码行编辑中的高阶技巧。
.foo {
padding: 5px;
margin: 5px;
font-size: 5px;
}
在上一讲中，你知道了要删掉一行代码，你可以选中它，然后再按 Delete 键。不过还有一个快捷键，那就是直接按下 “ Cmd + Shift + K ” (Windows 上是 “Ctrl + Shift + K”)，当前代码行就可以被删除了。
如果你只是想要剪切这行代码，那么你直接按下 “ Cmd + x ” (Windows 上是 “Ctrl + x”) 即可。
我想你肯定很清楚，“Enter” 键的基础作用是能在编辑器里光标所在的位置添加一个换行符。但是很多时候你可能并不是单纯地要将一行分成两段，而是希望在这行的下面或者上面开始一段新的代码。
这个功能对应的快捷键非常好记，它跟 “Enter”键十分接近。当你想在当前行的下面新开始一行时，你只需按下 “Cmd + Enter” （Windows 上是 “Ctrl + Enter”）；而当你想在当前行的上面新开始一行时，你只要按下 “Cmd + Shift + Enter” （Windows 上是 “Ctrl + Shift + Enter”）就行了。
当你想移动一段代码时，一般你可能会分三步走：先选中，再剪切，最后粘贴。不过我更喜欢的是按住 “Option + 上下方向键”（Windows中就是“Alt + 上下方向键”） ，将当前行，或者当前选中的几行代码，在编辑器里上下移动。
如果你同时按住 “Shift” 键的话，也就是 “Option + Shift + 上下方向键”（Windows中就是“Alt + shift + 上下方向键”），那就可以复制这几行，然后粘贴到当前行的上面或者下面。
另外，你在尝试“Option + 上下方向键”这个快捷键“上下移动”时，可能也发现了，当你把一段代码移动到花括号里面或者外面时，代码前的制表符或者空格的数量会自动发生改变，这样你就不需要移动完代码后再调整了。
4.2编程语言相关的命令
上面我介绍的几个命令，都是编辑器的基础功能，它和你所使用的语言无关。而接下来我要介绍的这几个命令，则会根据编程语言的不同，产生不同的结果。
4.2.1添加注释
你在调试代码时，肯定经常需要临时地把一些代码注释掉。如果你要将一行代码注释掉，你只需按下 “ Cmd + / ” （Windows 上时 “Ctrl + /”）。如果你需要把一整段代码注释掉，按下 “ Option + Shift + A”即可。
你可以分别在 JavaScript 和 CSS 文件里使用这两个命令，你会发现这个命令会分别使用 JavaScript 和 CSS 各自的注释语法来添加注释。
当你在 JavaScript 文件里按下 “Cmd + /”，VS Code 在这行代码前添加了两个 “/”。
当你在 CSS 文件里按下 “Cmd + /”，VS Code 则是在这行代码前添加了 “/* ” ，再最后添加了 “ */”。
4.2.2代码格式化
我们平常在做自己的小项目或者随便写一些脚本的时候，可能不会太在意代码的格式。不过一旦开始团队合作，整个项目组则会选择同一个代码风格和格式以有效降低协同成本。所以定期对自己写的代码进行格式化是个很好的习惯。
你可以按下 “Option + Shift + F” （Windows 上是 Alt + Shift + F）来对整个文档进行格式化，VS Code 也会根据你当前的语言，选择相关的插件。当然，前提条件是你已经安装了相关插件。
你也可以选中一段代码，然后按下 “Cmd + K Cmd + F” （Windows 上是 Ctrl + K Ctrl + F），这样只有这段被选中的代码才会被格式化。
4.2.3代码缩进
有的时候，你会觉得代码格式化太重了，需要的可能只是把代码里的缩进调整一下。这时你可以打开命令面板（快捷键“Cmd + Shift + P”），搜索 “缩进”，然后使用 “重新缩进行” 将整个文档的缩进进行调整，但更多时候，你只需要运行 “重新缩进选中行” 来调整部分选中代码行的缩进。
4.2.4其他
上面的这些命令和快捷键，可以说是 VS Code 团队在开发编辑器时精心设计和规划的。不过 VS Code 里还有不少有趣的命令，它们看起来跟其他命令没有什么联系，快捷键的设置也看似没有什么章法。
但其实它们中的大部分都是来自于社区，开发者是在多年软件开发和编辑器使用的过程中，自己摸索出的一些命令和快捷方式，然后在社区里广为流传，于是乎官方也就把这些功能做到了 VS Code 中。
下面我再快速列举几个小技巧，希望你能记住，并快速练习，以成为自己的肌肉记忆。
第一个是调换字符的位置。你可以按下 “Ctrl + t” （Windows 上未绑定快捷键，可以打开命令面板，搜索 ”转置游标处的字符“） 来把当前光标前后的字符调换位置。
第二个是调整字符的大小写，我估计这个你会经常用到。你可以选中一串字符，然后在命令面板里运行“转换为大写”或 “转换为小写”, 来变换字符的大小写。
第三个是合并代码行。有的时候你可能会为了避免代码看起来过于冗余，就会把比较短小的几行代码合并到一行里面去。这时，你只需要按下 “ Ctrl + j ” （Windows 上未绑定快捷键，可以打开命令面板，搜索 ”合并行“）就可以了，而不需要不断地调整光标、删除换行符。
第四个是行排序。无论是你在写代码，还是写 Markdown，你都可以把代码行按照字母序进行重新排序。不过这个命令比较小众，VS Code 并没有给这个命令指定快捷键，你可以调出命令面板，然后搜索 “按升序排列行” 或者 “按降序排列行” 命令执行。
第五个是撤销光标的移动和选择。有的时候你移动完光标之后，又希望把光标回退到上一个位置，这时你只需按下 “Cmd + U”（Windows 上是 “Ctrl + U”），就可以撤销这一次光标的移动。
5.多光标
在我们的日常编码过程中，有很多工作，它本身就是具有“重复”属性的。比如你需要把多个单词的第一个字母从小写变成大写，这种跟业务逻辑相关的重复性操作，编辑器很难为它们一个个单独做优化。
而 VS Code 的多光标特性其实就是用来解决这类问题的。当你在一个文本框或者某个输入框里打入字符时，会有一个竖线来显示你将要输入文字的位置，这就是“光标”。顾名思义，多光标其实就是多个输入位置，这里你可以脑补下多个竖线的场景。
多光标特性允许你在输入框的多个位置创建光标，这样你就可以在多个不同的位置同时输入文字或者执行其他操作。是不是很酷？
比如我上面提到的例子，你想把多个单词的第一个字母从小写变成大写。这个时候你只需要在每个单词的开头创建一个光标，然后按住 “shift + 右方向键” 选中这些单词的第一个字母，最后执行 “转换为大写” ，这样这些被选中的字符，就可以全部被转换成了大写了。
那怎样才能创建多个光标呢？这其中又有什么规则？
5.1创建多个光标
我还是以一段 CSS 代码作为例子来介绍吧，如果你要练习，直接把这段代码复制到编辑器中即可。
.foo {
padding: 5;
margin: 5;
font-size: 5;
}
你可以看到，在上面这段 CSS 代码中，所有属性的值都是“5”，但你可能觉得这样的写法不规范，想把它们都改成 “5px”。之前你肯定是吭哧吭哧挨个在5后面加“px”。而现在，有了多光标特性之后，你第一步要做的事情，就是把光标移动到第一个 “5”的前面。接下来就有两种操作方式可以选择。
5.1.1 使用鼠标
第一种添加多光标的方式，就是使用鼠标。在键盘上按住 “Option”（Windows 上是 Alt），然后鼠标点在第二个“5”之前，那么第二个光标就创建好了。现在你可以看到两个光标，第二个光标比第一个要细一点。
聪明的你肯定知道通过同样的方式来创建第三个光标。然后，按下右方向键，将光标们移动到 “5”的后面，输入“px”。这样，“5”后面就都已经加上“px”了，而这中间，你只做了一次输入。是不是很方便？
5.1.2 使用键盘
第二种方式是使用键盘，但是比第一种方式要多两个步骤，我们来一起看看是为什么。
首先你还是先移动光标到第一个“5”的前面。然后按下 “Cmd + Option + 下方向键”（Windows 上是 “Ctrl + Alt + 下方向键”），在当前光标的下面创建一个光标。
相信你已经看出来了，第二个光标，由于就在第一个光标的正下方，所以它不在第二行的“5”前面。不过没关系，我们有办法搞定它。先别急，你还是如法炮制，把第三个光标创建好。
下面你该尝试把光标移动到正确的位置啦。虽说现在三个光标的位置都是散乱的，没有什么规则，但你可以让它们移动到类似的位置：按下 “Cmd + 右方向键”（Windows 上是 End），这样它们就都移动到每一行的末尾了。
到这里问题就简单了，你只需按下 “左方向键” 将光标移动到 5的后面，然后输入 px即可完成整个操作。
对于这个样例而言，第一种方案比第二种要方便，但这两种方法解决问题的思路是一致的。前者通过鼠标操作，把光标移动到了你期望的位置，然后再执行别的操作；后者则是运用了 VS Code 内置的其他命令，把光标最终移动到你想要的位置。
在第二种方案中，你是把光标全部移动到行末，从而统一了光标的位置，进而进行“重复性”的操作。但这个问题的解决方案不是唯一的，你也可以想一想，还有没有其他别的解法。
5.2创建多光标的两个特别命令
接下来，我再给你介绍两个关于多光标的创建的特别方法。
5.2.1 “Cmd + D”
首先讲第一种，还是上面的代码，你把光标移动到数字“5”之前，按下 “Cmd + D”，这样第一个“5”就被选中了；然后再按一次 “Cmd + D”（Windows 上是 Ctrl + D），你可以看到，第二个“5”也被选中了。
“Cmd + D” 这个命令的作用是，第一次按下时，它会选中光标附近的单词；第二次按下时，它会找到这个单词第二次出现的位置，创建一个新的光标，并且选中它。这样只需要按下三次，你就选中了所有的“5”。这个时候你再按下 “右方向键”，输入“px”，即可完成任务。
之所以说这个方法特别，是因为它的适用情况比较特别：处理多次出现的“相同”单词。如果你要处理的文本并不是相同的，那么这个方法就不适用了。
5.2.2 Option + Shift + i
接下来讲讲第二种，是跟代码行批量处理有关，也还是用的前面的代码。首先你选择多行代码，然后按下 “Option + Shift + i” （Windows 上是 Alt + Shift + i），这样操作的结果是：每一行的最后都会创建一个新的光标。
同样的，这种方法是基于代码行的，如果你的需求是在同一行添加多个光标，那么就不适用了。
