title: How to lint the right filetype for import in WebStorm?
body: <p>After installing WebStorm and opening up a existing Vue/TypeScript project with it, I noticed that some file imports haven't been imported and linted correctly by the IDE (but they do via ESLint/webpack)</p>
  <p>I use Vue 2.x with composition API and singlefile components.
  Under <code>&lt;script lang=&quot;ts&quot;&gt;</code> I import my files with explicit file extensions except for <code>.ts</code> files, which I can import without writing the file extension.</p>
  <p>In this project, there is a recurring caseof of a <code>.vue</code> and a <code>.ts</code> file sharing the same name in the same folder, in this Example <code>App.vue</code> and <code>App.ts</code>.</p>
  <p>When in <code>App.vue</code> I import <code>App.ts</code> like this:</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
  import { someFunction } from './App';
  
  // export defineComponent({
  //  ...
  </code></pre>
  <p>the IDE shows the exported member in red with a tool tip saying <code>Element not exported</code>.
  The filepath cannot be resolved and I cannot jump to it via <kbd>Command + Click</kbd> or see types of exported members.</p>
  <p>It works again after adding <code>.ts</code> extension, but then ESLint/webpack complains. The project works fine so far, it's just WebStorm that seems to have problems resolving the path.</p>
  <p>Tried different settings in &quot;Code Style | TypeScript&quot; and googling for a couple hours but couldn't solve it/find anything.</p>
  <p>It's my first day trying out WebStorm and I like it so far, but I cannot overcome this issue.</p>
  <p>Help is much appreciated</p>