Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(vue-ts): update note on vue type support in ts #6165

Merged
merged 2 commits into from Mar 13, 2022
Merged

docs(vue-ts): update note on vue type support in ts #6165

merged 2 commits into from Mar 13, 2022

Conversation

meadowsys
Copy link
Contributor

volar changed from using ts plugin to take over mode, as documented here: vuejs/language-tools#471

Description

updates documentation on how to get better type support for .vue files in vscode when using the vue-ts template

Additional context

volar updated their way of providing type support for vue templates to use take over mode, as documented here: vuejs/language-tools#471. they have had this since version 0.27.17, which was probably released around 3 months ago looking at the tags on their repository


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

Shinigami92
Shinigami92 previously approved these changes Dec 18, 2021
@meadowsys
Copy link
Contributor Author

updated it because there is no need to explicitly enable take over mode which simplifies it a little

Shinigami92
Shinigami92 previously approved these changes Dec 18, 2021
@Shinigami92 Shinigami92 added the documentation Improvements or additions to documentation label Dec 18, 2021
Copy link
Contributor

@ydcjeff ydcjeff left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add a link to vuejs/language-tools#471 ?

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. 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 enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
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. 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 enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette, look for `TypeScript and JavaScript Language Features`, then right click and disable for the workspace. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
Copy link
Contributor

@ydcjeff ydcjeff Dec 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To match with Volar docs

Suggested change
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette, look for `TypeScript and JavaScript Language Features`, then right click and disable for the workspace. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is clearer this way

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. 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 enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette, look for `TypeScript and JavaScript Language Features`, then right click and disable for the workspace. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
2. 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.

ydcjeff
ydcjeff previously approved these changes Dec 28, 2021
volar changed from using ts plugin to take over mode, as documented here: vuejs/language-tools#471
@patak-dev patak-dev merged commit cfc7648 into vitejs:main Mar 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants