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的使用