|
工欲善其事必先利其器！如果你是做前端开发，我推荐 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 的安装很简单，直接去官网下载安装包，然后双击安装即可。
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 | 在选中文本的所有相同内容处，出现光标 | |
其他的多光标编辑操作：（很重要）
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、鼠标操作
-
在当前行的位置，鼠标三击，可以选中当前行。 -
用鼠标单击文件的行号，可以选中当前行。 -
在某个行号的位置，上下移动鼠标，可以选中多行。
|
