整合了massCode和插件的code-server

在这里插入图片描述

公众号的年度小结出来了,没想到自己居然写了这么多

在这里插入图片描述


本文应网友 快乐100 要求折腾,但老苏并不是程序员,对这种专业工具并不熟,所以错漏在所难免,见谅;

什么是 massCode ?

massCode 是为开发人员提供的免费开源代码片段管理器。它可以帮助您创建和组织您自己的个人片段集合并快速访问它。

massCode 使用 ElectronVueCodemirror 构建。支持 WindowsMacOSLinux 平台,属于桌面应用,并不支持 Docker 部署

在这里插入图片描述

不过老苏今天介绍的项目,集成了 code-server 服务器、massCode 及其 vscode 扩展( massCode Assistant )。利用 massCode 的优势,镜像可以部署为可以使用自定义代码片段的 Web IDE

在这里插入图片描述

关于 code-server 可以看老苏之前写的文章

文章传送门:在线代码编辑器code-server

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 code-server-masscode ,选择第一个 dxsooo/code-server-masscode,双击直接下载。

在这里插入图片描述

本文写作时, 唯一一个版本为 1.0

在这里插入图片描述

docker 文件夹中,创建一个新文件夹 code-server-masscode,并在其中建一个子文件夹 projects

文件夹装载路径说明
docker/code-server-masscode/projects/home/coder/projects存放代码等

在这里插入图片描述

端口

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

# 查看端口占用
netstat -tunlp | grep 端口号
本地端口容器端口
34458080

在这里插入图片描述

命令行安装

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

# 新建文件夹 code-server-masscode 和 子目录
mkdir -p /volume1/docker/code-server-masscode/projects

# 进入 code-server-masscode 目录
cd /volume1/docker/code-server-masscode

# 运行容器
docker run -d \
   --restart unless-stopped \
   --name code-server \
   -p 3445:8080 \
   -v $(pwd)/projects:/home/coder/projects \
   dxsooo/code-server-masscode:1.0

也可以用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件

version: '3'

services:
  code-server:
    image: dxsooo/code-server-masscode:1.0
    container_name: code-server
    restart: unless-stopped
    ports:
      - 3445:8080
    volumes:
      - ./projects:/home/coder/projects

然后执行下面的命令

# 新建文件夹 code-server-masscode 和 子目录
mkdir -p /volume1/docker/code-server-masscode/projects

# 进入 code-server-masscode 目录
cd /volume1/docker/code-server-masscode

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:3445 就能看到登录界面

在这里插入图片描述

这个镜像默认启用了登录认证,但密码在日志中是看不到的

在这里插入图片描述

需要进入容器查看配置文件

# 进入容器
docker exec -it code-server /bin/bash

# 查看密码
cat ~/.config/code-server/config.yaml

在这里插入图片描述

也可以从终端机中操作

在这里插入图片描述

效果是一样的

在这里插入图片描述

登录成功后的主界面

在这里插入图片描述

打开左侧的 Extensions,会看到已经安装了 massCode assistant 插件

在这里插入图片描述

打开命令面板,输入 massCode

  • Create Snippet:新建代码片段;
  • Search:搜索代码片段;

在这里插入图片描述

如果显示下面👇的错误

在这里插入图片描述

这是因为你没有使用 https 协议,反代之后,允许 权限就好了

在这里插入图片描述

新建成功会有提示

在这里插入图片描述

代码保存在 /massCode/db.json

在这里插入图片描述

小结

通过 massCode Assistant 插件创建的代码片段,虽然快捷方便,但是并没有指定文件夹和 tag,感觉查找起来并不方便,如果在桌面端,可以在 massCode 中进行调整,但是容器中似乎就没办法了

参考文档

massCodeIO/massCode: A free and open source code snippets manager for developers
地址:https://github.com/massCodeIO/massCode

massCode | A free and open source code snippets manager for developers
地址:https://masscode.io/

dxsooo/code-server-masscode: Open VSCode server with massCode inside
地址:https://github.com/dxsooo/code-server-masscode

它可以帮助您创建和组织自己的个人摘要集,并可以快速访问它。 功能组织MassCode允许您使用多级文件夹和标签来组织代码片段。每个摘录都有片段-标签,可提供更高层次的组织。编辑器片段管理器不仅必须提供片段的组织,而且必须具有良好的代码编辑器。这就是为什么在MassCode的框架下有摩纳哥的原因。 Monaco是Microsoft的现代代码编辑器,用于最受欢迎的VS Code编辑器之一。该编辑器提供IntelliSense,TypeScript,JavaScript,CSS,LESS,SCSS,JSON,HTML的验证。我们还向代码格式化程序添加了超级高效的Emmet和Prettier。纸盘助手massCode助手位于纸盘中,使您能够始终使用搜索快速访问您的代码片段。您选择的代码段将被复制到剪贴板。 Markdown massCode允许您使用Markdown编写代码,还可以在代码块内提供语法高亮显示。当然还有预览。搜索无法想象 高效的代码段管理器,无需快速访问代码段。因此,massCode具有快速的全文搜索功能,其中突出显示了搜索查询。 Autosave massCode自动保存您在工作期间所做的任何更改,因此您不必担心丢失更改。同步您可以使用任何提供云同步的服务,例如iCloud Drive,Google Drive,Dropbox或其他类似服务。数据库massCode使用简单但功能强大的NeDB来存储数据,每个条目都是一个简单的JSON结构。数据库文件位于本地计算机上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

杨浦老苏

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

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

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

打赏作者

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

抵扣说明:

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

余额充值