From 33c381121890fa3180b9be49eedb6ffb182c4b02 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 6 Jan 2022 22:32:19 +0800 Subject: [PATCH 1/2] feat: drop .vue shim and recommend typescript vue plugin by default --- template/base/.vscode/extensions.json | 2 +- template/config/typescript/env.d.ts | 7 ------- utils/generateReadme.js | 26 ++++++++++++++++++-------- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/template/base/.vscode/extensions.json b/template/base/.vscode/extensions.json index 3dc5b08bc..806eacda6 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 636d9c3f6..11f02fe2a 100644 --- a/template/config/typescript/env.d.ts +++ b/template/config/typescript/env.d.ts @@ -1,8 +1 @@ /// - -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 a45742449..e40bf6e14 100644 --- a/utils/generateReadme.js +++ b/utils/generateReadme.js @@ -2,13 +2,23 @@ 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 TypeScipt Vue Plugin', + " 1) Run `Extensions: Show Enabled Extensions` from VScode's command palette", + ' 2) Find `TypeScript Vue Plugin (Volar)`, right click and select `Disable (Workspace)`', + '2. 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)`', + '3. Reload the VSCode window by running `Developer: Reload Window` from the command palette.', + '' +].join('\n') export default function generateReadme({ projectName, @@ -23,7 +33,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 From a03e813165f38ac19cabcf8650ea948c20a6ab88 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sun, 9 Jan 2022 16:29:49 +0800 Subject: [PATCH 2/2] docs: no need to disable typescript vue plugin manually It's a plugin for "TypeScript and JavaScript Language Features", so once the latter is disabled, it will no longer work. --- utils/generateReadme.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/utils/generateReadme.js b/utils/generateReadme.js index e40bf6e14..9d9d1917d 100644 --- a/utils/generateReadme.js +++ b/utils/generateReadme.js @@ -10,13 +10,10 @@ const sfcTypeSupportDoc = [ '', "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 TypeScipt Vue Plugin', - " 1) Run `Extensions: Show Enabled Extensions` from VScode's command palette", - ' 2) Find `TypeScript Vue Plugin (Volar)`, right click and select `Disable (Workspace)`', - '2. Disable the built-in TypeScript Extension', + '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)`', - '3. Reload the VSCode window by running `Developer: Reload Window` from the command palette.', + '2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.', '' ].join('\n')