feat: drop .vue shim and recommend typescript vue plugin by default (#26)

diff --git a/template/base/.vscode/extensions.json b/template/base/.vscode/extensions.json
index 3dc5b08bcdc96b1536eec0cff46a39d54235aa12..806eacda6197736736541ff3f0da725f96c08528 100644 (file)
--- a/template/base/.vscode/extensions.json
+++ b/template/base/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["johnsoncodehk.volar"]
+  "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
 }

diff --git a/template/config/typescript/env.d.ts b/template/config/typescript/env.d.ts
index 636d9c3f6c6ac43150a1997e54cb29d877513912..11f02fe2a0061d6e6e1f271b21da95423b448b32 100644 (file)
--- a/template/config/typescript/env.d.ts
+++ b/template/config/typescript/env.d.ts
@@ -1,8 +1 @@
 /// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

diff --git a/utils/generateReadme.js b/utils/generateReadme.js
index a45742449ba1dcb3b535fc0c5c1fd89fe15a4c81..9d9d1917d76f3ad5d93a3ac14189a6a7c5a93bd7 100644 (file)
--- a/utils/generateReadme.js
+++ b/utils/generateReadme.js
@@ -2,13 +2,20 @@ import fs from 'fs'
 
 import getCommand from './getCommand.js'
 
-const sfcTypeSupportDoc =
-  '\n' +
-  '## Type Support for `.vue` Imports in TS\n' +
-  '\n' +
-  "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.\n" +
-  '\n' +
-  '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 run `Volar: Switch TS Plugin on/off` from VSCode command palette.\n'
+const sfcTypeSupportDoc = [
+  '',
+  '## Type Support for `.vue` Imports in TS',
+  '',
+  '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=johnsoncodehk.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.',
+  '',
+  "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) that is more performant. You can enable it by the following steps:",
+  '',
+  '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.',
+  ''
+].join('\n')
 
 export default function generateReadme({
   projectName,
@@ -23,7 +30,7 @@ This template should help get you started developing with Vue 3 in Vite.
 
 ## Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
 ${needsTypeScript ? sfcTypeSupportDoc : ''}
 ## Customize configuration