记一次在 VSCode 中解决「扩展 ESLint 无法格式化 *.ts」问题的过程

最近在带队写一个前端项目。为了统一项目组的规范，我用了 VSCode + ESLint 插件来自动格式化代码，但是，当我试图用 ESLint 来格式化 TypeScript 代码时，产生了十分诡异的错误：

错误截图

安装了中文语言包之后错误如下：

中文错误截图

VSCode 提示「扩展 ESLint 无法格式化 *.ts」，而我所要格式化的仅仅就是一段 Hello World 代码而已，这让我一下子就踏上了折腾之旅。事实证明，世界上最可怕的事情不是 bug，而是出了 bug 却找不到日志。ESLint 输出的日志一片空白，仿佛完全没有任何错误发生一样：

ESLint 日志截图

当时我在网上搜索了很长时间，我点开了官方的 issue，把整个讨论串从头到尾看了一遍，发现尽管遇到这个错误的人十分多，但是作者根本无法复现，几乎每一个提出这个问题的 issue 都是被 bot 自动关闭的。

不过，issue 里的插件作者说的一段话倒是引起了我的注意：

@dbaeumer：请问你能把 tracing 打开吗？设置 "eslint.trace.server": "verbose" 就能打开 trace 了。

噢，原来是日志级别不够高啊。我打开了 trace 日志，果然发现了如下一段奇怪的内容：

[Info  - 下午10:17:00] ESLint library loaded from: D:\code\web\***\node_modules\eslint\lib\api.js
[Trace - 下午10:17:01] Received request 'eslint/probeFailed - (4)'.
Params: {
    "textDocument": {
        "uri": "file:///d%3A/code/web/***/src/backend/index.ts"
    }
}


[Trace - 下午10:17:01] Sending notification 'textDocument/didClose'.
Params: {
    "textDocument": {
        "uri": "file:///d%3A/code/web/***/src/backend/index.ts"
    }
}


[Trace - 下午10:17:01] Sending response 'eslint/probeFailed - (4)'. Processing request took 0ms
No result returned.

这下好办了，我们可以从 trace 日志中大概推断出，index.ts 格式化不成功的原因是因为“probe failed”。这个 probe 过程是怎么回事呢？在扩展的 README 上，我搜到了如下内容：

ESLint GitHub 仓库界面文档

虽然我们没有阅读源码，但是从这里已经可以大概推断出插件运行的流程：

1. probing。当用户打开 JavaScript 等语言的代码时，ESLint 就要开始工作。但是，作者可能认为 VSCode 本身判断代码语言的能力不够精准，因此自己实现了一套探针逻辑，来判断代码是不是该语言的代码；
2. validating。如果 probing 过程成功，那么就调用 eslint 库来对代码进行验证。

为了防止 probing 阶段出错，官方也提供了 eslint.validate 设置，用于强行绕过 probing 阶段，对指定的语言直接进行 validating 操作。于是，我们在 VSCode 中加入如下设置，强制要求插件跳过 TypeScript 的探针阶段：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown"
  ],

保存，再随便打开一个 .ts 文件，问题就解决了，比我想象的还要顺利。显然，探针失效的问题是一个 bug，这个问题我暂时没有时间研究，已经向作者提出了 issue：vscode-eslint/issues/1168，目前正在收集信息阶段，希望能尽快找出复现问题的方法。

从此，我们也能得到一些解决问题的经验：

• 一定要看日志，特别是要看最详细的日志。
• 出现问题没必要一开始就看源代码，可以先看文档，说不定就能节约不少的时间。