求助:Flycheck 无法正常显示错误提示

出现的问题是前端开发中指出的,以前没注意,但一直存在。

原因是 ESLint 和 Flycheck 配合的问题,我通过配置将 Typescript 的语法检查设置为 ESLint,所有 ESLint 相关的错误信息都是可以正常提示出来的。配置如下:

;; JavaScript/TypeScript 语法检查设置
(defun my/use-eslint-from-node-modules ()
  (let* ((root (locate-dominating-file
                (or (buffer-file-name) default-directory)
                "node_modules"))
         (eslint
          (and root
               (expand-file-name "node_modules/.bin/eslint"
                                 root))))
    ;; use eslint with web-mode for jsx files
    ;; (flycheck-add-mode 'javascript-eslint 'web-mode)
    ;; (flycheck-add-mode 'javascript-eslint 'typescript-mode)
    (when (and eslint (file-executable-p eslint))
      (setq-local flycheck-javascript-eslint-executable eslint)
      (setq-local flycheck-typescript-tslint-executable eslint))))

上面这个函数是在 Flycheck 加载完成后调用一次,保证 JS/TS 都用的是 ESLint 当作语法检查器。

但 TS 自身仍然会有一些语法的校验,来保证开发的时候不会出错。下面是我用相同的代码,在 VSCode 下的截图,可以看到能够正常提示出错误信息:

同样的文件,在 Emacs 配合 Flycheck 的情况下,就不存在了:

奇妙的是 modeline 能找到文件中有两处地方存在问题,但点击没有任何反应。

CleanShot 2021-10-11 at 10.43.41@2x

所以,我的理解是:

  1. Flycheck 找到了问题,但是不属于 ESLint 所以没有显示出来;
  2. 非 ESLint 的错误只在 modeline 提示;

那么我的问题是:

  1. 能否让非 ESLint 的问题也显示在 Flycheck 的错误列表中呢?
  2. 能否让 modeline 中的信息支持点击?或者有什么命令能展示出来?

这两个问题只要能解决一个就好,不至于明明知道文件有错,但不能定位就好……

貌似是要添加什么 backend 的问题,没配过。

flycheck-verify-setup 看看结果就知道了。

可以看到 ESLint 已经启用成功了,命令的执行截图如下:

我尝试打开 typescript-tslint 这个 checker,给我报了一个错:

Error from syntax checker typescript-tslint: Wrong type argument: number-or-marker-p, nil

所以不应该是 typescript-tslint 提示的错误,仍然是 javascript-eslint 提示的。

你应该尝试enable typescript-tslint 看看是否满足你的需求。但是检查显示你并没有配置文件,所以你得试试把javascript-eslint的配置文件改成typescript-tslint的。还有问题就得具体看错误信息了。

是这样的:微软已经废弃 TSLint 了,后续所有的功能由 ESLint 接管,所以 typescript-tslint 这个 checker 永远不会启用。

eslint 检查好像不会检查类型,至少不会像 typescript 那样检查类型,忘记在哪里看到的了。

类型检查需要用 lsp 提供的功能,我的 eslint 配置

(defun creature/lsp-eslint-checker-init ()
  (when (and flycheck-mode
             (flycheck-valid-checker-p 'lsp)
             (flycheck-valid-checker-p 'javascript-eslint))
    (make-local-variable 'flycheck-checkers)
    (flycheck-add-next-checker 'lsp 'javascript-eslint)))

(with-eval-after-load 'lsp-diagnostics
  (add-hook 'lsp-diagnostics-mode-hook #'creature/lsp-eslint-checker-init))
1赞

非常感谢,完美解决 :+1: