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?
Please sign in to leave a comment.
(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....
You can use Ctrl+Space to get the path auto-generated. Just enter
then put the cursor on "file" and hit Ctrl+Space twice - you will get
> 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
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.
Ah, OK, twice -- Works great!
I missed "twice" the first read through, when one is multitasking one can miss details... -- Thanks
TIL, at least in TypeScript, go to Code Style > TypeScript > Impotts > un-check "Use paths relative to tsconfig.json"
solved the issue for me.
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?
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.
Further notes:
maybe these have some other solutions?
That’s cool, is there something similar available for e. g. scss @import?
VS has it really easy, just drag and drop, or navigate the path while typing. I’m not a fan of VS but this part they did right.
Was wondering if IntelliJS based editors have anything remotely close to that... would avoid writing some wild shell scripts in order to calculate relative paths :-) cheers