Vue.js Single File Component Typescript Not Showing Errors
İt started some months ago with Typescript version 3.9.x. Problem is typescript is not showing any errors at the editor, it only changes color of code to white instead of underlining red.
And i couldn't find any solution. This only happens at the vue component script part.
.ts files works fine.
Please sign in to leave a comment.
Works fine for me
Is the issue specific to this
.vuefile? Do inspections work in other files? Also, is Typescript language service enabled in Preferences | Languages & Frameworks | TypeScript?Please share screenshots of:
.vuefile in Project tool window and hit F1 (or whatever shortcut is assigned to View | Quick documentation action)I have the same problem with mutliple projects. So it seems to persit even on restarts of Webstorm.
In .ts files the Typescript errors are shown by Webstorm.
In .vue Files no erros are shown. Only Import errors of packages that aren't install yet will be displayed.
We see this behavior in VueJs 2.x and in VueJs 3.x with Composition-API.
Actually the autocompletion seems to work fine, but if i ignore it and type a method call or accessing a property that does not exist, Webstorm won't complain about it. (As salih baki sayer stated the color only changes to white but no red underlining) Only the Typescript compiler does complain.
I have the same problem.
click restart typescript service will show ts error in vue single file component. but after a period of time, it failed again.
I can confirm that I have that problem as well.
When I open the same project in PhpStorm, TS errors are marked in red as expected.
>When I open the same project in PhpStorm, TS errors are marked in red as expected.
Must be a configuration issue then, PhpStorm borrows this functionality from WebStorm so they should work identically
When I do as Clloz - that is, restarting the TypeScript service, the error messages are displayed at first, but disappear again after a while. In that time I moved some files, added a dependency - nothing fancy.
Restarting the service helps, so I don't think it's a configuration issue. Also, I checked all TypeScript settings between the two programs and could not find any difference.
Confirm the problem, including a temporary workaround by Clloz
Also getting this problem, fixed by restarting the TypeScript service as per above suggestions.
Getting same error as OP and restarting the TS service fixes it. Elena Pogorelova, could you please investigate? It took about an hour of development before I started seeing the issue again, so it's not something you can repro right away... you have to actively be doing dev.
I have the same issue with Intellij and it is also temporarily fixed by restarting the service.
I am still having the same problem and it is so annoying. I am thinking it is because typescript service is stuck in a loop or something that prevents its work but i dont know any way to debug that.
For example. Look at the 'r' that is staying there and webstorm acts like it is all good.
Meanwhile terminal shows the error correctly
I'm chiming in to report the same problem. I believe the trouble started after the WebStorm 2020.2 release which contained a number of Vue related changes and features.
Since then, type checking in .vue SFC files periodically stops working. Manually restarting the TypeScript service corrects the problem, until it happens again (usually within a few minutes, but not immediately). Very annoying.
My guess would be the service is crashing, but I don't know how you can view any logging to diagnose this. In previous versions there was a TypeScript console window, but this was removed in 2020.2.
Observed in WebStorm 2021.1.1, using TypeScript 4.2.4, in a Nuxt.js project using Vue 2.6.12 with class-based components.
I can reproduce the problem as well.
Webstorm: WS-211.7628.25, JRE 11.0.11+9-b1341.60x64 JetBrains s.r.o., OS Mac OS X(x86_64) v10.15.7, screens 3584.0x2240.0; Retina
Project: https://github.com/manniL/vue-3-ws
Related Issue: https://youtrack.jetbrains.com/issue/WEB-47248
When manually restarting the TypeScript Service it works fine again for a while.
+1, same problem. Errors are not reported but the file works fine in VS Code. Restarting the language service helps temporarily. TypeScript 3.7.2, Vue 2.6.12, function component.
Same problem here... it makes webstorm + vue + typescript virtually unusable
I have the same issue using @nuxtjs/composition-api to define components
Same issue for me using vue composition-api. Are there any news on this?
A bit more info. It seems to be only not throw errors in the <template> part of the component - it'll correctly throw it in <script> section
VS Code correctly highlights the error
If you miss a strict type checking in templates like the one provided by Volar, please vote for https://youtrack.jetbrains.com/issue/WEB-54347/Use-TypeScript-language-service-in-Vue-template-expressions to raise its priority and get notified on any progress with this feature