搭建自己的在线IDE

什么是在线IDE

在线IDE,顾名思义,就是只要有网络、通过浏览器即可打开进行在线程序编辑的在线的集成开发环境。本文主要介绍在线Visual Studio Code的环境搭建。

环境准备

为了能够安装、使用自己的在线IDE,首先需要准备一台服务器,如果需要在公网环境中访问并使用,最好需要有自己的公网IP、域名等,如果只是局域网内访问使用,则只需要准备一台能够访问外网的服务器即可。

软件安装

执行在线安装

我们可以直接运行以下命令来安装软件。

curl -fsSL https://code-server.dev/install.sh | sh

该命令会下载安装脚本并自动执行安装。

当看到以下输出,则说明软件安装成功。

deb package has been installed.

To have systemd start code-server now and restart on boot:
  sudo systemctl enable --now code-server@$USER
Or, if you don't want/need a background service you can run:
  code-server

在这里插入图片描述
安装完成后,可以通过以下命令来进行启动:

code-server

在这里插入图片描述
从日志可以看出:

  • 启动过程创建了默认的配置文件~/.config/code-server/config.yaml
  • 默认的IP地址使用的是127.0.0.1
  • 默认的端口使用的是8080
  • 认证是开启的
  • HTTPS是没有开启的

配置环境

目前环境虽然启动,但监听地址是127.0.0.1,所以我们无法远程访问;并且认证开启了,但我们还不知道密码是什么。所以,为了能够更好地实现远程访问,需要修改一下配置文件~/.config/code-server/config.yaml,主要可以修改IP地址、访问密码等。

$ vi  ~/.config/code-server/config.yaml

bind-addr: 0.0.0.0:8080
auth: password
password: wux_labs
cert: false

这里:

  • 为了能够远程访问,直接将IP地址修改成0.0.0.0
  • 同时将密码修改为方便我们记忆的密码

再次启动,可以看到IP地址修改成功。

在这里插入图片描述
现在可以实现远程在线访问。

在这里插入图片描述

在密码框中输入自己配置的密码,点击SUBMIT按钮,即可进入IDE环境。

在这里插入图片描述
由于没有配置HTTPS访问,所以会有提示:

在这里插入图片描述
由于HTTPS的配置相对复杂一点,这里先暂时点击I understand跳过去。

接下来可以做一些个性化的操作,比如设置自己喜欢的主题等。

在这里插入图片描述

选择一个自己喜欢的主题。

在这里插入图片描述

通过Extensions可以安装一些自己需要的插件。

在这里插入图片描述

编写Python脚本运行

接下来可以编写一个Python脚本,运行一下。

在这里插入图片描述

在这里插入图片描述

运行成功,成功输出打印的内容Hello World

在这里插入图片描述
运行一下复杂一点的代码,也没有问题。

在这里插入图片描述

添加其他语言支持

前面已经已经成功添加了Python的支持,可以开发Python脚本并运行。如果还需要采用其他语言进行编写代码,则还需要安装其他插件。这里推荐一个Code Runner插件。

在这里插入图片描述

C/C++语言支持

编写C代码并运行。

在这里插入图片描述

编写C++代码并运行。

在这里插入图片描述

Java语言支持

编写Java代码并运行。

在这里插入图片描述

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wux_labs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值