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

Question

我有一个从服务器取数据的功能：

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

WebStorm提示someVar是未解析的变量。 我该如何消除这样的警告？

我看到有几个选项：

• 在IDE设置中禁止警告；
• 添加一个具有字段的JSON源文件（详情）；
• 使用类似数组的语法：data['some_unres_var']；

此外，WebStorm向我提供创建“data”的名称空间（添加注释，如/** @namespace data.some_unres_var*/），创建这样的字段或将其重命名。

- S Panfilov

---

@hellboy 快速回答：右键单击 -> 使用Javascript库 -> 确保HTML已选中。接着查看项目设置中可用的Javascript库，以更好地了解正在发生的情况。 - owensmartin

Answer 1

使用JSDoc：

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

- Andreas Berheim Brudin

---

变量使用以下语法：/** * @type {Object} * @property {string} sortval - 要排序的值 */ var a; - Ferenc Takacs

当函数是一个匿名函数时，你会怎么做？比如在.then(function(data){ .... })中。 答案：当函数是一个匿名函数时，翻译不变，可以这样表达：“当函数是没有名称的函数时，你会怎么做？比如在.then(function(data){ .... })中。” - David V.

是否有类似的方法来定义全局变量？我在我的Web应用程序中引用了外部库，我需要使用像MediumEditor这样的东西，但是Intellij会给我一个臭名昭著的未解决变量警告。 - borislemke

@borislemke：这个答案对于不是参数的变量是无效的。一般的解决方案是使用@namespace。 - Dan Dascalescu

Answer 2

对对象进行 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中也可以工作。
• {{ member:type }} 语法Andreas建议可能会与Django模板冲突。
• 感谢Jonny Buchanan的答案引用@param wiki。

要记录对象数组，请使用[]括号，如JSDoc建议的：

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

- Bob Stein

---

那么不是参数的变量怎么办？通用的解决方法是使用@namespace。 - Dan Dascalescu

Answer 3

对于一般情况，所有其他答案都是不正确的。如果你没有将data作为参数传入，会怎么样？那时你就没有JSDoc了：

所有其他答案都不适用于一般情况。如果没有将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;
}

- Dan Dascalescu

---

谢谢这个解决方案。我从API返回了许多属性，所以使用您的技术，我想我需要列出所有这些属性，以避免出现以下类似的错误： /** @namespace req.headers.signaturecertchainurl **/ /** @namespace req.headers.signature **/ /** @namespace req.headers.slots **/ /** @namespace req.headers.nutrientslot **/有没有办法创建一个更高级别的命名空间（例如req.headers），并自动将子项分配给它？（很抱歉在注释中没有格式！） - James

这是WebStorm特定的解决方案还是编辑器标准解决方案？这仍然让我不确定... - phil o.O

@philo.O：这是一种JSDoc解决方案，WebStorm可以解析。但使用TypeScript可以完全避免这个问题。 - Dan Dascalescu

使用此解决方案时，我收到了“未解析的变量或类型'entries'”的消息。如何修复？ - Robin Bastiaan

Answer 4

使用解构，卢克。

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

- lazy.lizard

---

为了帮助解决我遇到的问题，如果你要解构的变量有一个 Eslint 不允许的名称，比如 my_var，你可以将其重命名为：const { my_var: myVar } = data。 - Noumenon

Answer 5

使用一个包含匿名函数表达式返回json字面量的虚拟js文件，如在http://devnet.jetbrains.com/message/5366907中所述，可能是一个解决方案。我还可以建议创建一个假变量来保存这个json值，并将这个变量用作@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

- lena

---

Elena在JetBrains论坛上的建议是一个奇怪的解决方案。一般的解决方案是使用@namespace。 - Dan Dascalescu

Answer 6

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

- 未解析的Javascript函数 - 未解析的Javascript变量

附注：这将消除IDE上的警告，但我认为这不是最好的做法，因为我们将失去像Webstorm这样IDE中最好的工具之一，这可能会降低我们代码的质量。

即便如此，如果您想按照以下菜单操作：文件 > 设置 > 编辑器 > 检查，我们可以禁用Javascript警告。

如下图所示：

- valdeci

Answer 7

在tsconfig.json中使用"moduleResolution": "bundler"时遇到大量的"未解决变量"

当我将一个React应用程序移植到NextJs时，我遇到了类似的问题。 事实上，现代的NextJs建议在tsconfig.json配置文件中使用"moduleResolution": "bundler"，但这会导致webstorm出现错误。

如果你遇到类似的问题，请尝试将moduleResolution更改为node。

tsconfig.json:

{
  "compilerOptions": {
    /* ... */
    "moduleResolution": "node",
    /* ... */
  },
 /* ... */
}

- Garvae