How to fight tons of unresolved variables warning in WebStorm?

Question

I have a function that takes data from server:

function getData(data){
    console.log(data.someVar);
}

WebStorm says that someVar is an unresolved variable. How can I get rid of such warnings?

I see several options:

Suppress warnings in IDE settings;
Add a JSON source file with fields (details);
Use array-like syntax: data['some_unres_var'];

Also, WebStorm is offering me to create namespace for the "data" (add an annotation like /** @namespace data.some_unres_var*/), create such field, or rename it.

@hellboy Quick answer: right-click -> Use Javascript Library -> make sure HTML is checked. Follow this up by looking at the available javascript libraries in the project settings to get a better understanding of what's going on. — owensmartin, Aug 04 '14 at 15:30

score 133 · Accepted Answer · edited Dec 14 '21 at 20:46

133

Use JSDoc:

/**
 * @param {{some_unres_var:string}} data
 */
function getData(data){
    console.log(data.some_unres_var);
}

edited Dec 14 '21 at 20:46

Malice

3,927
1
36
52

answered Sep 16 '14 at 12:13

Andreas Berheim Brudin

2,214
1
18
13

11

For variables use this syntax `/** * @type {Object} * @property {string} sortval - value to sort by */ var a;` – Ferenc Takacs Oct 01 '15 at 12:56
5

How would you do that when the function is an anonymouns function ? as in ........ .then(function(data){ .... }) – David V. Oct 24 '16 at 12:00
2

Is there a similar method to define global variables? I'm referencing an external library in my web app, I need to use stuff such as `MediumEditor`, but intellij gives me the infamous unresolved variable warning. – borislemke Apr 09 '17 at 16:09
1

