How to fight tons of unresolved variables warning in WebStorm?

JavascriptWebstorm

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

Use JSDoc:

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

Solution 2 - Javascript

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
 */

Solution 3 - Javascript

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;
}

Solution 4 - Javascript

Destructuring use, Luke.

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

Solution 5 - Javascript

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

Solution 6 - Javascript

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:

uncheck options

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSergei PanfilovView Question on Stackoverflow
Solution 1 - JavascriptAndreas Berheim BrudinView Answer on Stackoverflow
Solution 2 - JavascriptBob SteinView Answer on Stackoverflow
Solution 3 - JavascriptDan DascalescuView Answer on Stackoverflow
Solution 4 - Javascriptlazy.lizardView Answer on Stackoverflow
Solution 5 - JavascriptlenaView Answer on Stackoverflow
Solution 6 - JavascriptvaldeciView Answer on Stackoverflow