How to import from index when using 'Use paths relative to tsconfig.json'?

Hello. I have a question regarding WebStorm's imports auto code generation. Imagine I am currently located in src/components/file1.ts, and I want to import something from src/components/file2.ts and something from src/utils/file3.ts. Is it possible to configure WebStorm, so it would suggest to use './file1' and src/utils/file3?

I set the ‘Use paths relative to tsconfig.json’ option to be true, so every import now is started from src/ prefix. Even those that are located in the same directory. 

Here's a real example. WebStorm can suggest to make a relative import. On the screenshot, at the bottom, as a list of additional options, it suggests to add import from "./Employee". However, auto import on code completion always generates import from "src/components/Employee".

Is it possible to set up WebStorm's auto imports to work the described way? Maybe not with using the ‘Use paths relative to tsconfig.json’ option, I am open to any suggestion.

0
2 comments

With the Use paths relative to tsconfig.json option enabled, all imports are generated with paths relative to the base URL specified in the tsconfig.json, there is no way to set up the IDE to use the paths relative to current file.

If you have any path mappings set up in the tsconfig.json, you can use the Use path mappings from tsconfig.json option with Only in files outside specified paths - with this option, WebStorm uses relative paths when generating imports between the files for which the same path mapping is defined. In all other files the path mapping will be used.

0

Oh, I see. Thank you for your response. 

If someone else struggles with such a problem, in my particular case this configuration worked as I initially planned:

tsconfig.json:

{
  "compilerOptions": {
    "rootDir": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}

 

1

Please sign in to leave a comment.