How do I get the relative path from one file to another (for example, when importing another file) in WebStorm?

One problem I repeatedly find myself facing is when I want to import one file into another and there's a complicated directory structure to traverse.    It's particularly problematic when I move or duplicate files using cut-and-paste, but in general, when you're looking for something that's more-or-less 3 directories up, a directory over, four directories down, it becomes tedious to guess it out.  Sometimes 'auto import' seems to work, but often it doesn't.  

I see that I can get the relative path from the root, and I suppose I could put that in -- something like 'src/directory1/directory2/file/' -- but what I'd like is something like '../../directory2/file'.  Is this possible?

9 comments
Comment actions Permalink

(Commenting as I can't seem to edit) I see there is an answer here -- https://stackoverflow.com/questions/49241071/relative-paths-in-webstorm -- but `ctl-space` seems only to bring up a list of what mainly seems to be TypeScript definitions....

0
Comment actions Permalink

You can use Ctrl+Space to get the path auto-generated. Just enter

import {}  from "file"

then put the cursor on "file" and hit Ctrl+Space twice - you will get

import {}  from "../../directory2/file"
0
Comment actions Permalink

> but `ctl-space` seems only to bring up a list of what mainly seems to be TypeScript definitions....

works for me. Please provide screenshots that show up your issue

0
Comment actions Permalink

WebStorm has no idea what file you are going to import your module from and just shows all available files.

You need to enter file name and then hit Ctrl+Space twice to get a path to this file completed.

 

0
Comment actions Permalink

Ah, OK, twice --  Works great! 

I missed "twice" the first read through, when one is multitasking one can miss details... -- Thanks

1
Comment actions Permalink

TIL, at least in TypeScript, go to Code Style > TypeScript > Impotts > un-check "Use paths relative to tsconfig.json"

solved the issue for me.

0
Comment actions Permalink

This might work on Windows, but this, or other [modifier] + space twice, don't work on Mac. Also, the name of the command that's linked to the Windows shortcut isn't mentioned. When I search for 'path' or 'relative' in the Keymap, nothing obvious stands out. What is it, and/or the Mac shortcut please?

0
Comment actions Permalink

Oh nvm it actually works on the Mac in imports, as described (ctrl-space, twice); it just didn't work in a `jest.mock('fileName')` where I needed it. I couldn't look up the name of the command in Keymap by pressing the shortcut; when selecting "Second shortcut" and doing ctrl-space again, an empty list shows up.

The whole question came up as refactoring tools nicely take care of file paths in imports when moving files or directories, but these nasty jest "imports" just become stale.

0
Comment actions Permalink

Further notes: 

  • the hits seem to be a bit unreliable, eg. the 1st hit is to the *former* location of the file (I'm using this b/c the file is not where the link points to); there's no file there anymore
  • it expands to an absolute path, and I'd like a relative path

maybe these have some other solutions?

0

Please sign in to leave a comment.