From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Mon, 10 Jan 2022 08:41:32 +0000 (+0800)
Subject: feat: drop .vue shim and recommend typescript vue plugin by default (#26)
X-Git-Tag: v3.0.7~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ac5d3e24ea6f257c7c9365b5925cf6a2d4d19c5c;p=thirdparty%2Fvuejs%2Fcreate-vue.git

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 3dc5b08b..806eacda 100644
--- 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 636d9c3f..11f02fe2 100644
--- 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 a4574244..9d9d1917 100644
--- 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