[Vue TS Plugin] The tsconfig selected for root file and external file is inconsistent

[johnsoncodehk]

Acknowledgement

• I acknowledge that issues using this template may be closed without further explanation at the maintainer's discretion.

Comment

Issues: vuejs/language-tools#3951, vuejs/language-tools#1815

For the root file, tsserver selects the last matching tsconfig in the list of tsconfig references for it.
But for external files, tsserver selects the first matching tsconfig in the list of tsconfig references for it.

Steps to reproduce

1. Clone segevfiner/vite-issue-1815
2. Open the repo in VSCode, install marketplace.visualstudio.com/items?itemName=Vue.volar 2.0.4
3. Open apps/web/src/main.ts, and check the tsconfig at status bar, it's apps/web/tsconfig.app.json
   
4. Open apps/web/src/App.vue, and check the tsconfig at status bar, it's apps/web/tsconfig.vitest.json, but expected same as apps/web/src/main.ts
   

[sheetalkamat]

This is working as intended per configuration.

When we lookup apps/web/tsconfig.json: main.ts is marked as root of referenced from referenced directly but part of referenced project = { "key": "c:/temp/vite-issue-1815/apps/web/src/main.ts", "value": "c:/temp/vite-issue-1815/apps/web/tsconfig.app.json" } but not app.vue because the config file for referenced projects isnt returning the vue files.. They are part of projects as external files but not as "config" file names which results in discrepancy in how ts files are treated vs vue files.

This can be fixed by plugin by setting extraFileExtentions through ConfigureRequest : https://github.com/microsoft/TypeScript/blob/main/src/server/protocol.ts#L1496

Eg i passed this command to server before opening the file and app.vue works same as main.ts

{ "seq": 1, "type": "request",      "command": "configure", "arguments": { "extraFileExtensions": [{ "extension": ".vue", "isMixedContent": false, "scriptKind": 7 }] }}

[codethief]

@sheetalkamat Tangentially related question: Putting aside *.vue-specific peculiarities, what is the expected outcome when tsconfigs have overlapping includes (like tsconfig.app.json and tsconfig.vitest.json in OP's example)? Which tsconfig ends up being responsible for a given file? Is this documented anywhere?

Background: I have seen overlapping includes in many projects over the last years (in parts due to how create-vue sets up projects by default) and it has always seemed a bit non-deterministic to me which tsconfig ends up being used for a given file.

[sheetalkamat]

Thes first encountered tsconfig.json or first of its references will be what tsserver will pick as default configured project for "non ts files" that come from plugin and match through include pattern