Getting better at finding usages

You can try using regexp for searching

I think the fact that I'm importing components into a components/lib file, export them from there again, and then import from that lib, might be the reason I'm not seeing usages with cmd+B or alt+F7.

But also from inside the lib, I'm not getting usages.

Take this Animate component, which is used all over my code base:

or from inside one of the files that use it:

sorry, but I can hardly help unless you provide a sample project the issue can be repeated with :(

regarding reg-ex, I found this:

\b(import|Row)\b

but that shows either one of those words, not occurrences where both are found

@Johannes1 Hoerteis

regarding reg-ex, I found this:

\b(import|Row)\b

Well .. your RegEx clearly searches for "import" or "Row"

https://regex101.com/r/vv2DEA/2

RegEx:

\bimport\b.*\bRow\b

Sample string

import { Anime, Row, Content, Link } from 'somefile'

Thanks, Andriy Bazanov

Elena Pogorelova

Another thing that I observe on this project is that the cmd+Space shortcut, for showing at the spot how something is defined, only shows the import:

This is true for all components that are imported via this lib file.

So I tried importing it on its own:

It works just the same and I'm still not being shown a definition. Importing it via the third(commented) line, however, does show a definition on cmd+Space.

Also note, that for both lines I get this "Module is not installed" error.

You might also want to know, that inside the tsconfig of the client folder that takes care of the frontend:

I have added src to be the root, so I can import things via "components/..."

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

>Also note, that for both lines I get this "Module is not installed" error

that's the issue, the IDE can't resolve your imports and thus doesn't show usages, etc.

>I have added src to be the root, so I can import things via "components/..."

but this is a JavaScript file, not TypeScript?

I had a jsconfig before, solely for:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

and just added that to the tsconfig, once I added ts

I currently don't see anything wrong with that. A jsconfig file is just a tsconfig file with allowJs set to true (according to https://code.visualstudio.com/docs/languages/jsconfig)

What would you do to fix Webstorm not recognizing my component/ imports?

btw I have the same error in css files as well:

>A jsconfig file is just a tsconfig file with allowJs set to true (according to https://code.visualstudio.com/docs/languages/jsconfig)

yes, but the IDE doesn't use tsconfig.json for resolving paths in javascript files; it's only used for typescript files checking

I think this should be a feature, so I made a request if that’s alright: https://youtrack.jetbrains.com/issue/WEB-52647

To get your paths resolved, try marking src as Resource root (Mark directory as/Resource root) - this should help