VSCode 的双链笔记环境配置

foam + markdown all in one 为核心的双链笔记

安装插件

foam.foam-vscode
yzhang.markdown all in one
telesoho.vscode-markdown-paste-image
goessner.mdmath
DavidAnson.vscode-markdownlint ( optional )
Spades.vs-picgo ( optional )

首先按照 foam 的教程创建一个工作区。注意 foam 里面推荐的 ban.spellright 建议不装，不适合中文用户。mushan.vscode-paste-image 也不装，换一个 telesoho.vscode-markdown-paste-image 个人感觉更好用。

markdown all in one - 不多介绍。
foam - 提供类似双链笔记，日记管理等更多用法
paste image - 主要功能：粘贴图片到 markdown。在 mushan.vscode-paste-image 的基础上扩展了许多功能。2024 备注：vscode 已原生支持粘贴图片，且设置路径更加方便，不再需要此插件。
mdmath - 更棒的数学支持，需关闭 markdown all in one 中原有的数学支持
markdownlint - 这个是 markdown 的语法检查，规则见 markdownlint rule ，但是里面有几条个人觉得过于严格，后面章节会介绍关闭小部分规则。
picgo - 图床，不多介绍。

插件设置

首先修改工作区的设置，打开 .vscode/settings.json，覆盖为一下内容。

{
  "editor.minimap.enabled": false,
  "editor.wrappingIndent": "indent",
  "editor.overviewRulerBorder": false,
  "editor.lineHeight": 24,
  "[markdown]": {
    "editor.quickSuggestions": true
  },
  "files.exclude": {
    "**/node_modules": true
  },
  "files.watcherExclude": {
    "**/node_modules": true
  },
  "foam.edit.linkReferenceDefinitions": "off",
  "foam.openDailyNote.directory": "journal",
  "foam.openDailyNote.titleFormat": "fullDate",
  "git.enableSmartCommit": true,
  "git.postCommitCommand": "sync",
  "markdown.preview.breaks": true,
  "markdown.styles": ["assets/css/style.css"],
  "MarkdownPaste.path": "${workspaceRoot}/attachments"
}

然后全局设置 ctrl+',' 里面打开 markdown all in one，关闭 basic math support。打开 markdownlint 中的 config 项，以下是我的配置:

{
    //
    "markdownlint.config": {
        "siblings_only": true, // heading duplication is allowed for non-sibling headings
        "MD012": false, // allow multiple consecutive blank lines
        "MD013": false, // allow Line length > 80 characters
        "MD033": {
            "allowed_elements": ["span", "div"]
        }
    },
}

markdown 样式

foam 里面附的 assets/css/style.scss 是 markdown 样式，可以自己改改。但是注意 scss 不能直接用，所以复制一份改名为 style.css，修改其内容为：

.markdown-body {
  max-width: 800px;
  font-size: 16px;
}

.markdown-body h2 {
  color: #ffb666;
}

.markdown-body h3 {
  color: #6495ed;
}

.markdown-body h4 {
  color: #ff8a9d
}

.markdown-body p {
  font-size: 16px;
  line-height: 1.9em;
  margin-bottom: 1.2em;
}

.markdown-body li {
  line-height: 1.9em;
}

input.task-list-item-checkbox {
  margin-right: 4px;
}