Skip to content

Commit 719e350

Browse files
authored
docs: update volar name and remove takeover mode related docs (#2726)
closes #2723
1 parent c7fd561 commit 719e350

File tree

1 file changed

+2
-22
lines changed

1 file changed

+2
-22
lines changed

Diff for: src/guide/typescript/overview.md

+2-22
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,12 @@ With a Vite-based setup, the dev server and the bundler are transpilation-only a
2626

2727
- [Visual Studio Code](https://code.visualstudio.com/) (VSCode) is strongly recommended for its great out-of-the-box support for TypeScript.
2828

29-
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) is the official VSCode extension that provides TypeScript support inside Vue SFCs, along with many other great features.
29+
- [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (Previously Volar) is the official VSCode extension that provides TypeScript support inside Vue SFCs, along with many other great features.
3030

3131
:::tip
32-
Volar replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
32+
Vue - Official extention replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
3333
:::
3434

35-
- [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) is also needed to get type support for `*.vue` imports in TS files.
36-
3735
- [WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue. Other JetBrains IDEs support them too, either out of the box or via [a free plugin](https://plugins.jetbrains.com/plugin/9442-vue-js). As of version 2023.2, WebStorm and the Vue Plugin come with built-in support for the Vue Language Server. You can set the Vue service to use Volar integration on all TypeScript versions, under Settings > Languages & Frameworks > TypeScript > Vue. By default, Volar will be used for TypeScript versions 5.0 and higher.
3836

3937
### Configuring `tsconfig.json` {#configuring-tsconfig-json}
@@ -55,24 +53,6 @@ See also:
5553
- [Official TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html)
5654
- [esbuild TypeScript compilation caveats](https://esbuild.github.io/content-types/#typescript-caveats)
5755

58-
### Volar Takeover Mode {#volar-takeover-mode}
59-
60-
> This section only applies for VSCode + Volar.
61-
62-
To get Vue SFCs and TypeScript working together, Volar creates a separate TS language service instance patched with Vue-specific support, and uses it in Vue SFCs. At the same time, plain TS files are still handled by VSCode's built-in TS language service, which is why we need [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to support Vue SFC imports in TS files. This default setup works, but for each project we are running two TS language service instances: one from Volar, one from VSCode's built-in service. This is a bit inefficient and can lead to performance issues in large projects.
63-
64-
Volar provides a feature called "Takeover Mode" to improve performance. In takeover mode, Volar provides support for both Vue and TS files using a single TS language service instance.
65-
66-
To enable Takeover Mode, you need to disable VSCode's built-in TS language service in **your project's workspace only** by following these steps:
67-
68-
1. In your project workspace, bring up the command palette with `Ctrl + Shift + P` (macOS: `Cmd + Shift + P`).
69-
2. Type `built` and select "Extensions: Show Built-in Extensions".
70-
3. Type `typescript` in the extension search box (do not remove `@builtin` prefix).
71-
4. Click the little gear icon of "TypeScript and JavaScript Language Features", and select "Disable (Workspace)".
72-
5. Reload the workspace. Takeover mode will be enabled when you open a Vue or TS file.
73-
74-
<img src="./images/takeover-mode.png" width="590" height="426" style="margin:0px auto;border-radius:8px">
75-
7656
### Note on Vue CLI and `ts-loader` {#note-on-vue-cli-and-ts-loader}
7757

7858
In webpack-based setups such as Vue CLI, it is common to perform type checking as part of the module transform pipeline, for example with `ts-loader`. This, however, isn't a clean solution because the type system needs knowledge of the entire module graph to perform type checks. Individual module's transform step simply is not the right place for the task. It leads to the following problems:

0 commit comments

Comments
 (0)