How to make PhpStorm reflect TypeScript tsconfig.json in .vue files?
I'm using Vue.js (webpack + vueify) and TypeScript. ts configuration seems to be working but only with `.ts` files.
For example in `tsconfig.json` I have
"compilerOptions": {
"strictNullChecks": false,
So `strictNullChecks` works fine in `.ts` files:
But not in `.vue`:
Error:
>Initializer type null is not assignable to variable type string
TypeScript doesn't throw compile errors, only PhpStorm seems to have problems with detecting configuration.
What do I have to do so my configuration in `tsconfig.json` reflects in `.vue` files as well?
Question was also posted on stackoverflow:
https://stackoverflow.com/questions/45558634/how-to-make-phpstorm-reflect-typescript-tsconfig-json-in-vue-files
Please sign in to leave a comment.
WebStorm own parser doesn't use your tsconfig.json for errors reporting. Setting "strictNullChecks": false only affects the TypeScript service that is used for error highlighting .ts files by default (if Use TypeScript Service is enabled in Settings | Languages & Frameworks | TypeScript)
But Typescript compiler/service doesn't currently handle .vue files (https://github.com/Microsoft/TypeScript/issues/10427), so it's only enabled for .ts files; for typescript in .vue files, WebStorm own parser is used instead
Another problem is that WebStorm behaves differently in embedded typescript - it accepts assigning null in .ts files, but not in .vue files (https://youtrack.jetbrains.com/issue/WEB-28029)
Elena Pogorelova we just noticed that "strictNullChecks" in vue templates is still not working in PHPStorm. Are there plans to implement that / add support for tsconfig in vue templates? It does work in vscode (with volar) so it would be very nice to see feature parity in PHPStorm, especially because this catches a whole category of bugs.
Please could you elaborate on this? The compiler errors are reported in .vue files, and tsconfig.json settings are respected:
Thanks for the quick reply! It works in <script>, but not in the template:
In the script, the call to foo(bar()) shows an error, in the template it doesn't. PHPStorm ignores undefined and null for the TS checks in the template. For all other types it works (e.g. if bar() would return number | string it correctly complains in the template as well):
I see, thanks for update.
What you miss is a strict type checking in templates like the one provided by Volar, right? 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