VS-Code的使用
快捷键的使用
工作区快捷键
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + Shift + P | Ctrl + Shift + P，F1 | 显示命令面板 | |
| Cmd + B | Ctrl + B | 显示/隐藏侧边栏 | 很实用 |
Cmd + \ |
Ctrl + \ |
拆分为多个编辑器 | 【重要】抄代码利器 |
| Cmd + 1、2 | Ctrl + 1、2 | 聚焦到第 1、第 2 个编辑器 | 同上重要 |
| Cmd + +、Cmd + - | ctrl + +、ctrl + - | 将工作区放大/缩小（包括代码字体、左侧导航栏） | 在投影仪场景经常用到 |
| Cmd + J | Ctrl + J | 显示/隐藏控制台 | |
| Cmd + Shift + N | Ctrl + Shift + N | 重新开一个软件的窗口 | 很常用 |
| Cmd + Shift + W | Ctrl + Shift + W | 关闭软件的当前窗口 | |
| Cmd + N | Ctrl + N | 新建文件 | |
| Cmd + W | Ctrl + W | 关闭当前文件 |
跳转操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + ` | 没有 | 在同一个软件的多个工作区之间切换 | 使用很频繁 |
| Cmd + Option + 左右方向键 | Ctrl + Pagedown/Pageup | 在已经打开的多个文件之间进行切换 | 非常实用 |
| Ctrl + Tab | Ctrl + Tab | 在已经打开的多个文件之间进行跳转 | 不如上面的快捷键快 |
| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种方法之间（符号：Symbol）进行跳转 | |
| Cmd + T | Ctrl + T | 在当前工作区的各种方法之间（符号：Symbol）进行跳转 | |
| Ctrl + G | Ctrl + G | 跳转到指定行 | |
Cmd+Shift+\ |
Ctrl+Shift+\ |
跳转到匹配的括号 |
移动光标
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| 方向键 | 方向键 | 在单个字符之间移动光标 | 大家都知道 |
| option + 左右方向键 | Ctrl + 左右方向键 | 在单词之间移动光标 | 很常用 |
| Cmd + 左右方向键 | Fn + 左右方向键（或 Win + 左右方向键） | 将光标定位到当前行的最左侧、最右侧（在整行之间移动光标） | 很常用 |
| Option + Alt + 左右方向键 | Alt + Shift + 左右方向键 | 左右扩大/缩小选中的范围 | 很酷，极为高效 |
| Cmd + ↑ | Ctrl + Home | 将光标定位到文件的第一行 | |
| Cmd + ↓ | Ctrl + End | 将光标定位到文件的最后一行 | |
| Cmd + Shift + \ | 在代码块之间移动光标 |
编辑操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + C | Ctrl + C | 复制 | |
| Cmd + X | Ctrl + X | 剪切 | |
| Cmd + C | Ctrl + V | 粘贴 | |
| Cmd + Enter | Ctrl + Enter | 在当前行的下方新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向下插入一行 |
| Cmd+Shift+Enter | Ctrl+Shift+Enter | 在当前行的上方新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向上插入一行 |
| Option + ↑ | Alt + ↑ | 将代码向上移动 | 很常用 |
| Option + ↓ | Alt + ↓ | 将代码向下移动 | 很常用 |
| Option + Shift + ↑ | Alt + Shift + ↑ | 将代码向上复制一行 | |
| Option + Shift + ↓ | Alt + Shift + ↓ | 将代码向下复制一行 | 写重复代码的利器 |
另外再补充一点：将光标点击到某一行的任意位置时，默认就已经是选中全行了，此时可以直接复制或剪切，无需点击鼠标。这个非常实用，是所有的编辑操作中，使用得最频繁的。它可以有以下使用场景：
- 场景1：假设光标现在处于第5行的任意位置，那么，直接依次按下
Cmd + C和Cmd + V，就会把这行代码复制到第6行。继续按Cmd + C和Cmd + V，就会把这行代码复制到第7行。copy代码so easy。 - 场景2：假设光标现在处于第5行，那么，先按下
Cmd + C，然后按两下↑方向键，此时光标处于第3行；紧接着，继续按下Cmd + V，就会把刚刚那行代码复制到第3行，原本处于第3行的代码会整体下移。
删除操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + shift + K | Ctrl + Shift + K | 删除整行 | 「Cmd + X」的作用是剪切，但也可以删除整行 |
| option + Backspace | Ctrl + Backspace | 删除光标之前的一个单词 | 英文有效，很常用 |
| option + delete | Ctrl + delete | 删除光标之后的一个单词 | |
| Cmd + Backspace | 删除光标之前的整行内容 | 很常用 | |
| Cmd + delete | 删除光标之后的整行内容 |
多光标
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| Option + 鼠标连续点击任意位置 | Alt + 鼠标连续点击任意位置 | 在任意位置，同时出现多个光标 | 很容易记住 |
| Cmd + D | Ctrl + D | 将光标放在某个单词的位置（或者先选中某个单词），然后反复按下「 Cmd + D 」键， 即可将下一个相同的词逐一加入选择。 | 较常用 |
| Cmd + Shift + L | Ctrl + Shift + L | 将光标放在某个单词的位置（或者先选中某个单词），然后按下快捷键，则所有的相同内容处，都会出现光标。 | 很常用。比如变量重命名的时候，就经常用到 |
多行/列选择
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + Option + 上下键 | Ctrl + Alt + 上下键 | 在连续的多列上，同时出现多个光标 | 较常用 |
| Option + Shift + 鼠标拖动 | Alt + Shift + 鼠标拖动 | 按住快捷键，然后把鼠标从区域的左上角拖至右下角，即可在选中区域的每一行末尾，出现光标。 | 很神奇的操作，较常用 |
| Option + Shift + i | Alt + Shift + I | 选中一堆文本后，按下快捷键，既可在每一行的末尾都出现一个光标。 | 很常用 |
编程语言相关
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + / | Ctrl + / | 添加单行注释 | 很常用 |
| Option + Shift + F | Alt + shift + F | 代码格式化 | 很常用 |
| F2 | F2 | 以重构的方式进行重命名 | 改代码备 |
| Ctrl + J | 将多行代码合并为一行 | Win 用户可在命令面板搜索”合并行“ | |
| Cmd + | |||
| Cmd + U | Ctrl + U | 将光标的移动回退到上一个位置 | 撤销光标的移动和选择 |
搜索相关
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + Shift + F | Ctrl + Shift +F | 全局搜索代码 | 很常用 |
| Cmd + P | Ctrl + P | 在当前的项目工程里，全局搜索文件名 | |
| Cmd + F | Ctrl + F | 在当前文件中搜索代码，光标在搜索框里 | |
| Cmd + G | F3 | 在当前文件中搜索代码，光标仍停留在编辑器里 | 很巧妙 |
自定义快捷键
按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。
也可以选择菜单栏「偏好设置 --> 键盘快捷方式」，进入快捷键的设置：
命令面板的使用
Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键Ctrl+Shift+P），可以打开快速命令面板。
设置字体大小
在命令面板输入“字体”，进行字体设置。
也可以在菜单栏，选择「首选项-设置-常用设置」
快捷键设置
在命令面板输入“快捷键”
大小写转换
选中文本后，在命令面板中输入transfrom，就可以修改文本的大小写了。
使用命令行启动 VS Code
（1）输入快捷键「Cmd + Shift + P 」，选择install code command：
（2）使用命令行：
code命令：启动 VS Code 软件code pathName/fileName命令：通过 VS Code 软件打开指定目录/指定文件。
备注：这种方法快捷简单，但是在电脑重启之后就失效了
修改特定编程语言的设置项
输入快捷键「Cmd + Shift + P 」打开命令面板，然后输入并执行 Configure Language Specific Settings即可。
VS Code 的常见配置
VS Code提供两种不同范围的设置：
- 用户设置：全局生效。
- 工作区设置：只针对当前项目生效。工作区设置会覆盖用户设置。适用于团队协作场景。工作区的设置文件是保存在当前项目根目录的
.vscode/settings.json中，可以被提交到Git仓库，方便共享给项目组的其他成员。
操作技巧：
（1）我们可以在设置面板的顶部搜索框，输入关键词，就能迅速定位到你想要的设置项。
（2）上图中，点击右上角的icon，可以通过 json文件的形式修改设置项。
是否显示代码的行号
VS Code 默认显示代码的行号。你可以在设置项里搜索 editor.lineNumbers修改设置，配置项如下：
右侧是否显示代码的缩略图
如果某个文件的代码量很大，缩略图就很有用了，可以预览全局，并在当前文件中快速跳转。
VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 editor.minimap 进行设置，配置项如下：
将当前行代码高亮显示（更改光标所在行的背景色）
当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想高亮显示当前行的代码，需要设置两步：
（1）在设置项里搜索editor.renderLineHighlight，将选项值设置为all或者line。
（2）在设置项里增加如下内容：
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000090",
"editor.lineHighlightBorder": "#ffffff30"
}
上方代码，第一行代码的意思是：修改光标所在行的背景色（背景色设置为全黑，不透明度 90%）；第二行代码的意思是：修改光标所在行的边框色。
改完代码后立即自动保存
方式一：
改完代码后，默认不会自动保存。你可以在设置项里搜索files.autoSave，修改参数值为afterDelay ，即可自动保存。如下：
files.autoSave的参数值有以下几种：
- off（默认值）：不自动保存。
- afterDelay（建议配置）：文件修改超过一定时间（默认1秒）后，就自动保存。
- onFocusChange：当前编辑器失去焦点时，则自动保存。如果我们将配置项修改为
onFocusChange之后，那么，当光标离开该文件后，这个文件就会自动保存了。 - onWindowChange：VS Code软件失去焦点时，则自动保存
方式二 ：
也可以直接在菜单栏选择「文件-自动保存」。勾选后，当你写完代码后，文件会立即实时保存。
热退出
当VS Code退出后，它可以记住未保存的文件。如果你希望达到这种效果，那么，你需要先将设置项files.hotExit的值改为 onExitAndWindowClose。
保存代码后，是否立即格式化
保存代码后，默认不会立即进行代码的格式化。你可以在设置项里搜索editor.formatOnSave查看该配置项：
自动格式化粘贴的内容
在设置项里搜索 editor.formatOnPaste，将设置项改为true：
空格 or 制表符
VS Code 会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下 tab 键后，编辑器就会识别成制表符。
（1）建议的设置项如下：
- editor.detectIndentation：自动检测（默认开启）。建议把这个配置项修改为 false，截图如下：
这样做，是为了取消系统的自动缩进，建议自己手动格式化比较好。 参考链接：vscode做注释的方法 - 软件技术 - 亿速云
- editor.insertSpaces：按 Tab 键时插入空格（默认值为true）。截图如下：
- editor.tabSize：一个制表符默认等于四个空格。截图如下：
（2）状态栏也会显示当前的缩进值。点击状态栏，可以直接修改 tabSize 缩进值：
（3）另外，我们还可以安装 prettier 插件，设置代码在格式化时默认缩进值。prettier 是做代码格式化的最常见工具。
（4）去掉每一行末尾的空格。在设置项里搜索空格或者"files.trimTrailingWhitespace"，将值设置为 true：
一般来说，每一行代码末尾的空格是多余的，所以建议去掉。
直观地显示代码里的空格和缩进
代码里如果有缩进或者空格，肉眼是看不出来的，但是我们可以修改配置项，把它揪出来。
在配置项里搜索editor.renderWhitespace，修改为all：
修改之后，代码里的空格、缩进的展示效果如下：
新建文件后的默认文件类型
如果你想修改默认的文件类型，可以在设置项里搜索files.defaultLanguage，设置项如下：
删除文件时，是否弹出确认框
当我们在 VS Code 中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索xplorer.confirmDelete。截图如下：
在新窗口打开文件/文件夹
通过 window.openFoldersInNewWindow（默认值为off）和window.openFilesInNewWindow（默认值为default），可以配置在打开文件夹、打开文件时，是否开启一个新的窗口。我个人建议，把这两个配置项都设置为 on，避免旧的窗口被覆盖：
补充知识—— window.restoreWindows可以用来配置 如何恢复之前的会话窗口。涉及到的场景是：你把 VS Code 关闭了，然后又打开了，是否要展示之前打开过的文件、文件夹？参数值有以下几种：
- one（默认配置）：只会重新打开上一次回话中最后操作的那一个窗口。
- none：打开一个空的窗口，不包含任何文件、文件夹。
- all（建议配置）：恢复上一次会话中的所有窗口。
- folders：恢复上一次会话中包含文件夹的窗口。
常见操作和使用技巧
快速生成HTML骨架
先新建一个空的html文件，然后通过以下方式，可以快速生成html骨架。
方式1：输入!，然后按下enter键，即可生成html骨架。
方式2：输入html:5，然后按住 Tab键，即可生成html骨架。
并排编辑：左右（上下）显示多个编辑器窗口（copy代码利器）
Mac 用户按住快捷键 Cmd + \， Windows 用户按住快捷键Ctrl + \，即可同时打开多个编辑器窗口，进行并排编辑。
按快捷键「Cmd + 1 」切换到左边的窗口，按快捷键「Cmd + 2 」切换到右边的窗口，以此类推。
- 使用快捷键
Cmd + \将编辑器一分为二。 - 使用快捷键
Cmd + P调出文件列表，选择要打开的文件，然后按下Cmd + Enter快捷键。【重要】 - 按住 Option 键的同时，单击资源管理器的文件（Windows 用户是按 Alt 键）。
- 点击编辑器右上角的
Split Editor按钮。 - 选择菜单栏「查看--> 编辑器布局」，然后选择你具体想要的布局
从终端 code 命令启动 VS Code（Mac电脑）
在终端输入code或者输入 code + 指定项目的目录，就可以启动 VS Code，十分便捷。即：
code命令：启动 VS Code 软件。code pathName/fileName命令：通过 VS Code 软件打开指定目录/指定文件。
为了达到目的，我们需要先将 VS Code的软件安装路径添加到环境变量，一劳永逸。具体操作如下：
（1）打开 bash_profile文件：
cd ~ vim ./bash_profile
（2）在 bash_profile 中添加如下内容：
# 从终端启动VS Code，并设置vscode启动的命令别名 alias code="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code"
注意，由于Visual Studio Code.app这个路径里有空格，所以需要在空格前面加上反斜杠\。
（3）重启环境变量的配置：
# 重启
source ~/.bash_profile如果没生效，那你把 bash_profile文件 换成 zshrc文件试试。
参考链接：
- mac通过终端code 命令打开vscode
从终端 code 命令启动 VS Code（Windows电脑）
在终端输入code或者输入 code + 指定项目的目录，就可以启动 VS Code，十分便捷。即：
code命令：启动 VS Code 软件。code pathName/fileName命令：通过 VS Code 软件打开指定目录/指定文件。
为了达到目的，我们需要先将 VS Code的软件安装路径添加到环境变量，一劳永逸。具体操作如下：
（1）打开 VS Code 的安装位置，进入bin文件夹，复制路径。比如：D:\Microsoft VS Code\bin。
（2）回到桌面，右键我的电脑-->高级系统设置-->环境变量-->编辑path值，在原来的path后面，追加内容;D:\Microsoft VS Code\bin（即英文的分号+VS Code 的 bin 路径)
（3）重启电脑，大功告成。
改完之后，如果没生效，那八成是因为你填的 path 值有问题。
参考链接：
- windows使用 code . 命令打开vscode
在当前文件中搜索
在上面的快捷键列表中，我们已经知道如下快捷键：
-
Cmd + F（Win 用户是 Ctrl + F）：在当前文件中搜索，光标在搜索框里
-
Cmd + G（Win 用户是 F3）：在当前文件中搜索，光标仍停留在编辑器里
多个搜索结果出来之后，按下 Enter 键之后跳转到下一个搜索结果，按下 Shift + Enter 键之后跳转到上一个搜索结果。
另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：
上图中，你可以通过「Tab」键和「Shift + Tab」键在输入框和替换框之间进行切换
「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 editor.find.autoFindInSelection，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以自动只在这些内容里进行查找。该设置项如下图所示：
全局搜索
在上面的快捷键列表中，我们已经知道如下快捷键：
- Cmd + Shift + F（Win 用户是 Ctrl + Shift +F）：在全局的文件夹中进行搜索。效果如下：
上图中，你可以点击红框部分，展开更多的配置项。然后点击红圈部分，进行过滤搜索。注意，第二个红圈那里会经常用到，它可以在搜索时过滤掉 .git、.node_modules等忽略文件。
文件名/文件夹的搜索
前面的快捷键那一段我们讲过，通过 「Cmd + P」可以快速搜索并打开文件/文件夹。这种方式，一般用于快速打开最近编辑过的文件。
其实还有一种很巧妙的方式，可以在整个项目里，既能搜到文件，也能搜到文件夹。这种方式，常用于过滤项目的目录。操作方法很简单：
直接在文件资源管理器输入关键字就行。搜索结果会自动出现；使用方向键进行上下移动，可以在搜索的文件和文件夹之间进行跳转。
另外，右上角会看到一个过滤器，点击下图中的红圈部分，则只显示匹配的文件和文件夹。
当然，这招也有一点不足：不能搜中文。
查找某个函数在哪些地方被调用了
比如我已经在a.js文件里调用了 foo()函数。那么，如果我想知道foo()函数在其他文件中是否也被调用了，该怎么做呢？
做法如下：在 a.js 文件里，选中foo()函数（或者将光标放置在foo()函数上），然后按住快捷键「Shift + F12」，就能看到 foo()函数在哪些地方被调用了，比较实用。
鼠标操作
-
在当前行的位置，鼠标三击，可以选中当前行。
-
用鼠标单击文件的行号，可以选中当前行。
-
在某个行号的位置，上下移动鼠标，可以选中多行。
摘自：VS Code的使用