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

haoqunjiang · web-flow · commit ac5d3e24ea6f · 2022-01-10T16:41:32.000+08:00
diff --git 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
@@ -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
@@ -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
 

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "recommendations": ["johnsoncodehk.volar"]`
	`2`	`+ "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]`
`3`	`3`	`}`