160

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.

Improve this question
1
  • 3
    @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. Commented Aug 4, 2014 at 15:30

8 Answers 8

Reset to default
134

Use JSDoc:

/**
 * @param {{some_unres_var:string}} data
 */
function getData(data){
    console.log(data.some_unres_var);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

For variables use this syntax /** * @type {Object} * @property {string} sortval - value to sort by */ var a;
How would you do that when the function is an anonymouns function ? as in ........ .then(function(data){ .... })
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: this answer won't work for variables that aren't parameters. The general solution is to use @namespace.
/** @param {string} data.some_unres_var */ is what works for me.
63

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
 */
Improve this answer

1 Comment

What about variables that aren't parameters? The general solution is to use @namespace.
34

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;
}
Improve this answer

4 Comments

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!)
Is this a webstorm specific solution or an editor standard solution? That's what I'm still unsure of...
@philo.O: it's a JSDoc solution, which WebStorm parses. But using TypeScript avoids this problem altogether.
When using this solution, I am getting a Unresolved variable or type 'entries' message. How to fix this?
18

Destructuring use, Luke.

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

1 Comment

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.
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

Improve this answer

1 Comment

Elena's suggestion on the JetBrains forum is a weird solution. The general solution is to use @namespace.
4

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

Improve this answer

Comments

3

The best way for me is to use the @param tag for the function parameters and use @property for the inline properties.

/**
 * @param {object} x
 * @param {string} x.id
 * @param {string} x.name
 */
function addProp(x) {
  const results = await ...
  for(let r of results) {
    /**
     * @property {string} r.id
     * @property {string} r.name
     */
    console.log(x.id + ' ' + r.id);
  }
}
Improve this answer

Comments

2

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",
    /* ... */
  },
 /* ... */
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.