前端学习(0)~vscode工具使用
VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。这里只讲在前端开发中的使用。
VS Code 的安装
- VS Code 官网：https://code.visualstudio.com
VS Code快捷键
移动光标
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + ← | Fn + ← | 将光标定位到当前行的最左侧 | 很常用 |
| Cmd + → | Fn + → | 将光标定位到当前行的最右侧 | 很常用 |
| Cmd + ↑ | Ctrl + Home | 将光标定位到文章的第一行 | |
| Cmd + ↓ | Ctrl + End | 将光标定位到文章的最后一行 |
根据上面的快捷键，我们可以举一反三。补充如下：
-
「方向键」：在单个字符之间移动光标
-
「option + 左右方向键」：在单词之间移动光标（很常用）。注：Win 快捷键是「Ctrl + 左右方向键」。
-
「Cmd + 左右方向键」：在整行之间移动光标（很常用）。注：Win 的快捷键是「Fn + 左右方向键」
-
「
Cmd + Shift + \」：在代码块之间移动光标。
删除操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|---|---|---|---|
| option + Backspace | Ctrl + Backspace | 删除光标之前的一个单词 | 英文有效，很常用 |
| option + delete | Ctrl + delete | 删除光标之后的一个单词 | |
| Cmd + delete | 删除光标之前的整行内容 | 很常用 | |
| Cmd + delete | 删除光标之后的整行内容 | ||
| Cmd + shift + K | Ctrl + Shift + K | 删除整行 | 「Cmd + X」的作用是剪切，但也可以删除整行 |
编辑操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + Enter | Ctrl + Enter | 在当前行下面新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向下插入一行 |
| Option + ↑ | Alt + ↑ | 将代码向上移动 | 很常用 |
| Option + ↓ | Alt + ↓ | 将代码向下移动 | 很常用 |
| Option + Shift + ↑ | Alt + Shift + ↑ | 将代码向上复制 | 很常用 |
| Option + Shift + ↓ | Alt + Shift + ↓ | 将代码向下复制 | 很常用 |
js语言相关
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + / | Ctrl + / | 添加单行注释 | 很常用 |
| Option + Shift + F | Alt + shift + F | 代码格式化 | 很常用 |
| Ctrl + J | 将多行代码合并为一行 | Win 用户可在命令面板搜索”合并行“ | |
| Cmd + | |||
| Cmd + U | Ctrl + U | 将光标的移动回退到上一个位置 | 撤销光标的移动和选择 |
跳转操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|---|---|---|---|
| Ctrl + Tab | Ctrl + Tab | 在已经打开的文件之间进行跳转 | |
| Cmd + P | Ctrl + P | 在当前的项目工程里，全局搜索文件 | 很常用 |
| Ctrl + G | Ctrl + G | 跳转到指定行 | |
| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种方法之间进行跳转 |
搜索
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|---|---|---|---|
| Cmd + F | Ctrl + F | 在当前文件中搜索，光标在搜索框里 | |
| Cmd + G | F3 | 在当前文件中搜索，光标仍停留在编辑器里 | 很巧妙 |
| Cmd + Shift + F | Ctrl + Shift +F | 全局搜索 |
工作区快捷键
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|---|---|---|---|
| cmd +/- | ctrl +/- | 将工作区放大/缩小（包括代码字体、左侧导航栏） | 在投影仪场景经常用到 |
| Cmd + B | Ctrl + B | 显示/隐藏侧边栏 | 很实用 |
Cmd + \ |
Ctrl + \ |
创建多个编辑器 | 比较实用 |
| Cmd + Option + 左右方向键 | Ctrl + Pagedown/Pageup | 在已经打开的文件之间进行切换 | 非常实用 |
| Ctrl + Tab | Ctrl + Tab | 在已经打开的文件之间进行跳转 | 不如上面的快捷键实用 |
| Cmd + J | Ctrl + J | 显示/隐藏控制台 |
VS Code插件推荐
VS Code 有一个很强大的功能就是支持插件扩展。
open in browser
安装open in browser插件后，在 HTML 文件中「右键选择 --> Open in Default Browser」，即可在浏览器中预览网页。
