一起来将vscode变成私人定制笔记本

源头

最近切换了很多次做笔记的位置。大致可以分为三类：

1. macos 备忘
2. 印象笔记
3. bear、UIysses
4. vscode

各有优缺点，用过的都知道。最终我想基于 vscode + git 来作为日记本。vscode 提供的 markdown 的编写体验和界面都无可挑剔，缺陷也很明显：不可以像其他日记本一样同步。所以在日常的码字体验中，经常就是公司电脑编辑的，忘了 push，回去用自己电脑打开，写的东西都不在。

为了解决上面的痛点，因此有了现在这个 auto-diary 插件。

这款插件目前支持直接在 vscode 插件市场搜索安装

这款插件主要解决的就是上面所说的同步问题。主要会做下面的事情：

1. 检测项目 workspace 根路径是否有 .auto-diary.json 配置文件
2. 如果有配置文件，则会在第一次进入 workspace 的时候更新远端的代码仓库
3. 编写文档的过程中，如果有文件保存，会自动做一次提交，然后推送到远端仓库

目前插件还有较多限制，我能想到的有以下几点：

1. 面向懂 git 的程序员
2. 不支持同时编辑（涉及到冲突问题），但是多机器没啥毛病
3. 应该没有了吧，有待发现（提交反馈地址：issues）

插件编写过程记录

环境准备与开发调试方式

全局安装需要用的工具

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
### Press  to 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 ，里面会有很多详细的注释，这里需要注意一下：

1. 如果 vscode 飘红，那么有可能是 vscode.d.ts 没有正确下载，那么删除 node_modules 之后重新下载依赖试一下
2. nodejs 生态的工具包，亲测是可以直接用的，像比较有名气的 shell.js 直接开箱即用
3. 官方 api 地址可以好好看一下，vscode 这个包暴露了全部可以使用的接口。

接下来就是按照自己的需求编写代码了。

关于调试的部分，有个地方需要注意。默认的模板项目里面，插件的激活方式是需要在命令面板输入 hello world 指令。所以调试的时候需要每次 reload window 之后再输一个命令才能激活插件。这里可以改变一下插件的激活方式。下图是支持的激活方式列表：

我使用的是圈出的部分，表示工作目录包含特定文件就会激活插件，这和目录中的配置文件刚好是吻合的。

好了，正式调试开始。首先打开 vscode 调试面板。选中第一个，点启动。（这里默认已经熟练使用 vscode 调试功能~~）

然后会弹出一个调试用的编辑器界面（可以理解为这个编辑器中已经加入了现在正在编写的插件，其他地方和普通编辑器一样）就可以调试功能了，如果代码有更新，则只需要 reload 调试用的编辑器就可以了。

发布插件

首先，需要在微软自己的azure devops网站注册账号。考虑到这个过程我也弄了很久，我打算把步骤写清楚：

1. 点击上面的链接，找到注册或者登陆的按钮（微软账号可以直接用）
2. 登陆进入之后会提示增加一个组织
3. 看到管理面板之后点击个人信息里面的 Security
4. 创建一个 Personal Access Token（一定需要给足相应的权限，官方教程中会有一个醒目的截图的）
5. 复制创建出来的 token 保存好，指不定下次还会用上，但是你下次是看不到这个 token 的。

得到 token 之后继续本地操作。

创建一个发布者（这里就要用到上面得到的token 了）

vsce create-publisher 
复制代码

打包插件(打一个可以本地化安装的 package 发布操作不依赖这一步)

vsce package
复制代码

发布插件

vsce publish
复制代码

看到成功的提示之后，就表示完成了，然后再去官方插件市场看一下吧。

后续可能需要完善的东西，文档、插件logo等等。

参考

• 插件地址

• 官方：编写第一个插件

• 官方：插件发布