为何仅部分文件中测试运行器图标显示错位？

我遇到一个特殊问题：测试启停图标会根据文件创建时间发生错位：

如上例所示，example.spec.ts中的图标显示在正确行，但test.spec.ts中，每出现一行// step:，图标就会错位一行。

// step:来自playwright-magic-steps包，该包可让我们更简洁地编写Playwright测试步骤，是团队所需工具。显然问题与该包相关，但我无法确定具体原因。

场景A #

• 克隆演示仓库：git clone https://github.com/jondam93/playwright-magic-steps
• 执行npm install
• 在.vscode/settings.json中添加以下配置：

"playwright.env": {
    "NODE_OPTIONS": "-r playwright-magic-steps"
  }

• 查看example.spec.ts及其他所有.spec.ts文件，会发现图标显示错位：
  

场景B #

• 在空白文件夹中安装Playwright和playwright-magic-steps：
  • npm init playwright@latest
  • npm install -D playwright-magic-steps
• 在生成的example.spec.ts中，将注释改为// step:：

import { test, expect } from "@playwright/test";

test("has title", async ({ page }) => {
  await page.goto("https://playwright.dev/");

  // step: test1
  await expect(page).toHaveTitle(/Playwright/);
});

test("get started link", async ({ page }) => {
  await page.goto("https://playwright.dev/");

  // step: step 2
  await page.getByRole("link", { name: "Get started" }).click();

  // step: step 3
  await expect(
    page.getByRole("heading", { name: "Installation" })
  ).toBeVisible();
});

• 在.vscode/settings.json中添加以下配置：

"playwright.env": {
    "NODE_OPTIONS": "-r playwright-magic-steps"
  }

• 查看example.spec.ts，图标显示在正确行：
  
• 新建文件test.spec.ts并复制example.spec.ts的代码，此时图标显示错位：
  

内容的提问来源于stack exchange，提问作者Joccahontas