使用 Docker 部署 VS Code in The Browser

1)介绍

GitHub:https://github.com/coder/code-server

在日常学习工作中,Vscode 已成为我们首选的代码编辑器。然而,其局限性在于当我们从家到公司移动时,难以保持连续的编码体验。针对这一痛点,虽然市面上已有如 Visual Studio Codespaces、Cloudstudio 和 CloudIDE 等 在线编辑器(Web IDE)可供选择,但它们要么处于测试阶段,要么免费使用存在限制或价格较高,目前并非完美之选。因此,若想以较低成本实现连续、流畅的编码体验,此时自主搭建一个在线编辑器或许是个值得考虑的好方案。

Code-Server 是由 Coder 开发的,把 VS Code 搬到了浏览器上。
我们可以在任何地方的任何机器上运行 Code-Server 然后通过浏览器访问它。

2)特点

Code Server,作为一款开源代码编辑器,完美地将 Visual Studio Code 的强大功能融入到了 Web 浏览器中。它不仅具备基本的代码编辑、语法高亮、智能感知和自动补全等特性,更支持多人协作和远程开发,为开发者提供了前所未有的便捷体验。

这种能够在浏览器中运行的集成开发环境,通常被称为 Cloud IDE,而 Code Server 正是其中的佼佼者。无论是本地计算机还是云服务器,只需部署 Code Server,用户即可通过浏览器随时随地访问并使用其中的编辑器功能,无需额外安装本地编辑器。

Code Server 的这一特性极大地便利了远程开发、多人协作以及快速搭建开发环境等操作。此外,它还支持丰富的自定义插件和扩展,满足了不同用户的个性化需求,使得开发过程更加高效、灵活。

3)环境

3.1)安装 Docker 软件

# 高版本 Docker 安装
curl -fsSL https://get.docker.com/ | sh
# 关闭防火墙
systemctl disable --now firewalld
setenforce 0
# 启用 Docker
systemctl enable --now docker

3.2)检查 Docker 服务

systemctl status docker

3.3)开启 IPv4 forwarding

echo "net.ipv4.ip_forward=1" >> /etc/sysctl.conf
systemctl restart network
sysctl net.ipv4.ip_forward

4)部署

4.1)下载镜像

docker pull codercom/code-server:latest

4.2)创建目录

mkdir /docker/vscode -p && cd /docker/vscode

4.3)启用容器

docker run -d --name code-server -p 8000:8080 -e PASSWORD=123456 -v /docker/vscode/data:/root/.vscode-server codercom/code-server:latest

4.4)验证容器

docker ps -a

image.png

5)访问验证

使用浏览器访问 VS Code 前台 http://服务器IP地址:8000

填写我们启用容器时 配置的密码

image.png
image.png

5.1)更换主题

image.png

5.2)扩展商店

image.png

5.3)中文配置

安装简体中文语言包:@category:“language packs”

image.png

打开搜索框,输入:> configure display language

image.png

重启服务后生效

image.png
image.png

大功告成~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/617618.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

只需三步将Kimi接入微信公众号

今天我将手把手交大家如何把Kimi大模型接入微信公众号,创建属于你自己的公众号智能助理,让你的公众号具备智能对话、文件阅读、信息搜索等强大功能,同时提高用户互动率、减少人工客服压力等。 废话不多说,先来看看实际效果吧~ 一…

16 华三数据中心最流行的技术 M-LAG

