使用教程
VS Code官网: https://code.visualstudio.com/
安装
VS Code的安装很简单, 直接去官网下载安装包, 然后双击安装即可
界面说明
VS Code在功能上非常克制, 只包含了大多数开发流程中所需要的基础模块, 包括: 编辑器、文件管理、窗口管理、首选项设置、终端等
VS Code界面主要分为以下五个区域:
- 编辑器
- 侧边栏
- 状态栏
- 活动栏
- 面板
快捷键
工欲善其事, 必先利其器, VS Code用得熟不熟, 首先就看你是否会用快捷键, 以下是高频核心快捷键
工作区快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 显示命令面板 | ⌘ + Shift + P | Ctrl + Shift + P | 打开工作区设置 |
| 显示/隐藏侧边栏 | ⌘ + B | Ctrl + B | 沉浸式写代码 |
| 拆分为多个编辑器 | ⌘ + \ | Ctrl + \ | 抄代码利器 |
| 聚焦到第1/2个编辑器 | ⌘ + 1/2 | Ctrl + 1/2 | 快速切换多个编辑器 |
| 放大/缩小工作区 | ⌘++ / ⌘-- | Ctrl++ / Ctrl-- | 录屏或投影时常用 |
| 显示/隐藏控制台 | ⌘ + J | Ctrl + J | |
| 重写打开一个软件窗口 | ⌘ + Shift + N | Ctrl + Shift + N | 打开新项目 |
| 关闭当前软件窗口 | ⌘ + Shift + W | Ctrl + Shift + W | 关闭当前项目 |
| 新建文件 | ⌘ + N | Ctrl + N | 快速新建文件 |
| 关闭当前文件 | ⌘ + W | Ctrl + W |
跳转快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 在多个工作区之间切换 | ⌘ + ` | 🈚️ | 快速切换多个工作区 |
| 在已经打开的多个文件之间进行切换 | ⌘ + ↔️ | Ctrl + ↔️ | 快速切换文件 |
| 在已经打开的多个文件之间进行跳转 | Ctrl + Tab | Ctrl + Tab | 快速切换文件 |
| 在当前文件的各种方法之间进行跳转 | Ctrl + shift + O | Ctrl + shift + O | |
| 在当前工作区的各种方法之间进行跳转 | ⌘ + T | Ctrl + T | |
| 跳转到指定行 | Ctrl + G | Ctrl + G | |
| 跳转到匹配的括号 | ⌘ + Shift + \ | Ctrl + shift + \ |
光标快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 在单个字符之间移动光标 | ↕️↔️ | ↕️↔️ | |
| 在单词之间移动光标 | Option + ↔️ | Ctrl + ↔️ | |
| 在整行之间移动光标 | ⌘ + ↔️ | Win + ↔️ | |
| 左右扩大/缩小选中的范围 | Option + Alt + ↔️ | Alt + Shift + ↔️ | |
| 将光标定位到文件的第一行 | ⌘ + ⬆️ | Ctrl + Home | |
| 将光标定位到文件的最后一行 | ⌘ + ⬇️ | Ctrl + End | |
| 在代码块之间移动光标 | ⌘ + Shift + \ | 🈚️ | |
| 选中内容到行首/行尾 | ⌘ + Shift + ↔️ | Shift + Home/End |
编辑操作快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 复制 | ⌘ + C | Ctrl + C | |
| 剪切 | ⌘ + X | Ctrl + X | |
| 粘贴 | ⌘ + V | Ctrl + V | |
| 撤销 | ⌘ + Z | Alt + Z | 撤销更改的内容 |
| 取消撤销 | ⌘ + Shift + Z | Alt + Y | 取消撤销 |
| 在当前行的下方新增一行，然后跳至该行 | ⌘ + Enter | Ctrl + Enter | 即使光标不在行尾，也能快速向下插入一行 |
| 在当前行的上方新增一行，然后跳至该行 | ⌘ + Shift + Enter | Ctrl + Shift + Enter | 即使光标不在行尾，也能快速向上插入一行 |
| 将代码向上移动 | Option + ⬆️ | Alt + ⬆️ | |
| 将代码向下移动 | Option + ⬇️ | Alt + ⬇️ | |
| 将代码向上复制一行 | Option + Shift + ⬆️ | Alt + Shift + ⬆️ | |
| 将代码向下复制一行 | Option + Shift + ⬇️ | Alt + Shift + ⬇️ |
删除操作快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 删除整行 | ⌘ + Shift + K | Ctrl + Shift + K | ⌘ + X也可以删除整行, 但是会剪切内容 |
| 删除光标之前的一个单词 | Option + 空格 | Ctrl + 空格 | 英文单词有效 |
| 删除光标之后的一个单词 | Option + Delete | Ctrl + Delete | 英文单词有效 |
| 删除光标之前的整行内容 | ⌘ + 空格 | 🈚️ | |
| 删除光标之后的整行内容 | ⌘ + Delete | 🈚️ |
多光标快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 在任意位置, 同时出现多个光标 | Option + 鼠标左键 | Alt + 鼠标左键 | |
| 选择多个相同的单词 | ⌘ + D | Ctrl + D | |
| 快速选择多个单词 | ⌘ + Shift + L | Ctrl + Shift + L | 变量重命名时常用 |
多列选择快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 连续多列光标 | ⌘ + Option + ↕️ | Ctrl + Alt + ↕️ | |
| 连续多列光标 | Option + Shift + 鼠标拖动 | Alt + Shift + 鼠标拖动 | 按着鼠标左键拖动 |
编程相关快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 注释代码 | ⌘ + / | Ctrl + / | |
| 代码格式化 | Option + Shift + F | Alt + Shift + F | |
| 将光标的移动回退到上一个位置 | ⌘ + U | Ctrl + U |
搜索相关快捷键
| 作用 | Mac OS系统 | Windows系统 | 备注 |
|---|---|---|---|
| 在当前文件中搜索 | ⌘ + F | Ctrl + F | |
| 在当前文件中搜索但光标仍停留在编辑器中 | ⌘ + G | F3 | |
| 全局搜索内容 | ⌘ + Shift + F | Ctrl + Shift + F | |
| 全局搜索文件名 | ⌘ + P | Ctrl + P |
自定义快捷键
VS Code也支持自定义快捷键
按下⌘ + Shift P, 在弹出的命令面板中搜索快捷键
在菜单栏的偏好设置 -> 键盘快捷方式, 也可以打开快捷键设置
快捷键列表
点击VS Code左下角的小齿轮 ⚙️ -> 键盘快捷方式, 可以查看和修改所有的快捷键
常用操作
使用命令启动 VS Code
在终端中使用命令行的方式启动
VS Code
方式一
- 使用快捷键
⌘ + Shift + P, 输入install code command, 选择在 PATH 中安装"code"命令 - 在终端中使用命令行
bash
# 使用 VS Code 打开当前文件夹
code .
# 使用 VS Code 打开指定目录/文件
code [pathName] / [fileName]注意
这种方法快捷简单, 但是在电脑重启之后就失效了
方式二
将VS Code的软件安装路径添加到环境变量即可一劳永逸
- 修改配置文件
bash
# Bash 用户 macOS Catalina (10.15) 之前
vim ~/.bash_profile
# Zsh 用户 macOS Catalina (10.15) 及之后
vim ~/.zshrc- 按
I键进入编辑模式, 写入以下配置
bash
# 从终端启动 VS Code, 并设置 VS Code 启动的命令别名
alias code="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code"注意
由于Visual Studio Code.app路径中有空格, 所以需要在空格前面加上反斜线\转义
- 按
Esc键退出编辑模式, 按:wq保存并退出 - 重新加载环境变量
bash
# 重新加载立即生效
source ~/.bash_profile自动保存
VS Code默认不会开启自动保存, 需要手动设置
方式一
在设置项里搜索files.autoSave, 修改参数为afterDelay
files.autoSave参数说明:
off: 默认值, 不自动保存afterDelay: 文件修改超过一定时间(默认1秒)后自动保存onFocusChange: 当前编辑器失去焦点时自动保存onWindowChange:VS Code软件失去焦点时自动保存
方式二
在菜单栏选择文件 -> 自动保存, 勾选后文件会立即保存
自动格式化
保存代码后默认不会进行代码的格式化, 需要手动开启
在设置项中搜索并勾选editor.formatOnSave, 即可开启保存后立即格式化代码
鼠标操作
- 鼠标左键连续点击三次, 可以快速选中当前行
- 鼠标左键单击左侧行号, 可以快速选中当前行
- 在左侧行号按下鼠标左键 ↕️ 拖动, 可以快速选中多行
配置云同步
可以将VS Code配置云同步, 当换电脑时, 即可将配置一键同步到本地, 就不需要重新安装插件了, 也不需要重新配置软件, 实现无缝切换
方式一: VS Code 自带的同步功能
配置同步:
- 在菜单栏中选择Code -> 首选项 -> 打开同步设置
- 选择需要同步的配置
- 通过
Microsoft或GitHub账户登陆 - 同步完成后, 菜单栏会显示首先项同步已打开, 最左侧也会多出一个同步图标
管理同步:
- 点击菜单栏Code -> 首选项 -> 设置同步已打开, 进行相应的同步管理即可
- 换另外一个电脑时, 登录相同的账号, 即可完成同步
方式二: 使用 settings-sync 插件
使用
settings-sync插件可以将配置分享给其他用户, 也可以把其他用户的配置给自己用
配置同步:
- 安装插件
settings-sync - 在插件中使用
GitHub账户登陆 - 登陆后在
VS Code的界面中, 可以选择一个别人的Gist, 也可以忽略掉, 然后自己创建一个Gist - 使用快捷键
⌘ + Shift + P, 在弹出的命令面板中输入sync, 选择更新/上传配置, 这样就可以把最新的配置上传到GitHub
管理同步:
- 换另一台电脑时, 现在
VS Code中安装settings-sync插件 - 在插件中使用
GitHub账户登陆 - 登陆之后可以在插件的界面上看到之前的同步记录
- 点击最新的记录就可以将云端的最新配置同步到本地
使用别人的配置:
想使用别人的配置, 首先需要对方提供给你
Gist
- 安装
settings-sync插件 - 使用快捷键
⌘ + Shift + P, 在弹出的命令面板中输入sync, 选择下载配置 - 在弹出的界面中, 选择
Download Public Gist, 然后输入别人分享给你的Gist, 不需要登录GitHub账号