search

vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.79k stars 390 forks source link

VSCode complains about *.vue imports across project boundaries when using project references #4711

Closed codethief closed 1 month ago

codethief commented 1 month ago

Vue - Official extension or vue-tsc version

Vue extension 2.0.28, vue-tsc 2.0.29

VSCode version

1.90.2 (VSCodium 1.90.2.24171)

Vue version

3.4.34

TypeScript version

5.4.5

System Info

No response

Steps to reproduce

Use npm create vue to set up a new Vue project. Adjust tsconfig.(app|vitest).json in such a way that their includes don't overlap (tsconfig.app.json includes only production code, tsconfig.vitest.json only test code) and so that tsconfig.vitest.json lists tsconfig.app.json in its references.

What is expected?

VSCode is able to resolve the imports correctly, recognize the type error in the file, and also provide code suggestions when using the imported type & component.

What is actually happening?

VSCode / the Vue extension complains about imports from HelloWorld.vue in HelloWorld.spec.ts and doesn't recognize a type error that I added to that file. It also doesn't provide code suggestions when using the imported type & component.

See also the screenshots I posted here.

Meanwhile, vue-tsc on the command line works fine.

Link to minimal reproduction

https://github.com/codethief/tsconfig-playground/tree/3df37ce7f2e1b90c4e7d7b948b494232b9fbfc3d/2024-07-25-vue-setup-with-project-references

Any additional comments?

This is the issue we started discussing in https://github.com/vuejs/language-tools/issues/3526#issuecomment-2258844600, just as a separate ticket.

I hope you'll allow me to mention some more anecdotal evidence, beyond the minimal reproduction:

johnsoncodehk commented 1 month ago

I haven't checked the repro case yet, but I think it's likely related to https://github.com/microsoft/TypeScript/issues/57632.

davidmatter commented 1 month ago

Isn't this related to https://github.com/vuejs/language-tools/issues/4632?

codethief commented 1 month ago

@johnsoncodehk I'm not sure. Isn't the given issue about situations when there are tsconfigs with overlapping includes? (E.g. look at apps/web/tsconfig.app.json vs. apps/web/tsconfig.vitest.json or packages/foo-lib/tsconfig.app.json vs. packages/foo-lib/tsconfig.vitest.json in OP's example.)

In any case, in the minimal reproduction I linked 1) there are no overlapping includes and 2) VSCode shows the correct tsconfig for every file. I also have my tsconfig.app.json include *.vue files explicitly.

codethief commented 1 month ago

@davidmatter

Isn't this related to https://github.com/vuejs/language-tools/issues/4632?

I'm not sure it is. In the ticket you linked, OP's example code uses separate pnpm workspaces for their folders /app and /ui (each with its own set of tsconfig.jsons) and then they reference the ui workspace in their /app/package.json:

  "dependencies": {
    "ui":"workspace:*",

so as to make it available in their app's node_modules.

To me this sounds different from the situation in my code example: I have a single workspace and a single package.json, and my production and test code are covered by the same solution-style tsconfig.json (which references tsconfig.app.json for the production code and tsconfig.vitest.json for the test code). In particular, imports across project reference boundaries rest on TSC emitting declarations which I think(?) is different from how importing raw TS/Vue code from node_modules works.

codethief commented 1 month ago

While the changes in v2.1.2 have improved the type checks & code suggestions, VSCode still complains about the imports themselves. I have created a new ticket -> https://github.com/vuejs/language-tools/issues/4750