VS code 高效使用说明

Posted 2021-09-04 henei

工欲善其事必先利其器！如果你是做前端开发，我推荐 VS Code 作为「主力开发工具」。

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。

VS Code 的特点

• VS Code 的使命，是让开发者在编辑器里拥有 IDE 那样的开发体验，比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。
• 跨平台支持 MacOS、Windows 和 Linux 等多个平台。
• VS Code 的源代码以 MIT 协议开源。
• 支持第三方插件，功能强大，生态系统完善。
• VS Code 自带了 javascript、TypeScript 和 Node.js 的支持。也就是说，你在书写 JS 和 TS 时，是自带智能提示的。当然，其他的语言，你可以安装相应的扩展包插件，也会有智能提示。

VS Code 的安装

• VS Code 官网：https://code.visualstudio.com

VS Code 的安装很简单，直接去官网下载安装包，然后双击安装即可。

VS Code 快捷键

VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。

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 +/-	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、跳转操作

Mac 快捷键	Win 快捷键	作用	备注
Cmd + `	没有	在同一个软件的多个工作区之间切换	使用很频繁
Cmd + Option + 左右方向键	Ctrl + Pagedown/Pageup	在已经打开的多个文件之间进行切换	非常实用
Ctrl + Tab	Ctrl + Tab	在已经打开的多个文件之间进行跳转	不如上面的快捷键快
Cmd + Shift + O	Ctrl + shift + O	在当前文件的各种方法之间进行跳转
Ctrl + G	Ctrl + G	跳转到指定行
Cmd+Shift+\\	Ctrl+Shift+\\	跳转到匹配的括号

3、移动光标

Mac 快捷键	Win 快捷键	作用	备注
方向键	方向键	在单个字符之间移动光标	大家都知道
option + 左右方向键	Ctrl + 左右方向键	在单词之间移动光标	很常用
Cmd + 左右方向键	Fn + 左右方向键	在整行之间移动光标	很常用
Cmd + ←	Fn + ←（或 Win + ←）	将光标定位到当前行的最左侧	很常用
Cmd + →	Fn + →（或 Win + →）	将光标定位到当前行的最右侧	很常用
Cmd + ↑	Ctrl + Home	将光标定位到文章的第一行
Cmd + ↓	Ctrl + End	将光标定位到文章的最后一行
Cmd + Shift + \\		在代码块之间移动光标

4、编辑操作

Mac 快捷键	Win 快捷键	作用	备注
Cmd + Enter	Ctrl + Enter	在当前行的下方新增一行，然后跳至该行	即使光标不在行尾，也能快速向下插入一行
Cmd+Shift+Enter	Ctrl+Shift+Enter	在当前行的上方新增一行，然后跳至该行	即使光标不在行尾，也能快速向上插入一行
Option + ↑	Alt + ↑	将代码向上移动	很常用
Option + ↓	Alt + ↓	将代码向下移动	很常用
Option + Shift + ↑	Alt + Shift + ↑	将代码向上复制
Option + Shift + ↓	Alt + Shift + ↓	将代码向下复制	写重复代码的利器

5、多光标编辑

Mac 快捷键	Win 快捷键	作用	备注
Cmd + Option + 上下键	Ctrl + Alt + 上下键	在连续的多列上，同时出现光标
Option + 鼠标点击任意位置	Alt + 鼠标点击任意位置	在任意位置，同时出现光标
Option + Shift + 鼠标拖动	Alt + Shift + 鼠标拖动	在选中区域的每一行末尾，出现光标
Cmd + Shift + L	Ctrl + Shift + L	在选中文本的所有相同内容处，出现光标

其他的多光标编辑操作：（很重要）

• 选中某个文本，然后反复按住快捷键「 Cmd + D 」键（windows 用户是按住「Ctrl + D」键）， 即可将全文中相同的词逐一加入选择。
• 选中一堆文本后，按住「Option + Shift + i」键（windows 用户是按住「Alt + Shift + I」键），既可在每一行的末尾都创建一个光标。

6、删除操作

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

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

7、编程语言相关

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

8、搜索相关

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

9、查找某个函数在哪些地方被调用了

比如我已经在a.js文件里调用了 foo()函数。那么，如果我想知道foo()函数在其他文件中是否也被调用了，该怎么做呢？

做法如下：在 a.js 文件里，选中foo()函数（或者将光标放置在foo()函数上），然后按住快捷键「Shift + F12」，就能看到 foo()函数在哪些地方被调用了，比较实用。

10、鼠标操作

• 在当前行的位置，鼠标三击，可以选中当前行。
• 用鼠标单击文件的行号，可以选中当前行。
• 在某个行号的位置，上下移动鼠标，可以选中多行。