Upon installation of WebStorm, I encountered an issue when opening an existing Vue/TypeScript project. The IDE was not correctly importing and linting some file imports that were functioning properly through ESLint/webpack.
In my usage of Vue 2.x with composition API and single-file components, I typically import files under
<script lang="ts">.ts files, which do not require the extension to be specified.
This particular project presented a recurring scenario where both a .vue and a .ts file shared the same name within the same folder - for example: App.vue and App.ts.
While working in App.vue, I attempted to import App.ts as follows:
<script lang="ts">
import { someFunction } from './App';
// export defineComponent({
// ...
The IDE highlighted the exported member in red with a tooltip indicating "Element not exported". The file path couldn't be resolved, preventing me from using functionalities like Command + Click or viewing types of exported members.
Addition of the .ts extension resolved this issue, but then ESLint/webpack started throwing errors. Despite this problem, the project continued to function correctly, highlighting an unresolved path resolution specifically within WebStorm.
I experimented with various settings in "Code Style | TypeScript" and spent several hours searching online for solutions, yet the issue persisted.
Although my initial experience with WebStorm has been positive, I'm currently unable to surmount this obstacle.
Your assistance would be greatly appreciated