写在前面：本文包含的代码：main.zip
如果你问春节期间谁最火，哪吒2和Deepseek不分伯仲，以后有机会蹭哪吒2，今天我们先蹭一下Deepseek。

其实，Deepseek还没有这么火的时候，我就已经开始使用他家的API了，最初是在Obsidian里嵌入了Deepseek，作为AI辅助工具，让它帮我整理和检索笔记，用得不亦乐乎，然后我给身边很多人安利了他家的模型，当然了，它的爆火跟我的安利不能说一点关系没有，至少没有一点关系😊。

看着以前自己的“暗恋对象”火出圈变成了“大众情人”，这种心情还是蛮复杂的，一方面说明自己眼光不错，值得开心；但另一方面也着实增添了很多使用中的烦恼——最近就频频遇到服务器超时的问题——这是另外的话题，我们先按下不表，今天以一个具体的例子来分享一下如何使用Deepseek这样的AI工具辅助解决代码中的问题。

叠甲：

我对JS以及Web不是懂一点，是一点都不懂，所以我的解决方案很可能看起来很傻很笨，大家轻喷，这里只是分享一种在遇到我们不熟悉的问题时如何借助AI工具来分析和解决的思路，供大家参考；
多少有点标题党了，是否使用Deepseek在本问题中并不是关键，可能其他模型也可以达到相同的目的，但是我个人使用下来，Deepseek几乎是效果最好的。

问题是什么？

Obsidian的编辑器宽度在不使用插件或者CSS片段的情况下只有两种格式，最窄或者最宽（通过关闭setting->Editor->Readable line length来实现），可以用但是不够美观，这种遗憾正中完美主义者的七寸，让我很难受:

我想要一种解决方案：

可以灵活调整编辑器的宽度；
最好每一个笔记可以配置不同的宽度；

打瞌睡的时候递枕头，确实有一款插件可以满足我的需求：MugishoMp/obsidian-editor-width-slider: With this plugin you can set the line width of the editor in obsidian.
下面是其支持的功能：

Features
Adjust the line width of the editor using a slider in the status bar.
Increase or decrease the line width to customize your editing experience.
Simple and intuitive interface for easy usage.
Feature: Custom for Individual Files using YAML
With the Obsidian Line Width Slider Plugin, you can now customize the editor width for individual files by specifying an "editor-width" field in the YAML frontmatter of your notes. This feature allows you to have different line widths for different files, giving you greater flexibility in your note-taking and editing experience.
Setting the Editor Width
To set a custom editor width for a specific file, follow these steps:
Open the note for which you want to customize the editor width.
In the YAML frontmatter section at the top of the note, add an "editor-width" field. The value of this field should be a number between 0 and 100, representing the desired editor width as a percentage of the viewport width. For example:
---
title: My Customized Note
editor-width: 75
---

从描述来看，该插件完美契合我的需求，但是在使用的过程中遇到了两个问题：

在Minimal主题下，该插件不工作；
无法为不同的笔记配置不同的宽度（Obsidian版本, v1.8.4），这个问题跟主题无关，我试过Minimum，Default以及Primary，都有问题。

是否是已知问题？

经过简单的搜索，

上述问题1是已知问题，解决办法可参考：Does not work with the "Minimal" theme · Issue #6 · MugishoMp/obsidian-editor-width-slider
问题2也有人遇到了，但是目前没有解决办法：editor-width not working? · Issue #19 · MugishoMp/obsidian-editor-width-slider，当然，也许问题的提问者已经有解决办法，只是没有更新。

OK，针对第二个问题，动手吧！

调查过程

Code分析及日志追踪

通过在该插件的main.js文件中搜索YAML，找到了如下函数：

