VS Code 如何一次性发现项目中所有问题.

用户5563552954278
686 阅读2分钟

由于工作原因, 我编写代码会同时使用 WebStorm 和 VS Code . 我发现前者有一个很好用的功能: 一键查看项目中所有问题, 而且不局限于TS或者ESLint.

image.png

而 VS Code 则只能查看已打开文件的问题.

image.png

我就想有没有什么选项或者插件可以达到这个目的呢?于是在GitHub上找到了相关的FR: Feature Request: Show all errors and warnings in project for all JavaScript and TypeScript files, not just opened ones #13953, 其中提到 VS Code 仍没有相关的官方功能, 但有一些解决办法:

  • 使用内置的task功能, 写一个任务文件tasks.json, 然后执行: 
    {
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Monitor TS Errors",
      "command": "./node_modules/.bin/tsc",
      "type": "shell",
      "args": ["--watch", "-p", ".", "--noEmit"],
      "presentation": {
        "echo": true,
        "reveal": "never",
        "focus": false,
        "panel": "shared"
      },
      "showOutput": "silent",
      "isBackground": true,
      "problemMatcher": "$tsc-watch",
      "runOptions": {
        "runOn": "folderOpen"
      }
    },
  ]
}
    本质上是自动化执行指定的tsc命令, 其优点是灵活、轻量, 缺点就是只能找到TS错误, HTML和CSS等其他位置乃至其他语言的错误没有办法检查, 除非对其他语言也编写相应的task.
  • 在 VS Code 的setting.json文件中, 加入一项配置:"typescript.tsserver.experimental.enableProjectDiagnostics": true, 这样可以启动TS实验性的项目错误诊断功能. 比起第一种方法其优点是不用写复杂的任务命令, 但是同样地, 它的缺点是只能检查TS错误, 并且由于这是个实验性配置, 可能会有一些意外的问题, 比如它会无视TS配置项exclude而扫描node_module文件夹, 可以把skipLibCheck设为true来避免此行为.
  • 使用 VS Code 的Bulk Problem Diagnostics插件. 它可以逐个打开项目中的所有文件, 并关闭其中没有问题的文件. 其优点是操作简单, 一键完成, 而且可以发现 VS Code 报告的所有问题, 不局限于 TS 文件, 而缺点是占用时间比较长, 因为每检查一个文件都需要在打开后等待一段时间以供 VS Code 报告出问题, 而且这个时间是固定的(可以在扩展设置的Delay字段改变), 有可能时间结束时 VS Code 仍未报告出问题, 就会直接关闭当前文件, 导致遗漏问题.

总的来说, 上述三种方法都不够完美, 还是希望 VS Code 能推出官方的特性来满足这个需求吧.

avatar
文章
阅读
粉丝