TypeScript + Vue (vue-cli Webpack template) - problems with Typescript syntax highlighting in .vue files
Hi,
I'm using PyCharm 2018.1.2 (professional edition, 181.4668.75) on macOS with Vue.js plugin v.181.4668.7. Creating the issue here as I've read that WebStorm is the root IDE for all things TypeScript/Vue.
I've created a new project using vue-cli and Webpack template, enabling the Typescript support (2.8.3, bundled in project's node_modules).
Next, of course, I went on to set up the project in IDE (I have previously used PyCharm to develop ReactJS + TypeScript with no problems), setting up PyCharm to use project's TypeScript and TSLint with respective configs.
The problem is that:
- Module resolution that works well in CLI dev environment breaks in PyCharm on .vue file imports. Project builds and runs well, meanwhile PyCharm outputs this:
- Legit TypeScript errors that are caught and reported by CLI aren't highlighted in PyCharm:
I've tried to tinker with limited TypeScript service's settings in Preferences and tsconfig.json, to no avail. Disabling the service solves the first problem, but that's not really the way to go.
The issue might be related to https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000800070-import-module-error-with-Vue-2-0-and-typescript , but nevertheless, I have absolutely no problems with typescript compiler/tslint outside PyCharm, so there must be something I'm missing out on regarding TypeScript IDE service setup.
请先登录再写评论。
>Module resolution that works well in CLI dev environment breaks in PyCharm on .vue file imports.
Error comes from typescript language service, not from the IDE; Vue single file components can't be compiled with TypeScript compiler - it won't load ts modules from
<script>section of.vuefile.You will see the same errors when running tsc in terminal; no issues are reported when using cli, as it uses webpack loaders that transform vue components prior to passing them to compiler.
See comments in https://github.com/vuejs/vue/issues/5298 for possible workarounds.
see also https://github.com/Microsoft/TypeScript/issues/10427, https://github.com/vuejs/vue/issues/5763.
Vue support requires creating special TypeScript language service extension; some work is done as a part of https://github.com/octref/vetur project, but it can only be used inside VSCode - there is no snandalone version that can be used in other IDEs.
So, you have to turn the service off for your project, and rely on PyCharm own error highlighting/completion (that is not always as smart as the service). Thus the next issue:
>Legit TypeScript errors that are caught and reported by CLI aren't highlighted in PyCharm
Please follow the tickets linked to https://youtrack.jetbrains.com/issue/WEB-31093 for updates
@Elena Pogorelova Thank you for clarification!
Does JetBrains have any plans to include the out-of-the-box support for TypeScript SFCs of the kind that is implemented for VSCode by Vetur?
Yes, it's a planned feature
@Elena Pogorelova Any updates?
Not yet implemented; please vote for https://youtrack.jetbrains.com/issue/WEB-33130 to be notified on any progress with it