gitbook-kit 0.0.6更新

gitbook-kit README 由于Gitbook Editor的Mac版本存在一些bug,使用起来并不方便。当单个页面长度需要滑动时,每次删除都会异常卡、慢,令人困扰。Gitbook-Kit为VSCode添加了相关功能支持。 Since there're some bugs in Gitbook Editor(Mac version), I made this extension so that I could use VSCode as the gitbook editor. 功能 Features 若存在SUMMARY.md文件,自动激活插件 文档结构树支持编辑功能,可以增加、删除、重命名节点 文档借口树的变动会自动同步到SUMMARY.md文件中 SUMMARY.md文件发上变动时,左侧文档树会同步更新 Extension will be…

VSCode中调试Jest

在vscode中进行调试配置时,需要注意一下node版本,虽然在v6.12之后已经可以使用inspect,但如果protocol设置为inspector,会发现断点无法触发。 解决方式很简单,将protocol切换为legacy,同时调整相应的端口设置即可,如下所示。 { "version": "0.2.0", "configurations": [ { "name": "Debug Jest Tests", "protocol": "legacy", "port":5858, "type": "node", "request": "launch&…

VSCode扩展编写总结(三)目录解析

扩展有一个很重要的功能,就是在将当前文档目录以树的形式显示。那么如何将SUMMARY.md中的目录信息提取出来呢? 首先要分析一下SUMMARY.md中跟目录大纲组成: ,##,###等不同级别的标题(header) *,列表前置的空格或者制表符控制层级缩进 标题可能包含列表,列表也可能包含列表,它们之间的层级关系也要在目录中体现 列表元素包含了页面跳转信息,列表的项目都会包含一个跳转uri,用正则表达式来表示,应当为 [\s\t]*\* [.+](.+)的形式 为了保存目录项目之间的包含关系,在将SUMMARY.md的内容逐行进行解析时,需要将当前元素的上级元素记录下来,在处理当前行时,需要查看前一次记录下来的元素。根据两者的类型和层级,可能出现以下几种情况: 前一个元素是header,当前行是list,则list添加到header的子元素中 前一个元素是header,当前元素是header,此时需要比较两个header的层级,又会有三种结果: 前一个header级别更高(#字符的数量更少),则后一个header应当作为前一个header的子元素 两者级别相同,则当前header应当添加到前一个header的父节点上 后一个节点级别更高,这时需要回溯前一个元素,找到其父元素为header,且级别不低于当前元素的元素,进行添加判断 前一个元素是list,当前元素是header。这种情况跟2类似,需要先进行回溯,然后仿照2的操作处理 前一个元素是list,…

VSCode扩展编写总结(二)功能实现

扩展实现 默认创建的extension中有一个hello world的简单实现。通过注册命令,在用户输入了特定指令后触发相应的操作。 我这次做的插件主要包含三个功能: markdown文件的可视化编辑功能,打开某个markdown文件,自动预览其效果,在右侧显示独立的预览窗口 显示当前文档结构树,可以通过树形栏目进行快速跳转 显示markdown代码示例 文件自动预览功能 要实现点击某个markdown文件,就能自动在右侧显示预览边栏,这个功能怎么做呢?首先需要理清楚预览的触发条件: vscode启动后,如果当前默认打开的文件是markdown文件,需要自动预览 切换当前的活动编辑窗口,如果窗口内的文件是markdown文件,需要自动预览 在Gitbook Struct中右键某一项,编辑时,打开对应的文件,并自动预览 通过查看vscode的官方说明文档,可以得知,vscode.window.activeTextEditor代表的是当前的活动文档,若为空,则代表当前没有打开的文档,否则是一个代表当前Editor的对象。 而将markdown文件在右侧进行预览,vscode已经集成了现成的complex command,只需要通过如下代码调用即可: vscode.commands.executeCommand("markdown.showPreviewToSide")) // 将当前活动窗口的内容在右侧预览 但光是执行这样的命令仍然存在问题,因为vscode有窗口分组的功能,每次调用刚才的命令,…

VSCode扩展编写总结(一)环境搭建

昨天突发奇想,写了一个VSCode的扩展(https://www.hoyt-tian.com/vscode-extension-for-gitbook/) ,作为gitbook editor的替代品,摸索过程中总结了一些经验教训,正好记录下来。 准备工作 进行VSCode扩展开发时,除了安装VSCode之外,还需要两个重要步骤:安装相关的工具集和注册Visual Studio Team Services。 注册账号 注册链接:https://www.visualstudio.com/products/visual-studio-team-services-vs , 由于工具集在执行命令时需要用到一个验证token,因此需要先进行账号注册。注册完毕后,生成身份认证的token可以参照这份说明 https://code.visualstudio.com/docs/extensions/publish-extension 工具集安装 VSCode提供了一套完整的工具集,来进行VSCode的扩展开发。主要包括两部分:扩展代码生成器和扩展发布管理器。 先通过命令cnpm install -g vsce安装命令行工具,然后通过vsce create-publisher…

VSCode Extension for Gitbook

最近在使用Gitbook Editor(Mac版本)时,发现当单篇文章内容太长需要滑动时,Gitbook Editor就会出现一个bug:只要进行了任何内容编辑,Editor都会奇慢无比,并且会将当前编辑光标位置重定位到最顶部。这个bug着实令人蛋疼,让人根本就无法好好使用。 为了方便自己使用markdown,我编写了一个VSCode的扩展。VSCode这半年用下来的感觉很不错,但目前只有预览markdown的插件,缺乏管理gitbook资源的功能,比如当前的目录结构查看就不方便。新插件被命名为gitbook-kit,包含以下几个功能: 同步的编辑、预览效果,在编写markdown的同时,就能在右侧实时看到效果 提供Gitbook Structrue窗口,方便查看当前的目录结构 提供常用的markdown示例代码查看 使用效果截图(点击查看大图) source code & issue: https://github.com/hoyt-tian/vscode-gitbook-kit VSCode Markeplace link:(搜索gitbook即可) https://marketplace.visualstudio.com/…