VS Code技巧汇总
前言
VS Code 是微软出品的代码编辑器,支持多种编程语言,拥有多种扩展。并可通过SSH连接远程服务器。
本文介绍 VS Code 的使用技巧,内容包含设置、快捷键、扩展汇总、内容搜索、环境搭建、远程SSH连接、等等。
设置
进入设置
快捷键:Ctrl + ,
界面:侧边栏 - 设置
或 文件 - 首选项 - 设置
修改的设置会保存在配置文件中,进入 VS Code 时,会优先读取项目配置文件,再读取系统配置文件。
配置文件位置如下:
# Windows系统配置文件,[userName]为登录用户名
C:/Users/[userName]/AppData/Roaming/Code/User/settings.json
# Linux系统配置文件,[userName]为登录用户名
/home/[userName]/.config/Code/User/settings.json
# 项目配置文件,[workspace]为项目根目录
[workspace]/.vscode/settings.json
若为SSH方式的Remote远程连接,则配置文件在目标设备上,目录如下:
# [userName]为SSH目标设备的用户名
/home/[userName]/.vscode-server/data/Machine/settings.json
设置同步
VS Code可同步设置,例如设置、扩展、快捷键、UI、等等;首先需要登录微软账号,如下图:
选择设置同步: Configure
,如下图:
可以选择要同步的内容,如下图:
中文界面
安装扩展:Chinese(Simplified) Language Pack
自动换行
文件 - 首选项 - 设置,搜索wrap
,找到Editor: Word Wrap
,将其更改为on
,如下图:
关闭回车自动补全
VS Code的自动补全默认有2中触发方式,分布式Tab
和Enter
,但Enter
自动补全和换行有冲突,建议关闭Enter
自动补全:
文件 - 首选项 - 设置,搜索Enter
,找到Accept Suggestion On Enter
,将其更改为off
,如下图:
打开的编辑器
资源管理器右侧的更多
,勾选打开的编辑器
,左侧会以列表形式展现,方便快捷:
软件启动方式
打开设置
,搜索restore
,在Window: Restore Windows
处选择none
,则VS Code启动时不会打开历史项目:
配置文件
若不想在图形化界面进行设置,则可在json
配置文件进行编辑。
在搜索文件栏
搜索settings.json
或点击设置页面右上角的打开json
即可进入json
配置文件并进行编辑,如下图:
推荐的配置如下(可根据自身需求修改):
{
// 软件更新
"update.mode": "manual",
// 界面主题
"workbench.colorTheme": "Default Dark Modern",
// 自动换行
"editor.wordWrap": "on",
// 回车自动补全,关闭防止回车和补全冲突
"editor.acceptSuggestionOnEnter": "off",
// 扩展自动更新
"extensions.autoUpdate": false,
// 同步忽略的扩展
"settingsSync.ignoredExtensions": [],
// 跟踪符号链接,关闭减小内存
"search.followSymlinks": false,
// cmake通知
"cmake.showOptionsMovedNotification": false,
// cmake自动配置
"cmake.configureOnOpen": false,
// SSH远程平台
"remote.SSH.remotePlatform": {
"Ubuntu22": "linux"
}
}
快捷键
编辑快捷键
- 注释:
Ctrl+\
- 缩进:
Tab
- 反缩进:
Shift + Tab
- 光标向前跳转:
Alt+Left
- 光标向后跳转:
Alt+Right
搜索快捷键
6. 文件内容搜索:Ctrl + F
7. 全局内容搜索:Ctrl + Shift + F
8. 文件名搜索:Ctrl + P
窗口快捷键
9. 打开终端窗口:Ctrl + `
10. 打开输出窗口:Ctrl + Shift + U
11. 打开调试窗口:Ctrl + Shift + Y
运行命令
在编辑器窗口使用快捷键Ctrl + P
,键入>
,即可显示并运行命令,如下图:
扩展管理
扩展使用
进入扩展
侧边栏 - 扩展
,即可在线安装扩展。
扩展文件夹
VS Code安装的扩展保存在如下文件夹:
# Windows系统目录,[userName]为登录用户名
C:\Users\[userName]\.vscode\extensions
# Linux系统扩展目录,[userName]为登录用户名
/home/[userName]/.vscode/extensions
若为SSH方式的Remote远程连接,则扩展安装在目标设备上,目录如下:
# [userName]为SSH目标设备的用户名
/home/[userName]/.vscode-server/extensions
安装本地扩展
VS Code扩展商店:官网 。
若在线安装扩展失败,可到扩展商店官网下载离线扩展文件,为vsix
文件;
点击扩展页面的Resources - Download Extension
即可下载;
在扩展界面点击更多 - 从VSIX安装
,选择离线扩展文件即可安装。
扩展汇总
Basic
Chinese(Simplified) Language Pack
Remote
Remote Development
Remote - SSH
Git
GitLens:光标处显示Git修改记录
Git Blame:状态栏显示Git修改记录
Git Graph:查看Git图
C/C++
C/C++:推荐使用v1.14.4版本
CMake Tools
C/C++ Extension Pack
Web
Open in browser
Microsoft Edge Tool
Linux
WSL
Tool
Black Formatter:python代码格式化工具
MLIR:高亮mlir语法
Rainbow CSV:高亮csv文件
vscode-pdf:查看pdf文件
vscode-json:json格式优化
vscode-pydata-viewer:查看npz文件
Protobuf(Protocol Buffers):高亮proto、prototxt语法
AI Tool
GitHub Copilot:代码补全工具
AWS Toolkit:AI会话助手
Bito AI Code Assistant:ChatGPT助手
CursorCode:代码生成/补全工具
TabNine:AI编程助手
IntelliCode:AI编程助手
Kite:代码补全工具
内容搜索
文件内容搜索
快捷键:Ctrl + F
界面:编辑 - 查找
说明:在当前文件中查找内容。
全局内容搜索
快捷键:Ctrl + Shift + F
界面:侧边栏 - 搜索
或 查看 - 搜索
说明:在所有项目文件中查找内容。
文件名搜索
快捷键:Ctrl + P
界面:顶边栏 - 搜索文件
或 更多 - 转到 - 转到文件
说明:在所有项目文件中按文件名查找文件。
环境搭建
HTML
安装扩展
进入VS Code,安装扩展 open in browser
或 view in browser
,如下图。
推荐使用 open in browser
,因为使用人数较多。
使用扩展
在VS Code中打开html文件后,在代码页面右键,即可选择Open in Default Browser
或 Open in Other Browsers
,如下图:
C/C++
安装扩展
打开VS Code,安装扩展C/C++
,如下图:
推荐直接安装扩展C/C++ Extension Pack
,其中包含C/C++、C/C++ Themes、CMake Tools
,如下图:
还可以安装扩展CMake
、Makefile Tools
、等等。
安装MinGW
Windows系统需安装MinGW,Linux系统需通过apt
安装gcc
和g++
。
下文介绍Windows系统安装MinGW。
MinGW下载地址:https://sourceforge.net/projects/mingw-w64/files/
下载MinGW:
选择合适版本的离线安装包下载,一般选择x86_64-posix-seh
进行下载,如下图:
安装MinGW:
下载成功后,创建安装目录,将下载好的7z
压缩包解压到安装目录即可,本人的安装目录为C:\Program Files\mingw64
。
添加MinGW环境变量:
在系统设置 - 关于 - 高级系统设置 - 环境变量
,在系统变量
或用户变量
的Path
中添加MinGW安装目录的bin
文件夹,本人为C:\Program Files\mingw64\bin
,如下图:
检查环境变量是否添加成功:
打开命令提示符(CMD),输入以下命令,若显示版本则代表环境变量添加成功:
gcc --version
g++ --version
gdb --version
运行C/C++文件
打开VS Code,新建hello_world.c
文件:
#include <stdio.h>
#include <stdlib.h>
int main(){
printf("Hello World");
system("pause");
return 0;
}
点击编辑器右上角的运行C/C++文件
或侧边栏的运行和调试
,如下图:
选择调试器:C++(GDB/LLDB)
,如下图:
选择配置:C/C++: gcc.exe生成和调试活动文件
,如下图:
此时会自动在.vscode
文件夹中生成tasks.json
文件,即可开始运行和调试C/C++文件。
注意
为防止终端一闪而过;
在运行前可以在return
前设置一个断点;
或在return
前加一段暂停代码system("pause")
。
Python
安装Python
可从 Python 官网下载 Python 进行安装,也可安装 Anaconda 来使用Python。
推荐安装 Anaconda,因为Anaconda可以作为Python管理器,创建Python虚拟环境,并支持使用不同版本的Python。
需要注意的是,Anaconda要占用很多硬盘空间。
Anaconda的安装及使用可查看本人的其它博客:
Linux系统安装Anaconda / 创建Python虚拟环境
安装扩展
打开VS Code,安装扩展Python
,如下图:
再安装Python自动补全扩展Pylance
,如下图:
运行Python文件
在VS Code中打开html文件后,在代码页面右键,即可选择Run Python File in Terminal
。
也可以在VS Code的终端中通过如下命令运行py文件:
python [script.py]
其中,[script.py]
即为要运行的py文件。
远程SSH连接
被控端准备
被控端一般为Linux,默认已安装ssh,但需要手动安装openssh-server。
需要直接登录Linux被控端进行安装,因为此时无法通过SSH进行远程连接。
安装openssh-server
sudo apt install openssh-server
检验是否安装成功
ssh localhost
连接成功则代表安装成功。
若连接失败可参考本人的另一篇博文的 连接失败 章节进行问题排查并解决问题。
博文链接:连接服务器/容器SSH | 连接SSH报错
查看被控端IP
ifconfig
其中,inet
便是IP地址。
安装扩展
打开VS Code,安装扩展Remote-SSH
,如下图:
推荐直接安装扩展Remote Development
,其中包含Remote-SSH、Remote-Tunnels、Dev Containers、WSL
,如下图:
配置SSH
在VS Code中,进入侧边栏的远程资源管理器
,选择远程(隧道/SSH)
,点击SSH右侧的加号
,如下图:
在下图弹出的命令窗口输入SSH连接命令:
SSH连接命令:
ssh [-p port] [user]@[ip]
# 示例
ssh user@172.26.82.160
其中,[-p port]
可省略,默认port为22,[user]
为被控端用户名,[ip]
为被控端IP地址。
随后点击SSH右侧的设置
按钮,并选择用户文件夹下的ssh配置文件,如下图:
可以更改Host
为自定义名称,HostName
为被控端IP地址,User
为被控端用户名,Port
默认为22,如下图:
若编辑好ssh配置文件后,远程资源管理器没有显示对应的远程目标,则需要点击远程右侧的刷新
按钮,如下图:
创建SSH连接
配置好SSH连接后,SSH下方会出现自定义命名的SSH连接,点击右侧的创建连接
按钮,如下图:
在弹窗中输入被控端密码,如下图:
在SSH连接的欢迎
界面点击打开文件夹
即可打开被控端的远程文件夹,如下图:
选择被控端的文件夹,点击确定
即可进入文件夹进行开发工作,如下图:
注意需要再次输入密码才可进入文件夹。
打开终端窗口
在VS Code创建SSH连接后,可通过如下快捷键打开被控端的终端窗口:
打开终端快捷键:Ctrl+`
也可点击菜单的查看 - 终端
调出被控端的终端窗口,如下图:
通过公钥连接SSH
通过公钥连接SSH则无需输入密码,可以解决频繁输入密码验证的问题。
步骤如下:
- 在主控端通过SSH命令生成SSH公钥对:
ssh-keygen -t rsa
。 - 可不设密码一路回车,即可在主控端用户目录的
.ssh
文件夹下生成公钥和私钥对。 - 将主控端
id_rsa.pub
公钥中的内容全部复制。 - 找到被控端用户目录的
.ssh
文件夹的authorized_keys
文件,没有此文件则需创建。 - 将主控端公钥中的内容全部粘贴添加至被控端的
authorized_keys
文件,保存即可。
补充:
创建SSH密钥的具体步骤可参考本人另一篇博文的 设置SSH Key 部分。
博文链接:Git使用流程及技巧 。
连接Docker
有2个方案可在VS Code连接Docker,方案1不需要进行容器端口映射,方案2需要进行容器端口映射,可自行选择。推荐使用方案2,比较灵活。
方案1需要在VS Code安装 Dev Containers 扩展,方案2需要安装 Remote - SSH 扩展,推荐安装 Remote Development 扩展,包含前2个扩展。
方案1:通过VS Code的容器插件链接
此方法不需要进行容器端口映射。
打开VS Code,点击远程扩展按钮,远程资源管理器选择开发容器,选中已经存在的容器,选择在新窗口中附加即可,如下图:
方案2:通过VS Code的SSH插件连接
此方法需要进行容器端口映射。
此方法与SSH连接主机相同,只需将SSH默认端口号22
修改为主机的映射端口号hostPort
即可。
连接容器SSH前,确保完成以下步骤:
# 设置容器用户密码
sudo passwd [user_name]
# 安装openssh-server
sudo apt install openssh-server
# 修改sshd配置
vim /etc/ssh/sshd_config
PermitRootLogin yes
PasswordAuthentication yes
PubkeyAuthentication yes
# 开启ssh服务
eval ssh-agent
sudo service ssh start
补充
每次重新启动容器后,都需要手动开启ssh服务:
eval ssh-agent
sudo service ssh start
可将以上命令写进SH文件中,首先创建文件ssh_init.sh
,写入以下内容:
#!/bin/bash
eval ssh-agent
service ssh start
赋予文件执行权限:
chmod +x ssh_init.sh
每次重新启动容器后,执行此SH文件即可开启ssh服务:
bash ssh_init.sh
其它技巧
内存占用过高
解决方案详见本人另一篇博文:VS Code内存占用过高 - 解决方案 。
清除缓存
以Windows系统为例,缓存文件位置如下,注意清除前先关闭VS Code。
C:\Users\[userName]\AppData\Roaming\Code\Cache
C:\Users\[userName]\AppData\Roaming\Code\CachedData
无法监视文件更改
问题
VS Code弹窗提示:
无法在工作区中监视文件更改。请按照说明链接来解决此问题。
原因
工作区很大并且文件很多,导致VS Code文件观察程序的句柄达到上限。
解决方案
# 查看当前最大监视数量
cat /proc/sys/fs/inotify/max_user_watches
# 编辑文件
vim /etc/sysctl.conf
# 添加以下内容,重新设定最大监视数量
fs.inotify.max_user_watches=524288
# 设置生效
sysctl -p
若提示没有权限,则使用sudo前缀以root权限运行命令。
补充
524,288是可监视的最大文件数,但如果内存有限制,则可以降低此数值。
每个文件监视占用540B(32位)或1kB(64位),假设所有524,288个句柄都被消耗,则上限约为256MB(32位)或512MB(64位)。
代码托管不显示Git仓库
问题
当文件夹中有多个Git仓库时,点击左侧的源代码管理
,其中不显示个别Git仓库。
解决方案
点击左侧的源代码管理
,在源代码管理
页面右键,选择存储库
,勾选要显示的Git仓库,如下图。
查看远程项目中图片尺寸
问题
通常来说,右键图片选择属性可以参考图片尺寸,但通过VS Code的remote功能远程开发时,右键图片没有属性选项,因此无法使用此方法查看图片的宽或高等属性。
方法1:在VS Code界面查看
在VS Code中选中图片,左上角显示图片所在路径,如下图:
右下角则会显示图片的宽高尺寸和占用空间,如下图:
方法2:编写代码查看
创建show_img_size.py
脚本,编写代码如下:
from PIL import Image
# 打开图像文件
image_path = 'path/to/img'
image = Image.open(image_path)
# 获取图像的宽度和高度
width, height = image.size
# 打印图像的宽度和高度
print("w:", width)
print("h:", height)
在终端运行脚本:
python show_img_size.py
代码补全不起作用
问题
在Linux主机或Docker环境下,使用 VS Code 编写 CPP 代码时,变量没有代码补全。
解决方案
首先确保已经安装并启用了 C++
扩展3件套:C/C++、C/C++ Themes、CMake Tools
。
确保设置中的 C_CPP: Intelli Sense Engine
选项为 default
,即开启状态。
在 VS Code 的项目根目录下找到 .vscode
文件夹,若没有可创建此文件夹。
在 .vscode
文件夹中新建文件:c_cpp_properties.json
,编写配置如下:
{
"configurations": [
{
"name": "Linux",
"compilerPath": "/usr/bin/gcc",
"intelliSenseMode": "linux-gcc-x64"
}
],
"version": 4
}
若 .vscode
文件夹中已存在 settings.json
文件,则无需更改;若不存在,可新建此文件,编写配置如下(可自行修改配置):
{
"files.associations": {
"*.inc": "cpp",
"array": "cpp",
"bitset": "cpp",
"string_view": "cpp",
"initializer_list": "cpp",
"ranges": "cpp",
"span": "cpp",
"regex": "cpp",
"utility": "cpp",
"valarray": "cpp",
"any": "cpp",
"atomic": "cpp",
"barrier": "cpp",
"bit": "cpp",
"*.tcc": "cpp",
"cctype": "cpp",
"cfenv": "cpp",
"charconv": "cpp",
"chrono": "cpp",
"cinttypes": "cpp",
"clocale": "cpp",
"cmath": "cpp",
"codecvt": "cpp",
"compare": "cpp",
"complex": "cpp",
"concepts": "cpp",
"condition_variable": "cpp",
"coroutine": "cpp",
"csetjmp": "cpp",
"csignal": "cpp",
"cstdarg": "cpp",
"cstddef": "cpp",
"cstdint": "cpp",
"cstdio": "cpp",
"cstdlib": "cpp",
"cstring": "cpp",
"ctime": "cpp",
"cuchar": "cpp",
"cwchar": "cpp",
"cwctype": "cpp",
"deque": "cpp",
"forward_list": "cpp",
"list": "cpp",
"map": "cpp",
"set": "cpp",
"string": "cpp",
"unordered_map": "cpp",
"unordered_set": "cpp",
"vector": "cpp",
"exception": "cpp",
"algorithm": "cpp",
"functional": "cpp",
"iterator": "cpp",
"memory": "cpp",
"memory_resource": "cpp",
"netfwd": "cpp",
"numeric": "cpp",
"optional": "cpp",
"random": "cpp",
"ratio": "cpp",
"source_location": "cpp",
"system_error": "cpp",
"tuple": "cpp",
"type_traits": "cpp",
"fstream": "cpp",
"future": "cpp",
"iomanip": "cpp",
"iosfwd": "cpp",
"iostream": "cpp",
"istream": "cpp",
"latch": "cpp",
"limits": "cpp",
"mutex": "cpp",
"new": "cpp",
"numbers": "cpp",
"ostream": "cpp",
"scoped_allocator": "cpp",
"semaphore": "cpp",
"shared_mutex": "cpp",
"sstream": "cpp",
"stdexcept": "cpp",
"stop_token": "cpp",
"streambuf": "cpp",
"syncstream": "cpp",
"thread": "cpp",
"typeindex": "cpp",
"typeinfo": "cpp",
"variant": "cpp"
},
// "files.autoSave": "afterDelay",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"editor.tabSize": 2,
"cmake.configureOnOpen": false,
"C_Cpp.formatting": "clangFormat",
"C_Cpp.clang_format_style": "LLVM"
}
保存好配置文件后,重启 VS Code 打开项目,即可修复自动补全功能。