0420-VS Code安装与基础使用

目录

1. VS Code安装

2. VS Code快捷使用

2.1. 工作区快捷键

2.2. 跳转操作

2.3. 移动光标

2.4. 编辑操作

2.5. 删除操作

2.6. 多光标选择/编辑

2.7. 多列选择/编辑

2.8. 编程语言相关

2.9. 搜索相关

2.10. 自定义快捷键

2.11. 快捷键列表

3. 写在最后

---

1. VS Code安装

VS Code官网下载：

安装：

下载安装完后，默认为英文，可以先安装中文组件：

💡安装的时候记得关梯子，不然装不了

安装完成后，重启

重启，界面变为中文：

安装前端开发需要的插件：

2. VS Code快捷使用

2.1. 工作区快捷键

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	关闭当前文件

2.2. 跳转操作

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+\	跳转到匹配的括号

2.3. 移动光标

Mac 快捷键	Win 快捷键	作用	备注
方向键	方向键	在单个字符之间移动光标	大家都知道
option + 左右方向键	Ctrl + 左右方向键	在单词之间移动光标	很常用
Cmd + 左右方向键	Fn + 左右方向键（或 Win + 左右方向键）	将光标定位到当前行的最左侧、最右侧（在整行之间移动光标）	很常用
Option + Alt + 左右方向键	Alt + Shift + 左右方向键	左右扩大/缩小选中的范围	很酷，极为高效
Cmd + ↑	Ctrl + Home	将光标定位到文件的第一行
Cmd + ↓	Ctrl + End	将光标定位到文件的最后一行
Cmd + Shift + \		在代码块之间移动光标

2.4. 编辑操作

Mac 快捷键	Win 快捷键	作用	备注
Cmd + C	Ctrl + C	复制
Cmd + X	Ctrl + X	剪切
Cmd + V	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行的代码会整体下移。

2.5. 删除操作

Mac 快捷键	Win 快捷键	作用	备注
Cmd + shift + K	Ctrl + Shift + K	删除整行	「Cmd + X」的作用是剪切，但也可以删除整行
option + Backspace	Ctrl + Backspace	删除光标之前的一个单词	英文有效，很常用
option + delete	Ctrl + delete	删除光标之后的一个单词
Cmd + Backspace		删除光标之前的整行内容	很常用
Cmd + delete		删除光标之后的整行内容

💡上面所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器里，大部分都适用。

2.6. 多光标选择/编辑

Mac 快捷键	Win 快捷键	作用	备注
Option + 鼠标连续点击任意位置	Alt + 鼠标连续点击任意位置	在任意位置，同时出现多个光标	很容易记住
Cmd + D	Ctrl + D	将光标放在某个单词的位置（或者先选中某个单词），然后反复按下「 Cmd + D 」键， 即可将下一个相同的词逐一加入选择。	较常用
Cmd + Shift + L	Ctrl + Shift + L	将光标放在某个单词的位置（或者先选中某个单词），然后按下快捷键，则所有的相同内容处，都会出现光标。	很常用。比如变量重命名的时候，就经常用到

2.7. 多列选择/编辑

Mac 快捷键	Win 快捷键	作用	备注
Cmd + Option + 上下键	Ctrl + Alt + 上下键	在连续的多列上，同时出现多个光标	较常用
Option + Shift + 鼠标拖动	Alt + Shift + 鼠标拖动	按住快捷键，然后把鼠标从区域的左上角拖至右下角，即可在选中区域的每一行末尾，出现光标。	很神奇的操作，较常用
Option + Shift + i	Alt + Shift + I	选中一堆文本后，按下快捷键，既可在每一行的末尾都出现一个光标。	很常用

2.8. 编程语言相关

Mac 快捷键	Win 快捷键	作用	备注
Cmd + /	Ctrl + /	添加单行注释	很常用
Option + Shift + F	Alt + shift + F	代码格式化	很常用
F2	F2	以重构的方式进行重命名	改代码备
Ctrl + J		将多行代码合并为一行	Win 用户可在命令面板搜索”合并行“
Cmd +
Cmd + U	Ctrl + U	将光标的移动回退到上一个位置	撤销光标的移动和选择

2.9. 搜索相关

Mac 快捷键	Win 快捷键	作用	备注
Cmd + Shift + F	Ctrl + Shift +F	全局搜索代码	很常用
Cmd + P	Ctrl + P	在当前的项目工程里，全局搜索文件名
Cmd + F	Ctrl + F	在当前文件中搜索代码，光标在搜索框里
Cmd + G	F3	在当前文件中搜索代码，光标仍停留在编辑器里	很巧妙

2.10. 自定义快捷键

• 按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。
• 也可以选择菜单栏「偏好设置 --> 键盘快捷方式」，进入快捷键的设置。

💡如果输入快捷键后没起作用，可能是与其他软件（比如 PicGo 软件）快捷键冲突了，记得检查。

2.11. 快捷键列表

点击 VS Code 左下角的齿轮按钮即可找到。

快捷键参考表（官方）：

• Windows版本；
• Mac 版本；
• Linux版本；

💡 VS Code里通过菜单栏「帮助-->键盘快捷方式参考」也可以打开相应平台的快捷键大全（PDF版本）

3. 写在最后

尊重原创，以上编辑器操作部分内容整理自他人开源项目；

关于编辑器的使用还是得自己多用多查。先整理下来，主要是为了方便自己后面查找，用着用着自然就熟练了，也不需要刻意记忆；

今天装好了编辑器，整理了如何快捷使用，技术上的东西没咋学，还是会焦虑，但是在做就好了！