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
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

Please sign in to leave a comment.