vue + deno + vscode => How to integrate them for comfort development?

Question

How correctly configure vscode for vue project using deno?

---

Important spoiler - problems are related only to highlighting in vscode, because builds, dev, scripts... all these stuff is worked!

---

Deno + Vue is very attractive option! You can write api and ui aka in monorepository and share for example models, types or validators among them... etc.

My problem exploring notes:

1. as I already mentioned early - only highlighting in vscode is the target of this article

2. I think that *.vue files in vscode are supported with volar extension, so it expect typescript lsp, not deno's one - and this is main problem

3. so if we use deno's lsp it don't understand SingleFileComponent syntax

I try to make independent configurations both for typescript and deno, sync their aliases, imports, node_modules etc. It works! But it is not pretty enough and I hope more powerful and standard solutions are exists.

Answer 1

my standard part of solution:

• vite.config.mts with all npm:* imports
• deno.json with aliases in imports to be more closely to original npm names

---

and additionaly strange part:

• .vscode/settings.json enable deno only for api
• tsconfig.json types if this project was standard vue-vite-node-vscode...
• also create dev-hack folder with package.json and import all modules with npm
• and add to tsconfig.json (compilerOptions.typeRoots[) path to dev-hack/node_modules

---

So except api (if such exists) all files are served in vscode by typescript using tsconfig.json that use dev-hack/node_modules (of course node_modules in .gitignore)... And this is only for highlighting!

The real build/serve/dev... are worked as expected without typescript configured as explained above but only with deno+vite as written in docs.