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?

5 comments

(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

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

> 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

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

Ah, OK, twice --  Works great! 

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

1

Please sign in to leave a comment.