Comment lutter contre des tonnes d'avertissement de variables non résolues dans Webstorm?


110

J'ai une fonction qui prend une donnée du serveur:

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

Webstorm dit que someVar- est une variable non résolue. Que puis-je supprimer de tels avertissements?

Je vois plusieurs options:

  • Supprimer les avertissements dans les paramètres ide;
  • Ajouter un fichier source json avec des champs ( détails );
  • Utilisez des tableaux-comme la syntaxe: data['some_unres_var'];

Webstorm me propose également de créer un espace de noms pour les "données" (ajouter une annotation comme /** @namespace data.some_unres_var*/), de créer un tel champ, ou de le renommer.


2
@hellboy Réponse rapide: clic droit -> Utiliser la bibliothèque Javascript -> s'assurer que HTML est coché. Suivez ceci en regardant les bibliothèques javascript disponibles dans les paramètres du projet pour mieux comprendre ce qui se passe.
owensmartin

Réponses:


102

Utilisez JSDoc:

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

8
Pour les variables, utilisez cette syntaxe/** * @type {Object} * @property {string} sortval - value to sort by */ var a;
Ferenc Takacs

3
Comment feriez-vous cela lorsque la fonction est une fonction anonyme? comme dans ........ .then (function (data) {....})
David V.

1
Existe-t-il une méthode similaire pour définir les variables globales? Je fais référence à une bibliothèque externe dans mon application Web, je dois utiliser des éléments tels que MediumEditor, mais intellij me donne le tristement célèbre avertissement de variable non résolue.
borislemke

@borislemke: cette réponse ne fonctionnera pas pour les variables qui ne sont pas des paramètres. La solution générale consiste à utiliser @namespace .
Dan Dascalescu

45

JSDoc l'objet. Puis ses membres.

/**
 * @param data          Information about the object.
 * @param data.member   Information about the object's members.
 */
function getData(data){
    console.log(data.member);
}
  • @property pour les variables locales (non paramètres)
  • Testé dans PyCharm. @Nicholi confirme que cela fonctionne dans Webstorm.
  • La {{ member:type }}syntaxe suggérée par Andreas peut entrer en conflit avec les modèles Django.
  • Merci à la réponse de Jonny Buchanan citant le wiki @param .

Pour documenter des tableaux d'objets , utilisez des []crochets comme le suggère JSDoc :

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

Qu'en est-il des variables qui ne sont pas des paramètres? La solution générale consiste à utiliser @namespace .
Dan Dascalescu

1
Je peux confirmer que cette notation pour les objets complexes fonctionne dans WebStorm.
Nicholi

18

Toutes les autres réponses sont incorrectes pour le cas général. Et si vous n'obtenez pas dataun paramètre? Vous n'avez pas JSDoc alors:

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 avertira que "result.entries" est une variable (champ) non résolue.

La solution générale consiste à ajouter une @namespacedéclaration:

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

2
Merci pour cette solution. J'ai de nombreux attributs renvoyés par une API, donc en utilisant votre technique, je suppose que j'aurais besoin de les énumérer pour éviter les erreurs que je vois comme ceci: `` `` / ** @namespace req.headers.signaturecertchainurl / / @ namespace req.headers.signature / / @namespace req.headers.slots / / @namespace req.headers.nutrientslot ** / `` Existe-t-il un moyen de créer un espace de noms de niveau supérieur (par exemple req.headers) et de lui attribuer automatiquement des enfants? (désolé pour pas de mise en forme dans les commentaires!)
James

@James: c'est une bonne question, et j'ai aussi cherché (sans succès) au moins en lister plus que sur champ par ligne.
Dan Dascalescu

6

l'utilisation d'un fichier js factice avec une expression de fonction anonyme renvoyant le littéral json, tel qu'écrit à http://devnet.jetbrains.com/message/5366907 , peut être une solution. Je peux également suggérer de créer une fausse variable qui contiendra cette valeur json et d'utiliser cette variable comme valeur d'annotation @param pour indiquer à WebStorm quel est le type réel. Comme:

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

Voir aussi http://devnet.jetbrains.com/message/5504337#5504337


1
La suggestion d'Elena sur le forum JetBrains est une solution étrange . La solution générale consiste à utiliser @namespace .
Dan Dascalescu

3

Utilisation destructrice, Luke.

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

-1

Pour supprimer les avertissements sur l'IDE WebStorm, vous pouvez simplement décocher les options d'inspection pour:

  • Fonction Javascript non résolue
  • Variable Javascript non résolue

ps . cela supprimera les avertissements sur l'EDI, mais je ne pense pas que ce soit la meilleure idée, car nous perdrons l'un des meilleurs utilitaires dans un IDE comme Webstorm, ce qui peut détériorer la qualité de notre code.

Même ainsi, si vous souhaitez suivre dans le menu: Fichier > Paramètres > Editeur > Inspections nous pouvons désactiver les avertissements Javascript

Comme l'image suivante:

décocher les options


C'est une mauvaise idée, car cela supprimera une grande partie de l'utilité d'utiliser un IDE pour éditer JS. Le fait est que l'utilisation de la notation par points JavaScript confond l'inspection, et non l'inspection doit être désactivée.
Will Harris
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.