如何在 WebStorm 中对抗大量未解决的变量警告？

Posted 2023-03-06

【中文标题】如何在 WebStorm 中对抗大量未解决的变量警告？

【英文标题】：How to fight tons of unresolved variables warning in WebStorm?

【发布时间】：2014-01-17 02:28:02

【问题描述】：

我有一个从服务器获取数据的函数：

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

WebStorm 说 someVar 是一个未解决的变量。 我怎样才能摆脱这样的警告？

我看到了几个选项：

在 IDE 设置中禁止警告； 添加带有字段的 JSON 源文件 (details)； 使用类似数组的语法：data['some_unres_var'];

此外，WebStorm 还允许我为“数据”创建命名空间（添加注释，如 /** @namespace data.some_unres_var*/）、创建此类字段或重命名。

【问题讨论】：

@hellboy 快速回答：右键单击 -> 使用 javascript 库 -> 确保选中 html。通过查看项目设置中可用的 javascript 库来跟进这一点，以更好地了解正在发生的事情。

【参考方案1】：

要删除 WebStorm IDE 上的警告，您只需取消选中以下检查选项：

未解析的 Javascript 函数

未解析的 Javascript 变量

ps。这将删除 IDE 上的警告，我认为这不是最好的主意，因为我们将失去像 Webstorm 这样的 IDE 中最好的实用程序之一，这会降低我们的代码质量。

即便如此，如果您想在菜单中进行操作：文件 > 设置 > Editor > Inspections我们可以禁用 Javascript 警告

如下图：

【参考方案2】：

使用JSDoc:

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

【讨论】：

对于变量使用此语法/** * @type Object * @property string sortval - value to sort by */ var a;

当函数是匿名函数时，你会怎么做？如 ........ .then(function(data) .... )

有没有类似的方法来定义全局变量？我在我的网络应用程序中引用了一个外部库，我需要使用诸如 MediumEditor 之类的东西，但 intellij 给了我臭名昭著的未解决变量警告。

@borislemke：此答案不适用于非参数的变量。一般的解决办法是use @namespace。

【参考方案3】：

JSDoc 对象。然后是它的成员。

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

@property 用于局部变量（非参数）。 在 PyCharm 中测试。 @Nicholi 确认它在 WebStorm 中有效。 Andreas 建议的 member:type 语法可能与 Django 模板冲突。 感谢 Jonny Buchanan 的 answer 引用 @param wiki。

要记录对象数组，请使用[] 括号作为JSDoc suggests：

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

【讨论】：

那些不是参数的变量呢？一般的解决方案是use @namespace。

【参考方案4】：

使用带有匿名函数表达式的虚拟 js 文件返回 json 文字，如 http://devnet.jetbrains.com/message/5366907 所写，可能是一种解决方案。我还可以建议创建一个假变量来保存这个 json 值，并使用这个 var 作为 @param 注释的值，让 WebStorm 知道实际类型是什么。喜欢：

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

另见http://devnet.jetbrains.com/message/5504337#5504337

【讨论】：

Elena 在 JetBrains 论坛上的建议是 weird solution。一般的解决办法是use @namespace。

【参考方案5】：

解构使用，卢克。

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

【讨论】：

为了帮助解决我遇到的复杂情况，如果您要解构的变量具有 Eslint 非法名称，例如 my_var，您可以将其重命名为：const my_var: myVar = data。

【参考方案6】：

对于一般情况，所有其他答案都不正确。如果你没有得到data 作为参数怎么办？那么你没有 JSDoc：

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 将警告“result.entries”是一个未解析的变量（字段）。

一般的解决方案是添加@namespace声明：

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;

【讨论】：

感谢您的解决方案。我有许多从 API 返回的属性，因此使用您的技术，我认为我需要列出其中的许多属性以避免我看到这样的错误：``` /** @namespace req.headers.signaturecertchainurl // @namespace req.headers.signature / / @namespace req.headers.slots / / @namespace req.headers.nutrientslot **/ `` ` 有没有办法创建更高级别的命名空间（例如req.headers）并自动为其分配子级？ （抱歉没有在 cmets 中格式化！）

这是 webstorm 特定解决方案还是编辑器标准解决方案？这就是我仍然不确定的......

@philo.O：这是一个 JSDoc 解决方案，由 WebStorm 解析。但是使用 TypeScript 完全避免了这个问题。