Lepton -- 想做代码界的“印象笔记”

·官网链接
·下载页面
·GitHub 项目

功能介绍

Lepton 特色

• 本地新建 /修改 /删除
• 本地搜索
• 语言标签 + 个性化标签
• 格式化 Description （ title + tag ）
• 语法高亮
• 云端同步 + 跨平台支持（ Win + macOS + Linux ）
• 项目开源

发开初衷

Lepton的初衷很简单，希望成为一款可以方便保存 snippet （代码片段）的 APP 。

作为一名码匠，平时爱总结有用的代码片段，如果能把它们保存在 Evernote （印象笔记）就好了。

可惜 Evernote 对代码块支持不好，需要在别的地方把代码块高亮，然后再贴回来，这常常导致格式混乱。新的 block 功能{}虽可以方便地把代码块和正文区分，但不能高亮语法。目前找到的最好折中方法是在Marxico使用 Markdown 记录代码，再同步保存到 Evernote 中。

有没有其他方法呢？我们可以使用 Google Drive/Dropbox ，其中 Google docs 还有支持代码高亮的 plugin 。缺点是，这种基于文件夹的管理方式并不如标签适合代码片段的检索。还有一些单机软件比如Snippets， 能实现本地代码保存，可惜不支持跨设备同步。

到 2017 年初为止，GitHub Gist可能是最适合保存代码片段的云端。（其他网站，比如 Stackoverflow ，也提供或将提供部分代码片段保存功能，但目前还不如 Gist 完善。）它不仅支持最基本的代码高亮、分享、隐私设置，还会保存代码的所有历史版本，甚至还提供了 REST API 支持。美中不足的是， Gist 没有提供标签功能，所有代码片段（ Gist ）按照时间顺序堆积在一起。GistBox 曾是一款不错的 Gist Web App 。可惜近来开发进度缓慢，许多 issue 不修复也不回复。加上代码不开源， community 难以参与。

目前 Gist 并还没有类似 Evernote 的桌面客户端, 所以 2017 年第一小目标就是做一款基于 GitHub Gist 的桌面客户端。

开发阶段

通过调研，决定选用 Electron 框架。 Electron 把 Node.js 和 Chromium 两者结合，开发者可以使用 JavaScript 进行跨平台的桌面 APP 开发。

为了快速掌握 Electron 的开发技术，我花了一点时间阅读了另外一个开源的 Electron APP pupaFM 的 commit 历史，大概读到 60 多条吧。作者的开发流程是将 React + Redux 结合来构建前端 UI 和管理 App 的状态，使用 Webpack 来作为构建工具。为了开发过程中少踩坑，我决定采用和 pupaFM 类似的开发流程。（去 Udemy 自学了些 React+Redux ，然后又学了点 Webpack 和 Scss ）

主要开发阶段历时 3 周，前两周负责功能实现，第三周负责优化界面。第三周后的工作主要负责解决用户反馈的 bug 和搭建 GitHub Page 。后来又在基本功能基础上加入了个性化标签和本地搜索。

>>语法高亮

我采用Highlight.js来实现语法高亮。由于作者很傲娇地不支持 line number，所以 line number 部分由自己写。其中难点是如何让用户复制黏贴代码时不把 line number 也一同贴上。我最后使用了data-pseudo-content来标记行数解决了这个问题，这是具体的代码。

>>React + Redux 的 state 选择

刚开始开发时候，把一些 Dialog 的 show/hide 作为 React component 的 local state ，以为它们和 app 的全局 state 无关，应该放在 component 中。后来，随着 dialog 数目的增多（ search dialog 、 create dialog 、 edit dialog ），属于不同 component 的 dialog 有时候会出现相互覆盖、难以协调的现象。如果一开始就把它们的 state 作为 Redux 的全局 state ，就可以有效避免这些问题。这是一点小经验。

>>标签实现

Gist 本身并不支持标签。我一开始想法是通过一个 scret gist 来保存和同步标签记录。后来发现这个方法效率不高，每次标签变化都要把所有标签记录重新写入这个 scret gist ，而且出错后容易丢失记录，最后弃用。目前方法是通过 description 部分的特殊字符#tags来保存自定义的标签。优点是标签分散到每个 gist 中，每次只需要更新该 gist 对应部分的标签即可，而且可读性高，还能提高本地搜索的准确性。

>>本地搜索

Lepton的本地搜索采用了elasticlunr.js模块。遗憾的是，它目前只支持英文的整词搜索，而且我只让它搜索 Description 部分（因为代码部分常构不成整词）。

>>自动更新

Electron 自带了一个autoUpdater模块，可以自动检测 server 上的新版本，并自动在后台下载。目前这部分还没有集成到Lepton中，也许以后会加上。

>>图标设计

作为非 Designer ，能把图标制作到这个程度我也是很满意的了。制作方法是先画一个逗号，然后去下面第一个网站把图片转换成 svg ，然后再去第二个网站把 svg 文件转换成 Material 风格的图标。

• http://pngtosvg.com/
• https://android-material-icon-generator.bitdroid.de/

感谢

• 1MHz 给了很多技术支持，欢迎大家也去参观一下他的 Electron 作品Knotes。
• xwartz 的PupaFM详细的 commit 记录对我学习 Electron 帮助很大，希望大家去也给这个项目点个赞。