Problem with imports and their settings in Websorm (TS, React)
Good afternoon. I could not find a similar question and solution. The situation is as follows.
While in the index.ts in the Home(for example) folder, I try to import some global constant from src/app/constants and generateRows from utils .
I have aliases in tsconfig:
"app/*": ["src/app/*"]
“pages/*”: ["src/app/pages/*”]
When using settings (Use path mappings from tsconfig.json: Only in files outside specified paths), my import suggestions look like this:
- (import constant) The constants folder is outside the alias prescribed in tsconfig. For this reason it uses ../.../. to access this constant. Note that there is a TS hint at the bottom which shows an acceptable import option, but this hint is not used by default for auto-import.
- (function import) The utils folder is parental, great suggestion.
2. When using settings (Use path mappings from tsconfig.json: Always), my import suggestions look like this:
- (import constant) The constant import is fine now
- (import function) After changing the settings, everything was reversed. It now uses a huge path, starting with the alias.
And, the same TS tooltip at the bottom of the popup window, shows an acceptable option.
There is no golden mean. For example VSCode works differently and offers me the same imports from TS tips.
I have a large project with many folders and subfolders and writing an alias for each folder is not the right approach. For this reason alone, I have to work in VSCode, although I really love Webstorm.
Please sign in to leave a comment.
The Use path mappings from tsconfig.json: Only in files outside specified paths should do the thing; if it doesn't work as expected, please could you share a demo project that reproduces the issue?
In the first block, described behavior with setting (Use path mappings from tsconfig.json: Only in files outside specified paths)
https://github.com/mike-minchenko/webstorm-import-behavior
Thank you!
But the IDE works as expected here: for app/common/constants, the
alias is defined, so the relative import is used with the Use path mappings from tsconfig.json: Only in files outside specified paths
Then I don't understand why it doesn't work the same way for me((
Not sure I follow you. Don't you have a relative path created on auto-import?
I have format like this.
Perhaps an odd question. But maybe there is some way to contact online (Teams, Skype, Code With Me) to try to solve this problem.
The import suggestion on the top comes from the IDE, the auto-import behaves according to Use path mappings from tsconfig.json: Only in files outside specified paths option
The suggestion in the bottom is a quick fix provided by the Typescript language service, it's not supposed to follow IDE code style settings
I then don't understand how I can configure my project (tsconfig or ...) or IDE settings to make the behavior of imports and tooltips follow the Typescript language service principle.
I'm not sure what principles are used by the tsserver here; anyway, you can use the tsserver quickfixes if you prefer the way it creates imports
I would suggest adding a new option for import as was done in VSCode (shortest)
It will be really helpful.
Please subscribe to it to make sure you are informed of any updates.
https://youtrack.jetbrains.com/issue/WEB-54271/TS-JS-Use-shortest-import-path-option.%C2%A0
2 years…. ok