JavaScript: use both absolute and relative import paths

When using webpack aliases for absolute paths, setting Use path aliases in Settings | Editor | Code Style | JavaScript | Imports to Only in files outside specified paths allows using relative paths for files within aliased paths

We have the same requirements. We prefer the relative imports when importing from the same folder and absolute imports when importing from a location outside the current folder. This matches the scenarios described in this ticket.

In my case I solved the issue by adding a jsconfig.json file with the following content

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Damianb106, Kenjiru: I have the same requirements.  Did you find a solution to your problem?  Did you file an issue on the JetBrains issue tracker that I can follow?

@Kannan did you try the solution from https://intellij-support.jetbrains.com/hc/en-us/community/posts/360008171960/comments/360001655700?

Kannan Unfortunately I haven't found any solution to this :/ Ultimately I switched to absolute paths and refactored directories structure to avoid too too much nesting and therefore too long imports.
From what I recall the solution proposed by Elena Pogorelova works only when you define alias for each top level directory and choose relative imports as a default. I might not remember it correctly so you can try it but it definitely didn't suit my needs and I didn't use it.

In our team we have the same problem with imports. We use absolute import paths by default, but we want to use relative imports when importing from the same folder, because this scenarios makes it possible to reduce import paths length.

For example, we have project structure like below

src/
    app/
        common/
            components/
                Button/
                    Button.ts
                    styles.ts

styles.ts imports in Button.ts and with default absolute imports, import path looks like this:

import styles from 'app/common/components/Button/styles';

But we want to import nesting files and folders with relative import.

It is very common case and every time we have to edit import paths manually to relative variant:

import styles from './styles';

Also we have problems, when moving some folders to new path, because WebStorm rewrites all manual relative imports after refactor.

Webpack aliases can't solve this problem completely, so can we send proposal to some issue tracker or anyone knows better decision?

>Webpack aliases can't solve this problem completely

they aren't supposed to work with Typescript, you should have used path mappings in tsconfig.json instead; I'd also suggest setting Use path mappings from tsconfig.json to Only in files outside specified paths in Settings | Editor | Code Style | TypeScript

Use path mappings from tsconfig.json to Only in files outside specified paths

Elena, this is indeed a partial solution to the problem. It have limitations, because in our project we should set aliases in 2 different places: ts.config – for correct ts compilation and webpack.config for module resolution.

But it really works and imports looks prettier than with only absolute or only relative paths. Thank you!

I returned to WebStorm after using VSCode just to see if it works better now, but sadly, no. VSCode somehow uses relative paths if something is close "even one folder up" and absolute path if it's something from totally somewhere else in the directory structure