如何使 VisualStudio 代码检查整个项目中的错误?

我正在使用 VS 代码进行 TypeScript/JavaScript 开发。当我打开一个文件时,它会检查该文件是否有错误。问题是,如果我进行重构(就像我将一些共享代码移动到一个新的位置或者更改一个名称一样) ,在我打开带有问题的文件之前,它不会向我显示由此引起的错误。... 所以如果我想做大量的重构,我必须打开每个文件,只是让它扫描文件的错误。

我怎样才能使 VS 代码扫描整个项目的错误,而不必打开每个文件一个又一个手动?

43805 次浏览

Figured it out. Note this answer is specific to TypeScript, which is what I am using. Here it is:

Make sure typescript is installed globally (I just had mine installed locally apparently): npm install -g typescript

Then in VS Code press Shift+Ctrl+B. If you don't have a task runner set up it will ask what you want. I selected typescript and the tasks.json file will look like this:

{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}

Then pressing Shift+Ctrl+B (or Shift+Command+B in macOS) will check the entire project for problems and they will be reported in your "problems" panel.

If you don't want to install TypeScript globally, you can do the following:

  1. Install TypeScript locally on the project, that is yarn add --dev typescript or npm install --save-dev typescript.

  2. Add a check-types run script to ./package.json. --noEmit means that the compiler will won't generate any JavaScript files.

{
"scripts": {
"check-types": "tsc --noEmit"
}
}
  1. Let VSCode know about the run script in /.vscode/tasks.json.
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "check-types",
"problemMatcher": [
"$tsc"
]
}
]
}
  1. To run the tasks hit the F1 key and select 'Run Task', and then 'npm: check-types'.

  2. If you add the following lines to the task, pressing Ctrl+B will run it.

    "group": { "kind": "build", "isDefault": true }

For the most recent version of tasks.json this is the correct json, following deprecations in version 1.14. Create this as /.vscode/tasks.json

{
"version": "2.0.0",
"command": "tsc",
"type": "shell",
"args": [
"-p",
"."
],
"presentation": {
"reveal": "silent"
},
"problemMatcher": "$tsc"
}

Once you have open your project in vs code, open the vs code terminal and run:

node_modules/.bin/tsc --noEmit

VS Code (v1.44) has an experimental feature, that allows project wide error reporting in TS. Try it out:

// put this line in settings.json
"typescript.tsserver.experimental.enableProjectDiagnostics": true

Edit: Since updating to 1.52.0 this no longer works. It will instead replace the current project files with what you selected...

===

I've tried every solution I can find and I think it's safe to say the answer is: You can't*

The best I've found is still technically opening each file manually, but at least it's not one-by-one:

  1. You can't drag/drop a directory but you can select multiple files (including directories) and drag/drop. The directories will be ignored and any files you had selected will be opened in tabs.
  2. Next, you need to give each tab focus so it triggers eslint to run. (Holding down the next tab keyboard shortcut works.)

This is terrible and I beg someone to prove me wrong.

*I haven't found a way that works as well as opening files manually. Each method -- experimental vscode feature and tsc task -- has its own set of drawbacks. The vscode feature is clearly the solution but without a way to ignore node_modules, etc. it's too painful to use.

UPDATE.
My answer below does not answer the original question, but if you're like me and have found this thread searching for how to turn on // @ts-check project-wide in VSCode so that you don't need to add // @ts-check to every file then my answer below is what you need. I have searched and searched and kept getting this thread as my top result so hopefully this helps others as well


I'm on vscode version 1.52.1 and the answer is so simple and right on the vscode website:

https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript

scroll down to the "Using jsconfig or tsconfig" section

Add a jsconfig.json in your project root and add "checkJs": true

{
"compilerOptions": {
"checkJs": true
},
"exclude": ["node_modules", "**/node_modules/*"]
}

You might need to restart vscode once you add it in

  1. Go to View menu > Extensions and make sure the Microsoft VS Code ESLint extension is installed.
  2. In Settings, search for "ESLint > Lint Task: Enable", and enable that setting (docs).
  3. In the Terminal menu, choose Run Task… > eslint: lint whole folder.

None of the other solutions worked fully for me. Here's a tasks.json that does, working with vscode 1.67+. On Linux etc. set command to tsc, on Windows be sure to run tsc.cmd as tsc alone will attempt to run the bash script and produce the following error:

The terminal process failed to launch: A native exception occurred during launch (Cannot create process, error code: 193)

"revealProblems": "always" in the presentation section shows the Problems panel on completion.

{
"version": "2.0.0",
"tasks": [
{
"label": "tsc: error check project",
"command": "tsc.cmd",
"args": [
"-p",
".",
"--noEmit"
],
"isBackground": false,
"problemMatcher": "$tsc",
"group": {
"kind": "build",
"isDefault": true
},
"presentation": {
"revealProblems": "always",
}
}
]
}