Anki Editor：用 VSC 直接编辑 Anki 卡片模板

语言 · 语料
,
1

作者： Pedro Bronsveld
链接：https://marketplace.visualstudio.com/items?itemName=pedro-bronsveld.anki-editor

这是一个 Visual Studio Code 扩展程序，用于通过 Anki-Connect 直接编辑 Anki 卡片模板，具有语法高亮、自动补全和其他 IntelliSense 语言功能。

alt text

要求

  • Anki 桌面应用程序

  • Anki-Connect Anki 附加组件

  • Anki Preview Reloader Anki 附加组件 - 当通过 Anki-Connect 更新卡片模板时，自动重新加载 Anki 中的预览窗口。

  • （可选）AnkiWebView Inspector - 建议使用，因为它在编辑卡片模板时完善了“前端开发设置”。

设置

  1. 将 Anki-Connect 添加到 Anki。

  2. 从 Visual Studio Code 市场安装扩展程序。

  3. 确保 Anki 正在运行。

  4. 单击 VSCode 左侧活动栏中的双星图标以打开笔记类型树视图。

  5. 在笔记类型和卡片模板树层次结构中找到要编辑的卡片模板的正面或背面。

上述步骤假设您在同一台计算机上运行 VSCode 和 Anki，并且 Anki-Connect 使用其默认端口并在 localhost 上侦听。如果您通过网络运行或修改了 Anki-Connect 配置，则可能需要更改某些扩展设置以建立 VSCode 和 Anki-Connect 之间的连接。

注意：在安装扩展程序后，您可能需要重新加载 VSCode，才能看到 .template.anki 文件的文件图标。

备份

虽然此扩展程序已经过测试，但在 Anki、VSCode 或其他依赖项更新后，其功能可能会以意外方式中断。由于 Anki Editor 会修改保存在您的 Anki 集合中的卡片模板，因此您应该在使用此附加组件或任何其他修改您的集合的附加组件之前创建您的集合的备份。

实时模板预览

当您在 Anki 的模板屏幕中编辑卡片模板时，其预览会随着您的键入而更新。但是，当通过 Anki-Connect 更新卡片模板时，此预览将不会更新。

为了解决这个问题，Anki 附加组件 Anki Preview Reloader 与 Anki Editor 一起开发。当通过 Anki-Connect 保存对模板的更改时，此附加组件将重新加载卡片模板屏幕中的预览或从卡片编辑器打开的卡片预览窗口。

独立使用

通过创建扩展名为 .template.anki 的文件，或将任何文件的语言模式设置为“Anki Template”，可以在没有 Anki-Connect 的情况下使用 Anki Editor。然后，您可以在此文件中创建您的卡片模板，并将其手动复制到 Anki。以这种方式使用扩展程序时，您仍然可以获得大多数 IntelliSense 功能，但依赖于笔记类型数据的那些功能除外。例如，字段名称的验证不可用，因为此数据必须通过 Anki-Connect 检索。

功能

  • 使用笔记类型和卡片模板的树视图加载卡片模板和样式表。像保存任何其他文件一样保存更改。

alt text

  • 在字段替换中补全字段、特殊字段和过滤器的补全。默认情况下，当光标位于替换中时，可以使用 Ctrl + Space 触发。

alt text
alt text532×663 25.9 KB

  • 检测字段替换中可能存在的语法和与模型相关的错误。

alt text
alt text1101×224 14.8 KB

alt text
alt text997×220 14.5 KB

  • 快速修复一些简单的语法错误。

alt text

  • 将鼠标悬停在特殊字段和过滤器上时，显示它们的文档。

alt text
alt text1260×590 45.6 KB

alt text
alt text882×602 28.8 KB

  • 重命名配对的条件开始/结束标签。

alt text

  • 检测嵌套条件问题。

alt text
alt text315×232 7.37 KB

  • 在卡片的样式表中编写选择器时，补全 Anki 中的一些内置 CSS 类。

alt text
alt text979×420 24.7 KB

  • 将 HTML、CSS 和 Javascript 的 IntelliSense 转发至 VSCode 的语言服务。

  • 语法高亮。

  • 当光标位于字段替换之外时，某些字段替换和条件块的代码片段。默认情况下，可以使用 Ctrl + Space 触发。

在 vscode.dev 上运行

