在线代码编辑器code-server

发表于 2022-05-02 更新于 2024-11-21 分类于各种折腾 Waline：阅读次数：本文字数： 2.4k 阅读时长 ≈ 2 分钟

在任何地方的任何机器上运行 VS Code 并在浏览器中访问它。

今天是上海浦西全域静态管理的第 32 天。祝大家 5.1 假期 “无疫” 快乐！

周五、周六休息，没做核酸也没做抗原，周日、周一抗原。

周六再次迎来了降级，小区从管控区降为了防范区，不过还是按管控区管理，反正就是不能出小区，也许防范区是给未来的解封准备的吧。

看新闻上海似乎已经 社会面清零 ，也许离解封不远了，总之，希望还是要有的。

因为经常要编辑各种代码文件，尤其是 yaml 文件，群晖自带的 文本编辑器 虽然支持 yaml 文件，但实际上经常会出现错误，主要是因为 yaml 文件对缩进有比较严格的要求，一般情况下老苏会用 Visual Studio Code，老苏工作机比较多，这就需要在每台机器上都安装，空间不是问题，架不住繁琐，所以打算部署个 Web 版的 VS Code，这样在任何有网络的地方都可以使用了。真正做了一次安装，到处使用。

什么是 code-server ？

code-server 是一个免费的基于浏览器的 IDE，可以让我们在具有一致开发环境的任何设备上编写代码。

还有个项目叫 OpenVSCode ，和 code-server 似乎是一样的，等有空了再来研究

准备

如果你要在互联网上使用，需要先准备好一个域名，并做好反向代理设置，因为后面安装容器的时候会用到。老苏用的 Nginx Proxy Manager，群晖自带的反向代理道理上是一样的

没啥问题的话老苏都勾选了

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 code-server ，选择第二个 linuxserver/code-server，版本选择 latest。

卷

在 docker 文件夹中，创建一个新文件夹，并将其命名为 code-server，再建一个子目录 config

文件夹	装载路径	说明
`docker/code-server/config`	`/config`	存放设置

端口

本地端口不冲突就行，不确定的话可以用命令查一下

1 2	# 查看端口占用 netstat -tunlp \| grep 端口号

本地端口	容器端口
`3444`	`8443`

环境

可变	值
`TZ`	指定时区，设为 `Asia/Shanghai`
`PUID`	设为 `1000`
`PGID`	设为 `1000`
`PASSWORD`	可选项，为 `web gui` 的密码
`PROXY_DOMAIN`	可选项，例如设为 `vsc.laosu.ml`，不需要带端口

1、PASSWORD：如果你跟老苏一样已经有了 authelia ，这里可以不用设置，否则的话安全起见还是设置一个比较好
2、 PROXY_DOMAIN ：如果要在公网使用，就需要设置

命令行安装

如果你熟悉命令行，可能用 docker cli 更快捷

【注意】：

PROXY_DOMAIN 后面替换为你的域名

老苏用的 volume2，请根据自己的进行替换

# 新建文件夹 code-server 
mkdir -p /volume2/docker/code-server/config

# 进入 code-server 目录
cd /volume2/docker/code-server

# 启动容器
docker run -d \
  --name=code-server \
  -e PUID=1000 \
  -e PGID=1000 \
  -e TZ=Asia/Shanghai \
  -e PASSWORD=password \
  -e PROXY_DOMAIN=vsc.laosu.ml \
  -p 3444:8443 \
  -v $(pwd)/config:/config \
  --restart unless-stopped \
  linuxserver/code-server

或者你可以用 docker-compose，将下面的内容保存为 docker-compose.yml

version: "2.1"
services:
  code-server:
    image: linuxserver/code-server
    container_name: code-server
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Shanghai
      - PASSWORD=password 
      - PROXY_DOMAIN=vsc.laosu.ml
    volumes:
      - /volume2/docker/code-server/config:/config
    ports:
      - 3444:8443
    restart: unless-stopped

执行下面的命令

# 进入目录
cd /volume2/docker/code-server

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:3444 就能看到主界面

设置中文

方法和 VS Code 桌面客户端中的方法是一样的，选择左侧菜单 Extensions，搜索 chinese，选第一个 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，点蓝色的 install 按钮

安装完成后右下角会有弹出的提示框

选择 Change Language and Restart 之后，就变成中文了

文件编辑

新建一个文件

保存的文件在 /docker/code-server/config/workspace 目录中

参考文档

coder/code-server: VS Code in the browser
地址：https://github.com/coder/code-server

Coder: Developer workspaces on your infrastructure
地址：https://coder.com/

Need a complete example for how to use the –proxy-domain feature … · Issue #1838 · coder/code-server
地址：https://github.com/coder/code-server/issues/1838