language-tools: False positive errors at end-of-file
TS plugin cannot be used with Vue files if the project does not contain tsconfig/jsconfig, or the Vue files are not included by tsconfig/jsconfig.
Steps to reproduce
- Clone https://github.com/johnsoncodehk/volar-starter Since it is just for demonstration purposes, node_modules will not be installed.
- Delete the
tsconfig.json
file in repo - Open the repo in VSCode, and open
src/components/HelloWorld.vue
- You should see TS errors reported due to missing dependencies, as shown below:
- Close
HelloWorld.vue
, opensrc/main.ts
, then re-openHelloWorld.vue
- Errors in the image above is now displayed in the wrong location (end of file)
Exploration
@vue/typescript-plugin
calls decorateLanguageService
and decorateLanguageServiceHost
at following code to modify the original languageService
and languageServiceHost
:
https://github.com/vuejs/language-tools/blob/3efa52d3a1132c8a098bb35c7bd54b81ee93ee35/packages/typescript-plugin/index.ts#L62-L63
This works well for ConfiguredProject
. But for InferredProject
, if you open the TS file before opening the Vue file, the modification of decorateLanguageService
is no longer valid, just like the original languageService
is no longer used. Therefore the mapping behavior of decorateLanguageService
is no longer valid.
Temporary Solutions
- Create a
jsconfig.json
file in project root with empty json object content{}
- Downgrade to 1.8.27 for now
Update: If you have the “Svelte for VS Code” extension installed, disabling it may avoid this problem.
About this issue
- Original URL
- State: closed
- Created 4 months ago
- Reactions: 15
- Comments: 55 (11 by maintainers)
Commits related to this issue
- feat(vscode): report #3942 in doctor — committed to vuejs/language-tools by johnsoncodehk 4 months ago
- feat(vscode): report #3942 in doctor — committed to so1ve/language-tools by johnsoncodehk 4 months ago
- chore(deps): update all dependencies (#39) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Ag... — committed to slipmatio/toolbelt by renovate[bot] 4 months ago
- chore(deps): update all dependencies (#40) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Ag... — committed to slipmatio/ui by renovate[bot] 4 months ago
- chore(deps): update all dependencies (#54) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Ag... — committed to slipmatio/logger by renovate[bot] 4 months ago
- chore(vscode): remove #3942 check — committed to vuejs/language-tools by johnsoncodehk 3 months ago
@GCnomore From here:
This should also disable auto-updating this particular addon.
FWIW, I was having the same conflict with styled-components.vscode-styled-components. I double checked that installing it introduces “Block-scoped variable ‘__VLS_3’ used before its declaration.” and uninstalling removes the error instantly.
I also tried to migrate to 2.0 in an existing project, did all the steps mentioned in the instructions. I also do not get any typescript assistance in my templates. This results in script variables being marked as unused. Will downgrade to 1.x for now.
@johnsoncodehk Here’s the
ls
output from$HOME/.vscode/extensions
. I don’t have the time or inclination to check these 1 by 1 (nor should I have to, this should have been much more thoroughly tested before releasing…). Some of them are not active. (For instance, I have disabledvscode-typescript-vue-plugin
when trying2.x.x
etc.)After investigation from https://github.com/microsoft/TypeScript/issues/57630, this does appear to be an issue with the Svelte extension. Please make sure you have disabled the Svelte extension in Vue workspace. If you don’t have Svelte extension installed and this problem still occurs, please open a new issue and provide a reproduction.
@thany
vscode-styled-components
has been mentioned to cause conflicts, please try uninstall. Also make sure to uninstallvscode-typescript-vue-plugin
when using 2.0.x.The only solution that worked for me for now is downgrading to
1.8.27
using nuxt, now the autocomplete and suggestions does not work at all
To me,
styled-components.vscode-styled-components@v1.7.8
was the culprit. Only it coflicted withvue.volar@v2.0.5
and others were fine.@davidmatter Fair enough. For what it’s worth, though, I am contributing in the only way I have the capacity to do at the moment, which is by participating in this discussion. I don’t feel entitled to anything here but I also don’t think it’s a problem to point out that this is a pretty big bug to go unnoticed in a major release of a tool that a lot of people depend on and that (as far as I know) has no viable alternatives in the marketplace, open source or otherwise.
I take your point about the complexity of the thing, though. Maybe if I have the capacity at some point, I’ll come back and contribute more to this.
@joshuagraber this is an open source tool. You haven’t paid for it and haven’t contributed to it. Therefore, nobody here owes you anything.
Edit: Additionally, for your better understanding, language tooling and editor extensions are a massively complex thing. There are hundreds of ways how, for example, other installed extensions in other versions, hundreds of different project and typescript configurations, different operating systems, different node versions, electron versions etc. can interfere with how an extension behaves in your specific context.
In my case only the option 1 has helped. I don’t know what
styled-components
plugin is. Never installed it, so nothing to disable, but Vue extension v2.x has still stopped to work after several minutes after each restart of VS Code. Dowgrading to 1.x has helped.@thany thanks. downgrading to v1.8.27 fixed my errors
It seems that the problem is not specific to Svelte extension or
styled-components.vscode-styled-components
. As long as a runtime error occurs in a TS plugin extension you installed, tsserver will discard all changes made by TS plugins to the language service and fall back to the original language service instance. Svelte extension andstyled-components.vscode-styled-components
are two of the cases but not all.The solution is to manually find the TS plugin where the error occurred and disable the extension. You can execute the
TypeScript: Open TS Server log
command to find the relevant error log, or disable your extensions one by one. I will add some guidance in the doctor panel.If you identify an extension that is causing problems for you, please share it here.
I have this problem with Nuxt. there is a tsconfig. but for every newly created file, I get the same behaviour unless I restart vscode.
@johnsoncodehk You closed this issue, which is fine, but are we absolutely sure the problem wasn’t in this addon? The problem only occurred with a combination of this addon, and the styled-components one. Just telling people not to install the latter one, is not a solution, even if the problem is in that addon.
By closing this issue, it feels like you’re sure the problem (and solution) is in the styled-components addon. So one more time then: is some type of collaboration with them being done to get to an actual proper solution?
Wouldn’t it work if I increased the version of TypeScript I’m using? https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md#206-202437
Vue - Official @2.0.6
Doesn’t work well typescript@4.9.5
it works fine typescript@5.3.2
I would like you to check your current Typescript version.
I’m removed
vscode-styled-components
and worked, thanks!@GCnomore as show by @thany
@joshuagraber Only
Vue.volar
andVue.vscode-typescript-vue-plugin
from this list define the TypeScript Plugin, so your problem may be OS specific. (This is just speculation, I can’t confirm it without being able to reproduce it.)@thany You just need to disable
vscode-styled-components
in Vue workspaces.I have this same problem, I tried to disable my extensions and it was the same result, I even created a simple repository, without typescript and still the error appears.