在 WebStorm 中为 node_modules 启用代码完成答案

【问题标题】：Enable code completion for node_modules in WebStorm在 WebStorm 中为 node_modules 启用代码完成
【发布时间】：2016-09-06 10:17:18
【问题描述】：

我是 WebStorm 的新手，对 Node 开发也很陌生。我正在开发一个现有项目，并希望为我的 node_modules 完成代码。更具体地说，我正在使用 Chai，而 WebStorm 似乎找不到我的 expect.to 语句的 .have 成员。

这是我的简化代码：

var expect = require('chai').expect;

import {Customer} from '../../app/model/Customer.js';

describe('...', function() {
    it('...', function() {
        var customer = new Customer();
        expect(customer).to.have.property('name');
    });
});

我在have 调用下得到波浪线，WebStorm 告诉我Unresolved variable have。

如果我在to 上按 F12，WebStorm 会将我带到另一个节点模块 shelljs，但我还没有导入那个。

这是因为 WebStorm 无法解析 javascript 中的所有内容吗？

我已将 NodeJS 的编码协助设为 per the docs，但这并没有什么不同。

【问题讨论】：

尝试用这个import { expect } from "chai" 替换var expect = require('chai').expect 无论如何...你安装了 chai 吗？如果没有，请运行npm install 进行安装。
不幸的是，在我的导入语句中，波浪线位于{expect} 下方。
blog.jetbrains.com/webstorm/2017/08/…

标签： javascript node.js intellisense webstorm

【解决方案1】：

问题是由定义这些 chai 方法的奇怪动态方式引起的。作为一种解决方法，我可以建议使用 chai.d.ts：

打开“Settings | Languages & Frameworks | JavaScript | Libraries”
单击“Download...”按钮并选择“TypeScript 社区存根”
找到“chai”并点击“Download and Install”。

有关详细信息，请参阅 http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/，“使用 TypeScript 社区存根（TypeScript 定义文件）”

【讨论】：

似乎没有帮助。我已经通过下载按钮添加了社区打字稿存根，通过添加按钮在本地添加它们，添加了我的整个 node_modules 文件夹，......仍然显示错误的行。
对我有用 - 请参阅我的答案中插入的图像。我建议创建一个支持票，为项目提供重新创建问题所需的最少文件集
现在似乎可以工作了...一定与以前的某些东西有冲突。但它现在确实有效。谢谢。
我遇到了一个问题：chai.use(require("chai-sorted")); 然后expect(...).to.be.sortedBy sortedBy 没有解决，由您的回答。（还是帮了我很多...）
不幸的是，“chai-sorted”包没有类型，它的方法是动态生成的（使用chai.Assertion.addMethod()），因此无法解析

【解决方案2】：

WebStorm 2020.1

TypeScript 定义也可以直接通过 package.json 添加：

打开项目的package.json
将光标放在包上（在依赖项部分）
按 alt+enter（或单击灯泡）
选择安装 '@types/name'（其中 name 是依赖项）

例如：

【讨论】：

【解决方案3】：

在 WebStorm 2019.3 中，我遵循以下步骤强制代码完成（包括自动导入）适用于仅包含纯 ES6 模块的自定义、自行发布的 NPM 包：

确保项目本身在项目的根目录下有一个 package.json 文件，并且该 package.json 在“依赖项”对象中包含所需的包。例如：

{
  "name": "testproject",
  "version": "1.0.0",
  "dependencies": {
    "@yourname/yourpackage": "latest"
  }
}

在 WebStorm 中，选择 File > Invalidate Caches / Restart...
要启用包内容的自动导入，请确保正在使用包的 JavaScript 文件具有至少一个导出语句。例如，在以下代码中，存在导出，因此代码完成自动导入包函数 isNil()：

export function init () {
  isNil
}

相比之下，以下代码不包含导出语句，因此 isNil() 不会自动导入：

function init () {
  isNil
}

对我来说，前面的所有三个步骤对于代码完成都需要在 WebStorm 中为我自己的 NPM 包（带有纯 ES6 模块）工作。

【讨论】：