vscode.dev 是一个完全在浏览器中运行的 Visual Studio Code 版本。Anki Editor 可以在 vscode.dev 上安装和使用，但有一些技术限制和注意事项：

只有当浏览器和 Anki 在同一台计算机上运行时，才能建立从 vscode.dev 中运行的 Anki Editor 到 Anki-Connect 的连接。这是因为 Web 浏览器设置了混合内容限制。

由于 vscode.dev 被视为试图访问您本地运行的 Anki-Connect 附加组件的外部网站，Anki-Connect 将显示一个弹出窗口，要求您允许来自 vscode.dev 的跨域请求。

alt text
alt text704×202 9.02 KB

单击“是”，Anki Editor 扩展程序的服务来源将添加到 Anki-Connect 配置中的 “webCorsOriginList” 属性。不幸的是，由于 vscode.dev 从 cdn 加载其内容，每次在 vscode.dev 上加载 Anki Editor 时，都会向 Anki Connect 发送不同的 *.vscode-cdn.net 来源。因此，Anki-Connect 配置中允许的 CORS 来源列表会在每次在 vscode.dev 上加载扩展程序时增长。

alt text
alt text892×317 13.6 KB

可以通过将允许的来源设置为 “*” 来防止此行为。但是，不建议这样做，因为它允许任何网站与 Anki-Connect 交互而无需请求许可。

  `{     // ...     "webCorsOriginList": [         "*"     ] }`

content_copy download

Use code with caution.Json

在 vscode.dev 上使用 Anki Editor 时，所有内容仍在 Anki-Connect 和 Anki Editor 之间本地传输。这意味着您的模板都不会发送到 vscode.dev 或其他在线服务。

扩展设置

  • anki-editor.origin: Anki-Connect 可以访问的 URL 和端口。默认情况下，它设置为 “http://127.0.0.1:8765”，当两个应用程序在同一台计算机上运行时，这应该允许 VSCode 自动连接到 Anki。

  • anki-editor.apiKey: 可选的 API 密钥，可以在 Anki-Connect 配置中设置。如果 Anki-Connect 配置中的 “apiKey” 设置为 null，请将其留空。

  • anki-editor.invalidFieldDiagnostics: 启用或禁用模板替换中字段名称的错误检测。

  • anki-editor.missingFieldDiagnostics: 启用或禁用模板替换中缺少字段名称的错误检测。

  • anki-editor.invalidFilterDiagnostics: 启用或禁用模板替换中过滤器名称的错误检测。

  • anki-editor.customFieldNames: 添加将在模板替换中允许的额外字段名称，并将用于补全建议。当安装了添加额外特殊字段的 Anki 附加组件时，可以使用此功能。

  • anki-editor.customFilterNames: 添加将在模板替换中允许的额外过滤器名称，并将用于补全建议。当安装了添加额外过滤器的 Anki 附加组件时，可以使用此功能。自定义过滤器可以定义为字符串或对象。

例子：

  `"anki-editor.customFilterNames": [     "custom-filter1",     {         "name": "custom-filter2",         "fieldRequired": true     } ]`

content_copy download

Use code with caution.Json

  • anki-editor.checkJsLevel: 设置嵌入式 Javascript 类型错误的类型检查级别。值 “on”、“default” 和 “off” 对应于 TypeScript 编译器选项中 checkJs 属性的 true、undefined 和 false 值。

致谢

Anki Editor 的部分实现得益于以下项目：

  • Anki - 一个免费的开源程序，用于创建抽认卡。可在 apps.ankiweb.net 上获取。

  • Anki-Connect - 通过 HTTP 与 Anki 进行通信。

  • Autoanki 的 Anki-Connect 包 - Anki-Connect API 的类型包装器。

  • ts-morph 的引导包 - 允许轻松地将 Javascript 语言功能转发到 Typescript 语言服务。

  • AnkiWebView Inspector - 允许检查 Anki 呈现的 HTML，以找出应该建议哪些 CSS 类。

  • Anki Editor 图标中的星形和 VSCode 活动栏中的图标基于（但不是直接复制）Anki 徽标中的星形，该徽标由 Alex Fraser 创建。

免责声明

Anki Editor 的开发目的是与 Anki 和上面列出的相关项目一起工作。它不是由 Anki 开发人员开发的。

1 Like