笔记, Atom 和 LightTable 语法高亮插件的几个 tip

今天修复了 language-cirru 这个 Atom 插件,
也把没运行成功的 lt-cirru 这个 LightTable 插件运行起来了
大致的功能就是标记语法, 然后用 CSS 指定颜色
前者是从 Sublime 的语法文件转换的, 后者是 CodeMirror 转化
本来挺简单的事情, 然而有坑.. 写点感想加吐槽

LightTable 调试的坑

LightTable 的语法我是按照 CSS 的语法文件抄的
大致的目录结构, css.behaviors 文件, plugin.edn 都抄了一遍
https://github.com/LightTable/CSS
遇到问题, 文字总是灰色, 我已经确认识别为 Cirru 而且不报错, 还是灰色
CodeMirror 语法文件之前测试过, 所以也不会是问题

邮件列表问了没反应, 等了好久, 偶然搜到个调试的办法
因为 LightTable 是基于 node-webkit, 所以理论上有调试工具的
我搜到个邮件说命令里调用 dev-inspector 可以打开调试工具
实际上这个命令没有提示, 调用了却能生效... 很奇怪, 但打开了
然后马上发现 className 正常, 是颜色配置, 默认颜色就是灰色
感觉就是一个大坑... 于是想办法载入 CSS 控制颜色
LightTable 提供了方便的加载 CSS 文件的方案, 于是就搞定了
https://github.com/Cirru/lt-cirru

Atom

然后我也想调 Atom 里的颜色, 但是翻了官方的几个插件都没有用颜色
文档上说的是 styles 文件会被自动读取, 但写上去并不生效
Atom 基于 Electron, 轻松就打开了调试工具, className 对应样式没有
偶然看下了 header, 注意到对应的 LESS 文件是加载的呀, 很奇怪
后来才反应过来, Shadow DOM 的影响, 全局的样式文件不能穿透

我搜了挺久没找到办法, 后来想去看别人的包怎么做的, 查了半天
然后看 linter 插件源码, 发现它的 LESS 文件把标记加载中间的
比如 cirru.less 文件看硬生生写成 cirru.atom-text-editor.less,
使得样式在语法高亮的区域内生效, 对应 context 叫 atom-text-editor
我改了文件名, 很快就搞定了...

感想

开发时我用的 Sublime Text, 性能比 DOM 确实高挺多
做前端时很少想到 IDE, 毕竟前端的生态就那样, 大部分都手动搭
有个 Webpack 自动替换代码, 有 Workspace 直播 CSS, 已经很好
但是 Clojure 这样稳定的开发环境, 经常会选中一段代码, 直接执行
因为服务端会跑个 REPL server, 通过 TCP 发送去执行就好了
我看到网上演示 Emacs, 选中代码, 发送执行, 飞快
当前的 Smalltalk 就是这么做的, JavaScript 在 DevTools 里有类似功能

LightTable 选择用 Webkit 做, 也是冲着 DOM 惊人的可操作性
用前端技术做的编辑器, 随便能调 CSS, 随便能加 JavaScript 插件
Sublime Text 由于是 C++, Python 的栈, 对于前端开发者并不方便
特别是, 直接能用 Element 工具查看正在编辑的代码的 DOM 结构
从前想都不敢想, 现在, 用前端技术调样式, 改脚本, 动态执行, 都能做了
甚至有 Betwixt 这样的工具, 用 Chrome DevTools 分析系统网络

不过 LightTable 想法虽好, 市场的反响并不客观
作者去做新的研究了, 编辑器本身的更新最近也看不到亮点
反而是 Atom, 质量不断在改进, 社区也正在做大, 细节也做得不错
另外的 Brackets 我没关注了, 回想这些事情觉得前端挺得宠的
为了往后开发环境的方便, 我很可能需要转向 Atom 并且写插件
当我见识到换一种方式能省掉好多步骤, 这事情挺感慨的