CODEWITHSUNDEEP
typescriptvue.jswebstormjetbrains-ide
Mesuo
Mesuo

Reputation: 11

How to lint the right filetype for import in WebStorm?

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)

I use Vue 2.x with composition API and singlefile components. Under <script lang="ts"> I import my files with explicit file extensions except for .ts files, which I can import without writing the file extension.

In this project, there is a recurring caseof of a .vue and a .ts file sharing the same name in the same folder, in this Example App.vue and App.ts.

When in App.vue I import App.ts like this:

<script lang="ts">
import { someFunction } from './App';

// export defineComponent({
//  ...

the IDE shows the exported member in red with a tool tip saying Element not exported. The filepath cannot be resolved and I cannot jump to it via Command + Click or see types of exported members.

It works again after adding .ts extension, but then ESLint/webpack complains. The project works fine so far, it's just WebStorm that seems to have problems resolving the path.

Tried different settings in "Code Style | TypeScript" and googling for a couple hours but couldn't solve it/find anything.

It's my first day trying out WebStorm and I like it so far, but I cannot overcome this issue.

Help is much appreciated

Upvotes: 1

Views: 279

Answers (1)

lena
lena

Reputation: 93868

Known issue, please follow WEB-53277 for updates.

Unfortunately the only workaround for now is using different names for .ts and .vue files located in the same directory

Upvotes: 1

Related Questions