使用 VSCode 远程开发最佳实践

首先分析一下，为什么要远程开发？本人认为远程开发主要有以下优点：

1. 一处搭建，多处使用

   只需要在远程机上搭建好开发环境，在任何电脑上都可以进行开发，非常便利

2. 开发环境隔离，可以在不同的开发环境之间快速切换

3. 对本机性能要求低

远程开发方式选择

远程开发方式：

1. Remote - SSH

   通过使用 SSH 远程连接计算机或者虚拟机中

2. Remote - Containers

   通过 SSH 远程连接到 Docker 容器，在 Docker 中进行开发

3. Remote - WSL

   在 Windows 中远程 WSL 进行开发。这种方式无法实现环境隔离，但是可以在 Windows 中获取 Linux 开发的体验

选择比较：

由于业务原因，有的软件必须基于 Windows 进行开发，只能选择 Windows+WSL 组合，但是 WSL 无法实现开发环境隔离，因此还需要加上 Docker。

虽然可以仅使用 Docker 实现远程开发，但这会带来一个问题，需要在每个开发容器中安装 ssh、git、zsh 等一系列工具和 vscode 的插件，增加部署负担，增加额外的内存消耗；若需要增加映射端口或者新增挂载，则必须要重建容器，这个时候，容器里的配置将会清空，又得从头配置一次。

综合考虑，最终选择了 Windows + Docker Desktop + WSL 组合使用的方式。

方案实施

具体的实施方案为：

1. 在 Docker 中跑应用
2. 将代码文件挂载到 WSL 的某个工作目录
3. 使用 VSCode 远程 WSL，打开工作目录进行编程

举例说明

下面以 vue 项目为例举例说明

首先，在 WSL 中，创建一个远程工作目录，例如 ~/docker-envs，将下面的 docker-compose.yml 复制过去，运行 docker compose up -d 启动开发环境

services:
  vue-env:
    container_name: vue-env
    image: node:lts
    volumes:
      - ./vue:/app
    working_dir: /app
    ports:
      - 9527:9527
    # 为容器启动一个轻量级的 init 系统，可以处理孤儿进程并转发信号，解决 stop 速度慢的问题
    init: true
    command: [ "sh", "-c", "exec sleep infinity" ]

然后，使用下面的命令进入到容器内开始初始化项目

docker exec -it vue-env bash
# 项目初始化及依赖安装此处省略
...
# 退出容器

接着，执行 docker exec -it vue-env npm run dev 启动开发环境，这个终端不能退出，在开发中需要一直保持。

最后，使用 VSCode 远程 WSL，打开 ~/docker-envs/vue 进行开发。

使用体验

2025-10-14

从 2024年 10月迄今，使用上述远程开发方式大约有 1年的时间了，在使用的过程中，出现一些影响开发体验的情况，在此总结一下。

Typescript 重新编译耗尽磁盘 IO

有时候在开发或者编译 TS 项目时，会出现磁盘 IO 耗尽的情况，导致 Docker 无法响应命令，需要等待一段时间才恢复。

这种情况可能是由于 Docker 卷挂载开销，编译时频繁的文件同步会消耗大量 IO，尤其是热重载或增量编译。

目前使用来看，出现的机率不是很高，也可能是由于内存原因。因此先保持原样。

2025-10-28

上周末抽空将 DockerDesktop 卸载了，然后在 wsl 使用原生的方式安装 Docker，使用了几天，至今未发现磁盘占用率过高的问题，开发的时候，爽多了。

2025-11-05

今天感觉能完全复现磁盘占用过高问题了，当使用 docker exec -it containerName npm run dev 重启开发环境之后，再使用 docker exec -it containerName npm run build:pro 进行编译，当出现以下输出时，磁盘占用率基本就会到 100%，同时进度卡住不能动。

• Compiling:
└── SPA ██████████████       69% building 10075/10126 modules 51 active