VSCode code server 的安装与使用

VSCode-web版的安装与设置

还在为IDE本地使用烦恼吗？VSCode code server来帮你解决

背景

Visual Studio(VS)

Visual Studio 是一款由微软公司开发的集成开发环境（IDE），它支持多种编程语言，包括C++、C#、Java、Python等。VS具有强大的代码编辑、调试、版本控制等功能，是许多开发者的首选工具。

早年间：

  • 1997年发布Visual Studio 97
  • 定位：重量级集成环境IDE，，主要面向Windows平台和企业开发者
    • 支持C++、C#、VB.NET等编程语言
    • 集成调试器，GUI设计器、数据库工具、测试工具
    • 支持 Windows 应用、Web 应用、移动应用开发（通过 Xamarin）

后期加入各种功能：

  • 2005–2010：增强 Web 和 Windows 应用开发，支持团队开发
  • 2012–2020：引入跨平台开发工具、Azure 集成、移动开发支持
  • 2020–今：提供 VS 2022（64 位版），注重大型企业和复杂项目开发

VS功能就是强大，除了贵大没啥缺点

VS Code

微软在2015年正式发布了VS Code，一款轻量级的代码编辑器，它具有丰富的插件和扩展，支持多种编程语言，包括Python、JavaScript、C++等。VS Code具有强大的代码编辑、调试、版本控制等功能，是许多开发者的首选工具。

  • 基于 Electron 框架（HTML/JS/CSS）
  • 支持 Language Server Protocol (LSP)，可扩展各种语言智能提示
  • 内置 Git 支持，可以安装各种插件
  • 开源（MIT License），有活跃的社区生态

随着AI的不断发展，VSCode也在快速的迭代，以前是1-2年迭代，现在是卷

  • 2015–2017：快速发展插件生态，支持调试、Git 集成
  • 2018–2020：远程开发支持（Remote Development），跨平台体验优化
  • 2021–2026：AI 编程助手（Copilot）、Codespaces、DevOps 集成

VSCode Web

微软希望把 VSCode 的核心体验带到浏览器端，2020年发布，让开发者无需安装客户端，就能在任何设备上编写、调试和管理代码。VSCode Web 是一个基于浏览器的代码编辑器，它支持多种编程语言，包括Python、JavaScript、C++等。VSCode Web具有强大的代码编辑、调试、版本控制等功能，是许多开发者的首选工具。

试想一下，你的服务器可以随处登陆，能够随处使用VSCode 是不是更方便，不管是本地启动还是远端启动

  • 基于 VSCode 核心（Monaco Editor）
  • 与Github服务结合
  • 浏览器中前端是 Monaco 编辑器；后端通过 WebAssembly、Node.js 或远程容器 提供语言服务、调试、终端等功能

vscode-web

安装

Code-server是一个开源项目，项目托管在code-server github，它的核心作用是：

让你可以在任何地方完整的运行Visual Studio Code编辑器，并通过浏览器访问，通过web浏览器开发

Code-server的主要作用

把VS Code的完整编辑器界面部署到一个服务器上，比通过HTTP/WebSocker暴露给浏览器访问

  • 不需要本地安装VSCode
  • 通过浏览器也可以写代码、管理项目、安装拓展
  1. 使用脚本安装
# 只预演，不执行
curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

## 执行
curl -fsSL https://code-server.dev/install.sh | sh
  1. 使用Docker安装
# This will start a code-server container and expose it at http://127.0.0.1:8080.
# It will also mount your current directory into the container as `/home/coder/project`
# and forward your UID/GID so that all file system operations occur as your user outside
# the container.
#
# Your $HOME/.config is mounted at $HOME/.config within the container to ensure you can
# easily access/modify your code-server config in $HOME/.config/code-server/config.json
# outside the container.
mkdir -p ~/.config
docker run -it --name code-server -p 127.0.0.1:8080:8080 \
  -v "$HOME/.local:/home/coder/.local" \
  -v "$HOME/.config:/home/coder/.config" \
  -v "$PWD:/home/coder/project" \
  -u "$(id -u):$(id -g)" \
  -e "DOCKER_USER=$USER" \
  codercom/code-server:latest
  1. Ubuntu/Debian 本地安装

你也可以自行下载deb文件，安装

curl -fOL https://github.com/coder/code-server/releases/download/v$VERSION/code-server_${VERSION}_amd64.deb
sudo dpkg -i code-server_${VERSION}_amd64.deb
sudo systemctl enable --now code-server@$USER
# Now visit http://127.0.0.1:8080. Your password is in ~/.config/code-server/config.yaml
  1. macOS系统安装
brew install code-server
brew services start code-server
# Now visit http://127.0.0.1:8080. Your password is in ~/.config/code-server/config.yaml

设置

在~/.config/code-server文件夹中找到config.yaml

bind-addr: 0.0.0.0:13146
auth: password
password: abc,123
cert: false
  • bind-addr: 指定监听的地址和端口，默认是127.0.0.1:8080，为了让局域网能访问到这里设置了0.0.0.0:13146
  • auth: 指定认证方式，默认是password，也可以是none
  • password: 指定密码，默认是随机生成
  • cert: 指定是否使用SSL证书，默认是false

使用

打开浏览器，本地输入127.0.0.1:8080,如果是自己设置的就输入服务器IP：端口，进入界面，输入设置的密码，进入下面的界面就表示安装成功了

vscode-web

  1. 启动参数

在config.yaml中，设置启动参数

# 启动 code-server 并指定文件夹
code-server /path/to/project
  1. 插件管理
  • code-server 可以安装大部分 VS Code 插件
  • 但部分插件依赖本地 Node.js 或系统命令，可能在 Web 受限
  • 可以通过 –extensions-dir 指定插件目录
  1. 快速启动当前的目录
code-server .
Note

如果有域名和公网IP，它就是你的在线VSCode，和vscode官方提供的一样，但是只属于你和Your Team