@borislemke: this answer won't work for variables that aren't parameters. The general solution is to [use @namespace](http://stackoverflow.com/questions/20835544/how-to-fight-a-lots-of-unresolved-variables-warning-in-webstorm/44093516#44093516). – Dan Dascalescu May 21 '17 at 05:30

score 59 · Answer 2 · edited Nov 06 '20 at 00:03

59

JSDoc the object. Then its members.

/**
 * @param data          Information about the object.
 * @param data.member   Information about the object's members.
 */
function getData(data){
    console.log(data.member);
}

@property for local variables (non parameters).
Tested in PyCharm. @Nicholi confirms it works in WebStorm.
The {{ member:type }} syntax Andreas suggested may conflict with Django templates.
Thanks to Jonny Buchanan's answer citing the @param wiki.

To document arrays of objects, use [] brackets as JSDoc suggests:

/**
 * @param data
 * @param data.array_member[].foo
 */

edited Nov 06 '20 at 00:03

Pang

9,564
146
81
122

answered Nov 30 '15 at 16:24

Bob Stein

16,271
10
88
101

What about variables that aren't parameters? The general solution is to [use @namespace](http://stackoverflow.com/questions/20835544/how-to-fight-a-lots-of-unresolved-variables-warning-in-webstorm/44093516#44093516). – Dan Dascalescu May 21 '17 at 05:30

score 31 · Answer 3 · answered May 21 '17 at 05:29

31

All other answers are incorrect for the general case. What if you don't get data as a parameter? You don't have JSDoc then:

function niceApiCall(parameters) {
  const result = await ...  // HTTP call to the API here
  for (const e of result.entries) {
    .. // decorate each entry in the result
  }
  return result;
}

WebStorm will warn that "result.entries" is an unresolved variable (field).

The general solution is to add an @namespace declaration:

function niceApiCall(parameters) {
  /** @namespace result.entries **/
  const result = await ...  // HTTP call to the API here
  for (const e of result.entries) {
    .. // decorate each entry in the result
  }
  return result;
}

answered May 21 '17 at 05:29

Dan Dascalescu

143,271
52
317
404

4

Thanks for this solution. I have many attributes returned from an API so using your technique I presume I would need to list the lot of them to avoid the errors I'm seeing like this: ``` /** @namespace req.headers.signaturecertchainurl **/ /** @namespace req.headers.signature **/ /** @namespace req.headers.slots **/ /** @namespace req.headers.nutrientslot **/ ``` Is there a way to create a higher level namespace (e.g. `req.headers`) and automagically assign children to it? (sorry for no formatting in comments!) – James May 24 '17 at 11:23
Is this a webstorm specific solution or an editor standard solution? That's what I'm still unsure of... – phil o.O Jul 14 '21 at 01:49
@philo.O: it's a JSDoc solution, which WebStorm parses. But using TypeScript avoids this problem altogether. – Dan Dascalescu Aug 17 '21 at 19:36
When using this solution, I am getting a `Unresolved variable or type 'entries'` message. How to fix this? – Robin Bastiaan Jul 21 '22 at 08:13

score 17 · Answer 4 · answered Aug 14 '19 at 15:13

17

Destructuring use, Luke.

function getData(data){
    const {member} = data;
    console.log(member);
}

answered Aug 14 '19 at 15:13

lazy.lizard

834
6
11

1

To help with a complication I ran into, if the variable you're destructuring has an Eslint-illegal name like `my_var`, you can rename it: `const { my_var: myVar } = data`. – Noumenon Jun 10 '21 at 01:23

score 7 · Answer 5 · edited May 16 '20 at 20:54

7

using a dummy js file with anonymous function expression returning the json literal, as written at http://devnet.jetbrains.com/message/5366907, may be a solution. I can also suggest creating a fake variable that will hold this json value, and use this var as a value of @param annotation to let WebStorm know what the actual type is. Like:

var jsontext = {"some_unres_var":"val"};
/** @param {jsontext} data */
function getData(data){
    console.log(data.some_unres_var);
}

See also http://devnet.jetbrains.com/message/5504337#5504337

edited May 16 '20 at 20:54

benomatis

5,536
7
36
59

answered Dec 30 '13 at 10:10

lena

90,154
11
145
150

2

Elena's suggestion on the JetBrains forum is a [weird solution](https://intellij-support.jetbrains.com/hc/en-us/community/posts/206349469/comments/115000258810). The general solution is to [use @namespace](http://stackoverflow.com/questions/20835544/how-to-fight-a-lots-of-unresolved-variables-warning-in-webstorm/44093516#44093516). – Dan Dascalescu May 21 '17 at 05:38

valdeci · Answer 6 · 2023-08-17T14:01:25.623

To remove the warnings on The WebStorm IDE you can simply uncheck the inspection options for:

Unresolved Javascript function
Unresolved Javascript variable

ps. this will remove the warnings on the IDE, that I don't think is the best idea, because we will lost one of the best utilities in a IDE like Webstorm, which can worsen the quality of our code.

Even so, if you want to follow in the menu: File > Settings > Editor > Inspections we can disable the Javascript warnings

Like the following picture:

score 2 · Answer 7 · answered Aug 18 '23 at 13:09

Tons of "unresolved variables" when using `"moduleResolution": "bundler"` in the `tsconfig.json`

I ran into a similar issue when porting a React app to NextJs. The fact is that modern NextJs suggests using "moduleResolution": "bundler" in the tsconfig.json configuration file, but this causes an error in the webstorm.

If you're facing a similar issue, try changing moduleResolution to node.

tsconfig.json:

{
  "compilerOptions": {
    /* ... */
    "moduleResolution": "node",
    /* ... */
  },
 /* ... */
}

How to fight tons of unresolved variables warning in WebStorm?

7 Answers7

Tons of "unresolved variables" when using `"moduleResolution": "bundler"` in the `tsconfig.json`

Linked

Related

How to fight tons of unresolved variables warning in WebStorm?

7 Answers7

Tons of "unresolved variables" when using "moduleResolution": "bundler" in the tsconfig.json

Linked

Related

Tons of "unresolved variables" when using `"moduleResolution": "bundler"` in the `tsconfig.json`