Skip to content

使用教程

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

安装

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

界面说明

VS Code在功能上非常克制, 只包含了大多数开发流程中所需要的基础模块, 包括: 编辑器、文件管理、窗口管理、首选项设置、终端等

VS Code界面主要分为以下五个区域:

  • 编辑器
  • 侧边栏
  • 状态栏
  • 活动栏
  • 面板

快捷键

工欲善其事, 必先利其器, VS Code用得熟不熟, 首先就看你是否会用快捷键, 以下是高频核心快捷键

工作区快捷键

作用Mac OS系统Windows系统备注
显示命令面板⌘ + Shift + PCtrl + Shift + P打开工作区设置
显示/隐藏侧边栏⌘ + BCtrl + B沉浸式写代码
拆分为多个编辑器⌘ + \Ctrl + \抄代码利器
聚焦到第1/2个编辑器⌘ + 1/2Ctrl + 1/2快速切换多个编辑器
放大/缩小工作区⌘++ / ⌘--Ctrl++ / Ctrl--录屏或投影时常用
显示/隐藏控制台⌘ + JCtrl + J
重写打开一个软件窗口⌘ + Shift + NCtrl + Shift + N打开新项目
关闭当前软件窗口⌘ + Shift + WCtrl + Shift + W关闭当前项目
新建文件⌘ + NCtrl + N快速新建文件
关闭当前文件⌘ + WCtrl + W

跳转快捷键

作用Mac OS系统Windows系统备注
在多个工作区之间切换⌘ + `🈚️快速切换多个工作区
在已经打开的多个文件之间进行切换⌘ + ↔️Ctrl + ↔️快速切换文件
在已经打开的多个文件之间进行跳转Ctrl + TabCtrl + Tab快速切换文件
在当前文件的各种方法之间进行跳转Ctrl + shift + OCtrl + shift + O
在当前工作区的各种方法之间进行跳转⌘ + TCtrl + T
跳转到指定行Ctrl + GCtrl + 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系统备注
复制⌘ + CCtrl + C
剪切⌘ + XCtrl + X
粘贴⌘ + VCtrl + V
撤销⌘ + ZAlt + Z撤销更改的内容
取消撤销⌘ + Shift + ZAlt + Y取消撤销
在当前行的下方新增一行,然后跳至该行⌘ + EnterCtrl + Enter即使光标不在行尾,也能快速向下插入一行
在当前行的上方新增一行,然后跳至该行⌘ + Shift + EnterCtrl + Shift + Enter即使光标不在行尾,也能快速向上插入一行
将代码向上移动Option + ⬆️Alt + ⬆️
将代码向下移动Option + ⬇️Alt + ⬇️
将代码向上复制一行Option + Shift + ⬆️Alt + Shift + ⬆️
将代码向下复制一行Option + Shift + ⬇️Alt + Shift + ⬇️

删除操作快捷键

作用Mac OS系统Windows系统备注
删除整行⌘ + Shift + KCtrl + Shift + K⌘ + X也可以删除整行, 但是会剪切内容
删除光标之前的一个单词Option + 空格Ctrl + 空格英文单词有效
删除光标之后的一个单词Option + DeleteCtrl + Delete英文单词有效
删除光标之前的整行内容⌘ + 空格🈚️
删除光标之后的整行内容⌘ + Delete🈚️

多光标快捷键

作用Mac OS系统Windows系统备注
在任意位置, 同时出现多个光标Option + 鼠标左键Alt + 鼠标左键
选择多个相同的单词⌘ + DCtrl + D
快速选择多个单词⌘ + Shift + LCtrl + Shift + L变量重命名时常用

多列选择快捷键

作用Mac OS系统Windows系统备注
连续多列光标⌘ + Option + ↕️Ctrl + Alt + ↕️
连续多列光标Option + Shift + 鼠标拖动Alt + Shift + 鼠标拖动按着鼠标左键拖动

编程相关快捷键

作用Mac OS系统Windows系统备注
注释代码⌘ + /Ctrl + /
代码格式化Option + Shift + FAlt + Shift + F
将光标的移动回退到上一个位置⌘ + UCtrl + U

搜索相关快捷键

作用Mac OS系统Windows系统备注
在当前文件中搜索⌘ + FCtrl + F
在当前文件中搜索但光标仍停留在编辑器中⌘ + GF3
全局搜索内容⌘ + Shift + FCtrl + Shift + F
全局搜索文件名⌘ + PCtrl + 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 -> 首选项 -> 打开同步设置
  • 选择需要同步的配置
  • 通过MicrosoftGitHub账户登陆
  • 同步完成后, 菜单栏会显示首先项同步已打开, 最左侧也会多出一个同步图标

管理同步:

  • 点击菜单栏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账号