前言

VSCode作为一款优秀的编辑器工具，其使用Electron进行开发。而wails作为基于webview2开发桌面应用的框架，其实和Electron在内存占用方面大差不差。亮点可能就是exe就5MB左右。（背后的webview2 400M左右）于是便使用wails开发一款文本编辑器试试。

项目介绍

此项目名为 wails-coder ，目标是打造一款轻量的文本编辑器，采用常见的编辑器设计风格，支持以下核心功能：

• ✅ 文件资源管理器 - 树形结构浏览文件系统
• ✅ 多标签页编辑 - 同时编辑多个文件
• ✅ 集成终端 - 内置命令行工具
• ✅ 深色主题 - 护眼编程体验
• ✅ 快捷键支持 - 提升开发效率

模块组件划分

以界面组件分类，主要包括以下几种：

• toolbar工具栏：包含文件、编辑、终端、帮助等菜单组。
• Activity活动栏：左侧切换展示资源管理器、搜索、git、插件界面等，主要影响左侧布局。
• Editor编辑器界面：主要由文件tabs和编辑器区域组成。
• BottomBar底栏：主要展示当前文件 行列空格编码等信息
• Panel各种面板：此类属于基础+扩展功能，比如终端交互界面、运行日志界面。报错界面、git commits树图展示界面，还应该支持插件注册。
  

终端支持

git提交侧栏

直接git add -A然后commit。

git日志面板

可视化展示commits信息以及文件变更列表

git-diff modal支持

点击变更的文件，可以弹框展示前后差异。

插件列表

当然只是个list， 还没想好如何和插件联动工作的。 来自openvsx网站

进程管理器

按照pid展示进程， 右键可以强制结束进程

字符串搜索

在工作目录下匹配字符串，按照文件-对应行展示列表

本地文件记录

不同于git的正式commit， 本地文件记录临时储存了一些变更，来增强文件的回溯能力。

代码助手

先实现流式对话

代码助手-文件新增，删除

比如 “总结项目结构，并写入到 介绍.md”, 手动同意后，可自动创建文件并写入总结文本

sftp文件管理器功能

文件（夹）批量上传下载，进度提示，过程中止。

在浏览器中通过localhost:34115访问

web版体验有待提升

时间轴描述

gopls函数悬浮提示

提供gopls工具，完成go函数的用法提示

技术栈选择

后端技术栈

• Go - 高性能后端语言，负责文件系统操作
• Wails v2 - 跨平台GUI框架，Go + Web技术栈
• Go标准库 - 文件IO、路径处理、命令执行

前端技术栈

• Vue 3 - 渐进式JavaScript框架
• TypeScript - 类型安全的JavaScript超集
• Vite - 快速的构建工具
• monoca-editor：开源的编辑器组件

总结

当然目前只是一个简单的编辑器功能，未来可能也是，毕竟主要是写着玩玩。而且这种文本编辑器就像搭积木一样，在基础框架上附加一个个小功能，所以可以慢慢来。更多资料请搜索 “wails-coder” 公众号

体验

免责声明：仅学习、展示和查看文件，不要拿来编辑和修改任何文件。
https://pan.baidu.com/s/1E_EZdpIUgB0GYp7-3CjIlA?pwd=39uj