TypeScript + Vue + Astro Support on Web IDE based on Volar.js
-
VSCode's built-in TypeScript extension does not support across files type-check and IntelliSense on Web IDE (github.dev), this extension implements that.
-
Since the node_modules cannot be installed by opening the project through github.dev, type hints is almost completely lost. This extension will download the missing node_modules
.d.ts
file from CDN, and the experience is theoretically consistent with TypeScript Playground.
Try it:
- https://github.dev/johnsoncodehk/volar-starter
- https://vscode.dev/github/johnsoncodehk/volar-starter
This extension only includes IntelliSense support; you will still need to install the corresponding extensions for syntax highlighting and grammar:
- Vue: https://marketplace.visualstudio.com/items?itemName=Vue.volar
- Astro: https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode
This extension and the Built-in TypeScript Extension sometimes show duplicate results, which is not a big problem, but you still can disable the Built-in TypeScript Extension yourself if you want, please refer to https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode.
typescript-web.supportVue
: Enable Vue support for .vue (Default true)typescript-web.supportAstro
: Enable Astro support for .astro (Default true)typescript-web.dts.versions
: Specify the version of modules to download (Default{}
), example:// .vscode/settings.json { "typescript-web.dts.versions": { "vue": "3.0.11", "vue-router": "4.0.8" } }