diff --git a/packages/create-vite/template-vue-ts/.vscode/extensions.json b/packages/create-vite/template-vue-ts/.vscode/extensions.json index a7cea0b0678120..c0a6e5a48110e4 100644 --- a/packages/create-vite/template-vue-ts/.vscode/extensions.json +++ b/packages/create-vite/template-vue-ts/.vscode/extensions.json @@ -1,3 +1,3 @@ { - "recommendations": ["Vue.volar"] + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] } diff --git a/packages/create-vite/template-vue-ts/README.md b/packages/create-vite/template-vue-ts/README.md index 30b15e215a24b7..ef72fd52424558 100644 --- a/packages/create-vite/template-vue-ts/README.md +++ b/packages/create-vite/template-vue-ts/README.md @@ -4,13 +4,15 @@ This template should help get you started developing with Vue 3 and TypeScript i ## Recommended IDE Setup -- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) +- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). ## Type Support For `.vue` Imports in TS -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps: +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. -1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled. -2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: -You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). +1. Disable the built-in TypeScript Extension + 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. diff --git a/packages/create-vite/template-vue-ts/src/App.vue b/packages/create-vite/template-vue-ts/src/App.vue index 76ebf08602f448..fb679f1d510fc0 100644 --- a/packages/create-vite/template-vue-ts/src/App.vue +++ b/packages/create-vite/template-vue-ts/src/App.vue @@ -1,6 +1,4 @@ diff --git a/packages/create-vite/template-vue-ts/src/vite-env.d.ts b/packages/create-vite/template-vue-ts/src/vite-env.d.ts index 323c78a6cd8507..11f02fe2a0061d 100644 --- a/packages/create-vite/template-vue-ts/src/vite-env.d.ts +++ b/packages/create-vite/template-vue-ts/src/vite-env.d.ts @@ -1,7 +1 @@ /// - -declare module '*.vue' { - import type { DefineComponent } from 'vue' - const component: DefineComponent<{}, {}, any> - export default component -} diff --git a/packages/create-vite/template-vue/.vscode/extensions.json b/packages/create-vite/template-vue/.vscode/extensions.json index a7cea0b0678120..c0a6e5a48110e4 100644 --- a/packages/create-vite/template-vue/.vscode/extensions.json +++ b/packages/create-vite/template-vue/.vscode/extensions.json @@ -1,3 +1,3 @@ { - "recommendations": ["Vue.volar"] + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] } diff --git a/packages/create-vite/template-vue/README.md b/packages/create-vite/template-vue/README.md index 02124a7a0a92bc..e62e093e7092d1 100644 --- a/packages/create-vite/template-vue/README.md +++ b/packages/create-vite/template-vue/README.md @@ -4,4 +4,4 @@ This template should help get you started developing with Vue 3 in Vite. The tem ## Recommended IDE Setup -- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) +- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). diff --git a/packages/create-vite/template-vue/src/App.vue b/packages/create-vite/template-vue/src/App.vue index 6febdb7581ea83..3f9b55cb79605c 100644 --- a/packages/create-vite/template-vue/src/App.vue +++ b/packages/create-vite/template-vue/src/App.vue @@ -1,6 +1,4 @@