因为工作关系经常在台式机/笔记本,家里/单位切换来切换去,希望能够有一种不用那么费神的保持工作连贯性的方式。git 很好,但太繁琐了,下班走的时候忘记push了,到家就续不上了。当然我指的不是开发的代码,而是一些文档性的东西,譬如一些计划、一些学习心得,在网站上查东西的时候也会有一些随笔的记录什么的,因为太零碎,又随时希望能够查到,所以觉得也许云笔记是一个不错的选择。

在使用了一年左右的“xx云笔记”后,感觉自己越来越难以忍受了,首先的问题是搜索,云笔记的搜索是 word 式的,需要一个一个搜,不支持内容列表、不支持F3,对于程序员来说完全是废物。其次是我曾经在一个 .md 文件中贴了一大段的代码,结果下次打开的时候足足卡了7、8秒,上下翻页也是卡的不行。文档上说md支持很多流程图、甘特图...,结果做好的 .md 文件发到 github 上很多都显示不了,大都是自己的扩展,离开了“xx云笔记”后就是一堆谁都看不懂的东西。

那么有没有更加符合程序员需求的“云笔记”呢,因为日常开发上经常使用 vscode 做开发,vscode 无论在编辑还是搜索上,都完全符合要求。于是就考虑能否用 vscode 打造一个符合自己的“云笔记”,我们都知道 vscode 里面有大量的插件,而且可订制化非常强,那么能否把 vscode 改造成符合自己要求的“云笔记”呢,抱着这个想法开始了对 vscode 的研究工作。

云服务器的选择

如果想做到跨设备同步,一个云存储后台是必须要有的,那么第一个问题就是选择什么样的云后台服务器。这里我又回到了 git 的怀抱,毕竟 git 服务器是非常成熟的解决方案,而且 vscode 与 git 的配合是天生的。而且即使没有“云笔记”的垃圾桶功能也不怕误删除文档,git 用来干这个事完全是大才小用。

我可以选择 github 或 “码云”,反正都是免费的,完全够用了,在国内选择“码云”会比 github 快一些。如何去注册 github 或 “码云”的账户就不在这里说明了,不了解的朋友可以自行搜索。

自动化的同步

下一个问题是 git 的操作问题,git 的设计目标是为了做代码管理的,但我希望的效果是像云笔记那样的完全无感的自动化同步,如果每次都要记着 push/pull 就还不如用云笔记了。在插件仓库里面各种查找和测试,终于找到一个基本符合需要的插件 -- Auto-Git,这个插件可以定时自动从仓库里面 push/pull 数据,正是我需要的。

这个插件装完了,会在我当前的文档工程下建立一个 .autogit 目录,里面有一个 autogit.json 文件,这个文件是 Auto-Git 的配置文件,例如我的配置:

{
  "updateInterval": 1800,
  "logging": false,
  "silent": true
}
  • updateInterval
    是这个插件同步代码的时间,我设定为 1800 秒,也就是半小时,当然你可以设定的更短一些,但半小时对我来说足够了,因为我单位的电脑从来不关机,从单位到家也不止半小时。
  • logging
    指是否要在上传下载的时候生成 log,完全不需要,我只要结果,不关心过程。
  • silent
    静默模式,当然了,要不我装你干嘛。

插件装好后,你可以在下面的状态栏左侧看到类似:

Next Auto-Git in... 1265

的显示,这就是告诉你在 1265 秒后开始自动同步数据。

最后还有一个比较麻烦的问题,我只想在我的文档项目中使用 Auto-Git,不想在真正的开发项目中做这种自动化的同步,容易把其他人搞晕。这个问题的解决办法是给我的文档工程建立一个工作区,然后全局禁用 Auto-Git,然后再在这个工作区上单独开启 Auto-Git,这样就让这个插件只在这个工作区开启了。

像 github 一样显示 .md 文档

首先我的文档基本都是 .md 格式的,有时候写好的文档会上传到 github 这样的代码平台上。vscode 是自带 .md 的显示支持的(Ctrl-K V),但它默认的显示效果跟 github 上显示的 .md 的显示效果并不一样,那么有没有办法能够让我在 vscode 里面看到跟 github 上一样的显示效果呢?好在并不是只有我有这样的需求,网上已经有人做过了:

https://github.com/raycon/vscode-markdown-style

这个项目 preview 目录下的 github.css 就是我需要的。把这个文件下载回来,放到文档项目的 .vscode 目录下(为了避免干扰正常的文档文件),然后打开 .vscode 目录下的 setting.json 文件,加入:

"markdown.styles": [
    ".vscode/github.css"
]

现在再预览 .md 文件就跟在 github 上看到的一致了。

像“xx云笔记”一样编辑 md 文件

因为用了一年的“xx云笔记”,已经习惯了绿色的标题、蓝色的代码,在用 vscode 写 md 后,编辑环境的颜色就各种不习惯,本人又是轻度强迫症患者,一定要把 vscode 的编辑环境也搞得跟“xx云笔记”一样才行。
本来以为有插件能帮我搞定这个事,但测试了一圈各种插件后,发现没有符合我需要的插件,我不相信 vscode 无法搞定这个事,在网上搜到一篇《VSCode 修改编辑器配色》的文章后,才豁然开朗,原来 vscode 本身就支持订制化。

这个就不能在当前工作区的设置里面改了,必须要改全局的 setting.json,

  1. 按 Ctrl+Shift+P打开 vscode 控制台
  2. 输入 Open Settings(JSON) 打开全局的 setting.json
  3. 在后面加入:

    "editor.tokenColorCustomizations" : {
        "textMateRules" : [
            {
                "scope" : "markup.heading.markdown",
                "settings" : {
                    "foreground" : "#8bcc8b",
                }
            },
            {
                "scope" : "markup.fenced_code.block.markdown",
                "settings" : {
                    "foreground" : "#6699cc",
                }
            },
            {
                "scope" : "punctuation.definition.list.begin.markdown",
                "settings" : {
                    "foreground" : "#a0a0a0",
                }
            }
        ]
    }

    现在就能看到熟悉的绿标题,蓝代码了,如果没看到请重启 vscode。

结束语

虽然花了不少时间去研究,一旦成功了还是非常有成就感的。在这里把自己趟过的坑跟大家分享一下,希望有更多的程序员朋友能够跟我一样订制出最符合自己的“云笔记”,也希望能够跟我一起分享你的订制心得。

03-05 22:51