updateEditorStyleYAML() {
    console.log("1.1");
    const file = this.app.workspace.getActiveFile();
    console.log("1.2");
    if (file.name) {
      const metadata = app.metadataCache.getFileCache(file);
      if (metadata) {
        if (metadata.frontmatter) {
          try {
            if (metadata.frontmatter["editor-width"]) {
              if (this.validateString(metadata.frontmatter["editor-width"])) {
                this.updateEditorStyleYAMLHelper(metadata.frontmatter["editor-width"]);
              } else {
                new WarningModal(this.app).open();
                throw new Error("Editor width must be a number from 0 to 100.");
              }
            } else {
              this.updateEditorStyle();
            }
          } catch (e) {
            console.error("Error:", e.message);
          }
        } else {
          this.updateEditorStyle();
        }
      }
    }
  }

虽然不懂JS，但是大概猜测，这个函数就是用来根据YAML里的值渲染编辑器宽度的，查看他的调用者：

// most important function, this gets executed everytime the plugin is first 
  // loaded, e.g. when obsidian starts, or when the user just installed the 
  // plugin
async onload() {
    await this.loadSettings();
    this.addStyle();
    this.app.workspace.on("file-open", () => {
      this.updateEditorStyleYAML();
    });
    this.createSlider();
    this.addSettingTab(new EditorWidthSliderSettingTab(this.app, this));
  }

根据注释，这个函数在插件第一次被启用时会被调用，可以看到，里面注册了一个“file-open”类型的事件，猜测作者期望文件被打开时自动触发调用updateEditorStyleYAML()。

然后我在updateEditorStyleYAML()这个函数的关键节点增加了一些控制台日志，在Obsidian的debug模式下观察是否一个笔记被打开时，是否有日志输出，发现并没有，说明注册“file-open”事件时并没有起作用。

问Deepseek

文章写了半天，该Deepseek上场了，再不上场真是标题党了。
通过询问Deepseek，它给出了如何在文件被打开时调用插件的解决方案，通过注册layoutChange或者layoutReady事件来实现：

我采用的是layoutChange的方法，在onload函数里添加了如下代码：

this.registerEvent(
      this.app.workspace.on('layout-change', () => {
          const activeFile = this.app.workspace.getActiveFile();
          if (activeFile) {
              this.updateEditorStyleYAML();
          }
      })
    );

经过测试，好使！😀

个人猜测是因为新版的Obsidian去掉了对于file-open类型事件的支持导致插件不再work。

继续优化

除了文件被打开时使用YAML渲染，我还希望优化两点：

当YAML的editor-width被修改时，实时渲染；
当一个笔记的YAML里已经定义了editor-width时，调节slider不对该文件起作用。

类似的，Deepseek给出了它的建议：

照葫芦画瓢，我在onload函数里添加了如下代码:

this.registerEvent(
      this.app.metadataCache.on("changed", (file) => {
          const metadata = this.app.metadataCache.getFileCache(file)?.frontmatter;
          if (metadata) {
              console.log("mingw, Metadata is changed:", metadata);
              this.updateEditorStyleYAML();
          }
      })
    );

效果不错，如下：

如果我们把YAML里的editor-width去掉，效果如下：

修改后的main.js：main.zip

尝试让AI直接编辑代码

必须承认，上面的方式还是太初级了，不够暴力，如果能够让AI直接解bug并且修改代码，才算得上真正的智能，于是我尝试了一下在Visual Studio Code里让Deepseek直接修改。

AI确实能够直接修改代码，但是也许是因为我的提示词不够准确，它修改的方向似乎并不正确，使用了AI修改的文件并没有解决问题。
因为原始问题已经解决，所以我没有花太多的时间去修正我的提示词，可能需要一个迭代的过程才能让AI真正解决问题，后续如果有结果我会更新给大家，欢迎关注。

文章版本

2025-02-11: 第一版。

最后

🤝如需转载，请注明出处和原始链接
😄欢迎关注我的公众号:
🍅如果您觉得有帮助，欢迎点击下方的“打赏”请作者喝西红柿汤。

如何利用Deepseek解决Obsidian插件代码问题

问题是什么？

Features

Feature: Custom for Individual Files using YAML

Setting the Editor Width