Clever Geek Handbook

IntelliJ / Webstorm cannot find import link

I have the following project structure:

  • root
    • CAC
      • Scripts
        • main.js
        • foo.js

Inside my main.js

file, I import foo.js

like this:

import 'src/scripts/foo.js'

When I click on the import statement above and navigate to Navigate -> Declaration

, I get a super save message that says Cannot find declaration to go

.

It is confusing to work because the editor basically has no idea what files other files are importing. This means that I cannot use the useful features of the IDE like finding links when moving a file, searching, etc.

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

import './foo.js'

However, we are aiming for absolute imports, a habit we have chosen for writing python applications .

I ran into Webstorm: "Can't Resolve Directory" and it gave me an idea of mark

my directory src

as Sources Root

. After that I can change the import statement in main.js

to

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

Well, it'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 under src

as test, resource, etc.

So why is IntelliJ / webstorm so hard to do?

+3


source to share


2 answers


I'd really like to object to using this import style in JavaScript code. While potentially workable, relative paths are the defacto standard in all NodeJS code and apply to essentially all JS code that uses module systems.

On current systems, any path starting with .

is relative, any path starting with /

is absolute, and any other path is allowed to the module. By this logic, it import 'src/scripts/foo.js'

will be parsed as ./scripts/foo.js

relative to a dependency module called src

.



Note that the file extension is optional and usually disabled.

If you want to use this style, and your module loader supports it, you can of course do so, but I want to emphasize that you are probably hurting yourself using a non-standard approach.

0


source


Because now I cannot mark any of the directories under src as 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 it in a project structure ( Ctrl+ Shift+ Alt+ S). Go to Modules

, select your module and go to the tab Sources

. Now you can mark your folder src

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 Project View: remove the check mark from the source folder, mark your test / resource subdirectories and then mark the parent folder again. I'm not sure why this doesn't work the other way around.

+2


source






More articles:


All Articles