Enable code completion for node_modules in WebStorm

Question

I'm new to WebStorm, and fairly new to Node development. I am working on an existing project, and want to have code completion for my node_modules. More specifically, I'm using Chai and WebStorm doesn't seem to find the .have member of my expect.to statement.

This is my code, simplified:

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

I get squiggly lines under the have call, and WebStorm tells me Unresolved variable have.

If I F12 on the to, WebStorm takes me to another node module, shelljs, but I haven't imported that one.

Is this because WebStorm can't resolve everything in javascript?

I've enabled Coding Assistance for NodeJS as per the docs, but that made no difference.

Try replacing `var expect = require('chai').expect` with this `import { expect } from "chai"` Anyways... Do you have chai installed? run `npm install` to install it if not. — dlopez, Sep 06 '16 at 10:30
Unfortunately, then the squiggly lines are under the `{expect}` in my import statement. — Peter, Sep 06 '16 at 10:34
https://blog.jetbrains.com/webstorm/2017/08/how-to-configure-code-completion-in-full-stack-javascript-projects/ — Muhammed Ozdogan, Nov 03 '20 at 19:34

lena · Accepted Answer · 2016-09-06T14:23:42.690

8

Problem is caused by weird dynamic way these chai methods are defined. As a workaround I can suggest using chai.d.ts:

Open "Settings | Languages & Frameworks | JavaScript | Libraries"
Click "Download..." button and select "TypeScript community stubs"
Find "chai" and click "Download and Install".

See http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/, 'Using TypeScript community stubs (TypeScript definition files)' for more information

edited Sep 06 '16 at 14:23

answered Sep 06 '16 at 13:40

lena

90,154
11
145
150

Doesn't seem to help. I've added the community typescript stubs via the download button, added them locally via the add button, added my entire node_modules folder,... Still shows the wrong line. – Peter Sep 06 '16 at 14:12
works for me - see the image inserted in my answer. I'd suggest creating a support ticket, providing a project with minimal set of files needed to recreate the issue – lena Sep 06 '16 at 14:23
Seems to work now... Must have conflicted with something previously. But it does work now. Thanks. – Peter Sep 07 '16 at 07:46
I encounter a issue: `chai.use(require("chai-sorted"));` then `expect(...).to.be.sortedBy` the **sortedBy** is not resolved, by your answer. (still help me a lot...) – NeoZoom.lua Apr 07 '20 at 16:20
there are no typings for "chai-sorted" package unfortunately, and its methods are generated dynamically (with `chai.Assertion.addMethod()`) and thus can't be resolved – lena Apr 07 '20 at 17:01

score 6 · Answer 2 · answered Jun 18 '20 at 01:09

WebStorm 2020.1

TypeScript definitions can also be added directly via package.json:

Open the project's package.json
Position the cursor on the package (within the dependencies section)
Press alt+enter (or click the light bulb)
Choose Install '@types/name' (where name is the dependency)

For example:

score 1 · Answer 3 · answered Jul 16 '20 at 18:29

In WebStorm 2019.3, here are the steps I follow to force Code Completion (including auto-import) to work for a custom, self-published NPM package that contains pure ES6 modules only:

Ensure that the project, itself, has a package.json file at the root of the project, and that package.json includes the desire package in the "dependency" object. For example:

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

In WebStorm, select File > Invalidate Caches / Restart...
To enable auto-import for package contents, ensure that the JavaScript file in which the package is being used has AT LEAST ONE export statement. For example, in the following code, an export is present, so Code Completion auto-imports the package function isNil():

export function init () {
  isNil
}

By comparison, the following code does not contain an export statement, so isNil() is not automatically imported:

function init () {
  isNil
}

For me, all three of the preceding steps are necessary for Code Completion to work for my own NPM packages (with pure ES6 modules) in WebStorm.

Enable code completion for node_modules in WebStorm

3 Answers3

Linked