STP和MTP(第二十二课)-CSDN博客 VRRP技术和浮动路由(第二十六课)_vrrp 浮动路由-CSDN博客 VRRP DHCP ACL NAT 网络核心路由技术综述 (第十课)-CSDN博客 04 交换机的IRF的配置-CSDN博客 1 M-LAG AI介绍 M-LAG(Multi-Chassis Link Aggrega…

Electron学习笔记(一)

文章目录 相关笔记笔记说明 一、轻松入门 1、搭建开发环境2、创建窗口界面3、调试主进程 二、主进程和渲染进程1、进程互访2、渲染进程访问主进程类型3、渲染进程访问主进程自定义内容4、渲染进程向主进程发送消息5、主进程向渲染进程发送消息6、多个窗口的渲染进程接收主进程发…

【python】python淘宝交易数据分析可视化(源码+数据集)

👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…

模型推导:BG/NBD(预测用户生命周期(CLV)模型)

CLV(Customer Lifetime Value)指的是客户生命周期价值,用以衡量客户在一段时间内对企业有多大的价值。企业对每个用户的流失与否、在未来时间是否会再次购买,还会再购买多少次才会流失等问题感兴趣,本文中的BG/NBD模型…

PostgreSQL数据库创建只读用户的权限安全隐患

PostgreSQL数据库模拟备库创建只读用户存在的权限安全隐患 default_transaction_read_only权限授权版本变更说明 看腻了就来听听视频演示吧:https://www.bilibili.com/video/BV1ZJ4m1578H/ default_transaction_read_only 创建只读用户,参照备库只读模…

第三步->手撕spring源码之基于Cglib实现实例化策略

为什么深入研究spring源码? 其实每一个程序员每天的工作都是一贯的CRUD 实现业务和需求完成的操作。几年这样的操作让我感觉在这方面要提神能力 光靠CRUD是绝对不可能的事情 CRUD只是满足你作为一个搬砖人而已。编程能力提升?其实更多的编程能力的提升是…

用 Supabase CLI 进行本地开发环境搭建

文章目录 (零)前言(一)Supabase CLI(1.1)安装 Scoop(1.2)用 Scoop 安装 Supabase CLI (二)本地项目环境(2.1)初始化项目(2…

Promise.all和 race

Promise.all() all方法可以完成并行任务, 它接收一个数组,数组的每一项都是一个promise对象。返回值: 成功时:当数组中所有的promise的状态都达到resolved的时候,就返回包含所有 Promise 结果的数组,并且…

【C++】————类与对象(上)-基础知识

目录 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 类的两种定义方式: 成员变量命名规则的建议: 4.类的访问限定符及封装 4.1 访问限定符 ​编辑 【面试题】问题:C中struct和class的区别是什么? 4.2 封装 【面试…

数据分析中大数据和云计算

大数据和云计算 前言一、大数据二、大数据定义三、数据存储单位四、大数据存储技术五、大数据应用技术六、大数据特征七、数据容量八、数据类型的多样性结构化数据半结构化数据非结构化数据 九、获取数据的速度十、可变性十一、真实性十二、复杂性十三、价值十四、云计算十五、…

小白有什么副业可以做?

对于小白来说,以下是一些适合做副业的选择 1. 网络销售 可以在电商平台上开设小店,销售自己感兴趣的产品,如手工制品、二手物品、个人设计的商品等。 2. 做任务 目前网上最流行的就是做任务,因为简单无门槛,我推荐百…

partially initialized module ‘replicate‘ has no attribute ‘run‘

partially initialized module replicate has no attribute run(most likely due to a circular import) 在包名上停留查看impot 包的地址。 报错原因: 文件重名了,导入了 当前文件 。 修改文件名 即可。

分布式版本控制工具 - Git

文章目录 1. 概念介绍2. 客户端2.1 介绍2.2 仓库操作2.3 文件操作2.4 分支原理与操作2.5 标签2.6 远程仓库2.7 README与IGNORE 3. IDEA集成4. 版本号4.1 介绍4.2 文件操作4.2 分支操作 5. 命令5.1 介绍5.2 仓库操作5.3 文件操作5.4 分支操作5.5 标签操作5.6 远程仓库 1. 概念介…

【WebGPU】WebGPU 中的反应扩散计算着色器

在本教程中,我们将使用 WebGPU 技术中的计算着色器实现图像效果。更多精彩内容尽在数字孪生平台。 程序结构 主要构建两个 WebGPU 管道: 运行反应扩散算法多次迭代的计算管道(js/rd-compute.js 和 js/shader/rd-compute-shader.js&#xff…

Linux学习之路 -- 文件系统 -- 缓冲区

前面介绍了文件描述符的相关知识,下面我们将介绍缓冲区的相关知识。 本质上来说,缓冲区就是一块内存区域,因为内核上的缓冲区较复杂,所以本文主要介绍C语言的缓冲区。 目录 1.为什么要有缓冲区 2.应用层缓冲区的默认刷新策略 …

【C++】STL — map和set的使用详细介绍

前言 本章将继续学习STL中的两个很重要的容器map和set,其底层实现是封装了一个红黑树,我们通过本节来学习和深入了解一下这两大容器。。。 序列式容器: string 、Vector、List 、dequeue 关联式容器:MAP 、SET、nordered_map、uno…

成员函数构造函数析构函数

文章目录 类的6个默认成员函数构造函数概述定义特性 析构函数概述特性 类的6个默认成员函数 空类: 如果一个类里面什么都没有写,我们称之为空类 class Date {};空类真的什么都没有吗? 实际上并非如此,编译器会自动生成6个默认成…

【大数据】HDFS

文章目录 [toc]HDFS 1.0NameNode维护文件系统命名空间存储元数据解决NameNode单点问题 SecondaryNameNode机架感知数据完整性校验校验和数据块检测程序DataBlockScanner HDFS写流程HDFS读流程HDFS与MapReduce本地模式Block大小 HDFS 2.0NameNode HANameNode FederationHDFS Sna…

C++笔试强训day19

目录 1.小易的升级之路 2.礼物的最大价值 3.对称之美 1.小易的升级之路 链接 模拟就行&#xff0c;唯一可能是难点得就是gcd&#xff08;最大公约数&#xff09; #include <iostream> using namespace std; #define int long long const int N 1e5 10; int arr[N];…