源头
最近切换了很多次做笔记的位置。大致可以分为三类:
- macos 备忘
- 印象笔记
- bear、UIysses
- vscode
各有优缺点,用过的都知道。最终我想基于 vscode + git 来作为日记本。vscode 提供的 markdown 的编写体验和界面都无可挑剔,缺陷也很明显:不可以像其他日记本一样同步。所以在日常的码字体验中,经常就是公司电脑编辑的,忘了 push,回去用自己电脑打开,写的东西都不在。
为了解决上面的痛点,因此有了现在这个 auto-diary 插件。
这款插件目前支持直接在 vscode 插件市场搜索安装
这款插件主要解决的就是上面所说的同步问题。主要会做下面的事情:
- 检测项目 workspace 根路径是否有 .auto-diary.json 配置文件
- 如果有配置文件,则会在第一次进入 workspace 的时候更新远端的代码仓库
- 编写文档的过程中,如果有文件保存,会自动做一次提交,然后推送到远端仓库
目前插件还有较多限制,我能想到的有以下几点:
- 面向懂 git 的程序员
- 不支持同时编辑(涉及到冲突问题),但是多机器没啥毛病
- 应该没有了吧,有待发现(提交反馈地址:)
插件编写过程记录
环境准备与开发调试方式
全局安装需要用的工具
yarn global add yo generator-code vsce复制代码
安装好之后使用 yo 生成模板工程
yo code复制代码
根据提示选择(将官网推荐的选择项扣下来,供参考):
# ? What type of extension do you want to create? New Extension (TypeScript)# ? What's the name of your extension? HelloWorld### Pressto choose default for all options below #### ? What's the identifier of your extension? helloworld# ? What's the description of your extension? LEAVE BLANK# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes# ? Setup linting using 'tslint'? Yes# ? Initialize a git repository? Yes# ? Which package manager to use? npm复制代码
其中有一点不一样,我选择使用 yarn 作为包管理器,这个根据个人喜好就行。
现在基本上模板已经建好了,进入工作目录:
cd ./helloworld复制代码
由于在建立模板工程的时候,依赖已经下载好了。
打开入口文件 extension.ts ,里面会有很多详细的注释,这里需要注意一下:
- 如果 vscode 飘红,那么有可能是 vscode.d.ts 没有正确下载,那么删除 node_modules 之后重新下载依赖试一下
- nodejs 生态的工具包,亲测是可以直接用的,像比较有名气的 shell.js 直接开箱即用
- 官方 可以好好看一下,vscode 这个包暴露了全部可以使用的接口。
接下来就是按照自己的需求编写代码了。
关于调试的部分,有个地方需要注意。默认的模板项目里面,插件的激活方式是需要在命令面板输入 hello world 指令。所以调试的时候需要每次 reload window 之后再输一个命令才能激活插件。这里可以改变一下插件的激活方式。下图是支持的激活方式列表:
我使用的是圈出的部分,表示工作目录包含特定文件就会激活插件,这和目录中的配置文件刚好是吻合的。
好了,正式调试开始。首先打开 vscode 调试面板。选中第一个,点启动。(这里默认已经熟练使用 vscode 调试功能~~)
然后会弹出一个调试用的编辑器界面(可以理解为这个编辑器中已经加入了现在正在编写的插件,其他地方和普通编辑器一样)就可以调试功能了,如果代码有更新,则只需要 reload 调试用的编辑器就可以了。
发布插件
首先,需要在微软自己的网站注册账号。考虑到这个过程我也弄了很久,我打算把步骤写清楚:
- 点击上面的链接,找到注册或者登陆的按钮(微软账号可以直接用)
- 登陆进入之后会提示增加一个组织
- 看到管理面板之后点击个人信息里面的 Security
- 创建一个 Personal Access Token(一定需要给足相应的权限,官方教程中会有一个醒目的截图的)
- 复制创建出来的 token 保存好,指不定下次还会用上,但是你下次是看不到这个 token 的。
得到 token 之后继续本地操作。
创建一个发布者(这里就要用到上面得到的token 了)
vsce create-publisher复制代码
打包插件(打一个可以本地化安装的 package 发布操作不依赖这一步)
vsce package复制代码
发布插件
vsce publish复制代码
看到成功的提示之后,就表示完成了,然后再去官方插件市场看一下吧。
后续可能需要完善的东西,文档、插件logo等等。