How to fight tons of unresolved variables warning in WebStorm?
JavascriptWebstormJavascript 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: