4

I have the following project structure:

  • root
    • src
      • scripts
        • main.js
        • foo.js

Inside of my main.js file, I'm importing foo.js like so:

import 'src/scripts/foo.js'

When I click on the import statement above and go to Navigate -> Declaration I get a super helpful message that says Cannot find declaration to go.

This makes it super frustrating to work with because the editor basically has no idea which files import other files. This means I can't use the helpful features of the IDE like search for references when moving a file, find usages, etc

If I change the import statement to be relative, it works altogether:

import './foo.js'

However, we are striving for absolute imports, a habit we picked up from writing python apps.

I came across Webstorm: "Cannot Resolve Directory" and that gave me the idea to mark my src directory as a Sources Root. After doing that, I could change my import statement in main.js to 

import '/scripts/foo.js' //notice the leading forward slash

Well, that's a little better because now I can at least Navigate -> Declaration but it's not ideal because now I can't mark any of the directories underneath src as a test, resource, etc.

So why is IntelliJ/webstorm making this so difficult to do?

Community
  • 1
  • 1
Scott Coates
  • 2,462
  • 5
  • 31
  • 40
  • 1
    Relative paths are the JS community's defacto standard, with your proposed format meaning find the `scripts/foo.js` inside a module named `src`. How will you reference external modules in your proposed style? To me this seems like a good example where deviating from standards is just asking for problems with minimal benefits. – loganfsmyth Jun 17 '15 at 19:16
  • This is a fair point and I guess I didn't know/consider the format I used deviated from the canonical way of import dependencies. I did some poking around on github, and you're right, most people use relative paths. I believe the answer is to move away from absolute paths. If you provide an answer below I'll accept it. – Scott Coates Jun 18 '15 at 00:29

2 Answers2

4

Because now I can't mark any of the directories underneath src as a test, resource, etc.

Yes, you can. It is not possible to mark subfolders of already marked folders in the Project View. But you can do this in Project Structure (Ctrl + Shift + Alt + S). Go to Modules, select your module and switch to the Sources tab. Now you can mark your src folder as Sources (which you already did) and mark src/test as Tests etc.

According to the Web Help, in WebStorm this setting is hidden in Settings > Directories instead of the Project Structure.

Here's another solution using only the Project View: unmark your source folder, mark your test/resource subfolders and then mark the (parent) source folder again. I'm not sure, why it doesn't work the other way around.

Darek Kay
  • 15,827
  • 7
  • 64
  • 61
  • Yeah, I've seen references to this `sources` tab, but [I think I'm missing it?](http://i.imgur.com/lRnh5hF.png) – Scott Coates Jun 18 '15 at 00:36
  • Wow, weird. I was able to get the sources tab to show up in my project structure window now. I had to basically delete my root module (Project Structure -> Modules) and re-add it. – Scott Coates Jun 20 '15 at 03:07
-2

I would very much suggest against using this style of import in JavaScript code. While potentially workable, relative paths are the defacto standard in all NodeJS code, and that has spread to essentially all JS code that uses module systems.

In current systems, any path starting with . is relative, any path starting with / is absolute, and any other path is resolved to a module. By that logic, import 'src/scripts/foo.js' would be parsed as ./scripts/foo.js relative to a dependency module called src.

Note also that the file extension is optional and commonly left off.

If you want to use this style and your module loader supports it, you are of course free to do so, but I want to stress that you are likely bringing pain upon yourself by using a non-standard approach.

loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
  • 2
    A path can be relative to `$NODE_PATH` (making the import statement portable). – jcalfee314 Sep 29 '15 at 23:44
  • @loganfsmyth I understand why you advocate against this, since when you need too many relative paths, this indicates something can be abstracted in a module. But I don't want modules because they bring unwanted complexity. Then what do I do? – froginvasion May 20 '16 at 15:05