JavaScript: use both absolute and relative import paths

When importing JS modules, is it possible to use relative path for files in the same directory and absolute paths for all other cases? If not, are you aware of any plugin that may help? Or should I sumbit proposal to some issue tracker of yours?


Details:
Consider following project structure:

src/
    dirA/
        dirB/
            fileB.js
        fileA1.js
        fileA2.js
    dirC/
        fileC.js

where "src/" is marked as "Sources Root".
What I want to achieve are following imports inside fileA1.js:

import ... from "dirA/dirB/fileB"
import ... from "./fileA2"
import ... from "dirC/fileC"

or at least

import ... from "./dirB/fileB"
import ... from "./fileA2"
import ... from "dirC/fileC"

Available configuration
File -> Settings -> Editor -> CodeStyle -> JavaScript -> Imports -> "Use paths relative to the project, resources or sources root"
is of course not sufficient:
1) Option checked:

import ... from "dirA/dirB/fileB"
import ... from "dirA/fileA2"
import ... from "dirC/fileC"


2) Option unchecked:

import ... from "./dirB/fileB"
import ... from "./fileA2"
import ... from "../dirC/fileC"
9 comments
Comment actions Permalink

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

0
Comment actions Permalink

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.

3
Comment actions Permalink

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

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

 

-1
Comment actions Permalink

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?

0
Comment actions Permalink

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.

0
Comment actions Permalink

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?

1
Comment actions Permalink

>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

2
Comment actions Permalink

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!

 

0

Please sign in to leave a comment.