Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit ac5d3e2

Browse files
feat: drop .vue shim and recommend typescript vue plugin by default (#26)
1 parent 8b048d1 commit ac5d3e2

File tree

3 files changed

+16
-16
lines changed

3 files changed

+16
-16
lines changed

‎template/base/.vscode/extensions.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"recommendations": ["johnsoncodehk.volar"]
2+
"recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
33
}

‎template/config/typescript/env.d.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1 @@
11
/// <reference types="vite/client" />
2-
3-
declare module '*.vue' {
4-
import { DefineComponent } from 'vue'
5-
// eslint-disable-next-line
6-
const component: DefineComponent<{}, {}, any>
7-
export default component
8-
}

‎utils/generateReadme.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@ import fs from 'fs'
22

33
import getCommand from './getCommand.js'
44

5-
const sfcTypeSupportDoc =
6-
'\n' +
7-
'## Type Support for `.vue` Imports in TS\n' +
8-
'\n' +
9-
"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" +
10-
'\n' +
11-
'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'
5+
const sfcTypeSupportDoc = [
6+
'',
7+
'## Type Support for `.vue` Imports in TS',
8+
'',
9+
'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.',
10+
'',
11+
"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:",
12+
'',
13+
'1. Disable the built-in TypeScript Extension',
14+
" 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette",
15+
' 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`',
16+
'2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.',
17+
''
18+
].join('\n')
1219

1320
export default function generateReadme({
1421
projectName,
@@ -23,7 +30,7 @@ This template should help get you started developing with Vue 3 in Vite.
2330
2431
## Recommended IDE Setup
2532
26-
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
33+
[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).
2734
${needsTypeScript ? sfcTypeSupportDoc : ''}
2835
## Customize configuration
2936

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /