'Auto imports are always absolute from the src folder in a ReactJS project in WebStorm

  • I recently added TypeScript support to a Webpack ReactJS project.
  • Furthermore, I added some import alias abilities to be able to make some imports absolute from the src folder to avoid long relative imports.

Ever since the TS configuration, I have this issue where imports are always absolute from the source folder.

Here is an example:

I have a folder with components A.tsx and B.tsx. When I auto-import component B into component A, I expect the import to be as followed:

import B from './B';

The problem that I have is that WebStorm auto imports it as followed:

import B from 'app/components/subfolder/B';

Screenshots for my tsconfig.json and webpack configurations:

tsconfig.json

webpack configuration

I looked at this resource link and still was not able to change the auto-import back to relative. Configuring the Style of Imports in JavaScript and TypeScript

How can I change the auto-import back to its default behavior?

When the project is run with VS Code I don't have this issue as I can explicitly specify the Import Module Specifier to be the "shortest".

reactjstypescriptwebpackwebstormtsconfiggoidesyntax-highlightingjetbrains-idegoland


Solution 1:[1]

In Visual Studio Code, menu File ? Preferences ? Settings ? User Settings,

"typescript.preferences.importModuleSpecifier": "relative"

Solution 2:[2]

This does not seem possible with Goland, of VsCode Go (which has the same behavior)

Considering an unused variable is an error for Go itself, the IDE simply reflects that.

It can be jarring though, and other Goland issues reflect this: for example, GO-2374 mentions the same kind of issue with exported functions:

All exported functions (starting with a capital letter) that are not used within a library itself, are marked as unused.
This seems odd to me. Most exported functions in a library are never used within the library itself, but I think it is wrong to mark them as unused since they are not primarily meant to be used within the library.

I still prefer the current highlight, as it makes sure I do not introduce a new variable without using as soon as possible.

Solution 3:[3]

Perhaps if you have that new var, do a _ = yourVar after that. (Then it is in use) Warning: scan for "_ =" afterwards yourself to see if you still have these.

The fact that the editor "complains" is just Go. Go doesn't allow you to declare vars that are not in use.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 NizTheDev Centrox
Solution 2 VonC
Solution 3 Marcelloh

Related Questions