VS Code技巧汇总

置顶 NSJim

已于 2024-08-12 16:59:36 修改

阅读量1.1k

点赞数 26

分类专栏： Software Code Skill 文章标签： VS Code 技巧汇总

于 2023-12-28 08:00:00 首次发布

本文链接：https://blog.csdn.net/NSJim/article/details/132547819

版权

Software 同时被 3 个专栏收录

93 篇文章 32 订阅

订阅专栏

Skill

61 篇文章 0 订阅

订阅专栏

Code

6 篇文章 0 订阅

订阅专栏

前言

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"
}