Consider flipping order of tsconfig.app.json and tsconfig.vitest.json in tsconfig.json and enabling "vue.server.reverseConfigFilePriority": true

[segevfiner]

With:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

Instead of:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}

And enabling "vue.server.reverseConfigFilePriority": true, Volar and the builtin TypeScript integration of VS Code correctly select tsconfig.app.json for Vue & TS files, and tsconfig.vitest.json for test files, otherwise the order is a bit messed up and you sometimes get tsconfig.vitest.json for non-test Vue & TS files.

[haoqunjiang]

Good idea! I didn't know such an option existed.

[oliver139]

Also about the order issue, I found that revising compilerOptions.types in tsconfig.node.json has no effect, which I believe that the property is overwritten by @vue/tsconfig/tsconfig.dom.json which is extended in tsconfig.app.json

I previously tried that to change that property and it is not working until I move it from tsconfig.node.json to tsconfig.app.json

[bmulholland]

I'm trying to wrap my head around all these tsconfigs, and write some docs for the setup. Could someone help me understand why the order might matter? I'd thought it was because the settings would overwrite each other, but now I'm seeing that references should be isolated in scope, so the order shouldn't actually matter?

[segevfiner]

The vitest one also seems to include the normal sources, and the order of which one is selected for a file that is included in more than one referenced tsconfig is flipped between tsserver and vue files handled by volar. This can be observed in the VS Code status bar, whose tooltip tells you which tsconfig is being used for the current file.

[bmulholland]

@segevfiner Thank you! Folding that into my docs. But won't flipping the order affect vue-tsc, too? Why is it only Volar that needs the option changed?

[segevfiner]

vue-tsc is either using a single tsconfig.json that is passed to it on the CLI or by looking for the default tsconfig.json or uses multiple ones via project references with --build. I'm not sure how it handles overlaps in project references mode.

Volar is using the tsserver which has its own logic to figure out the right tsconfig.json based on the default tsconfig.json file name and automatically also looking into project references when they exist. It seems to resolve into a single tsconfig.json for each file which can be viewed in the VS Code status bar.