How WebStorm Works: Completion for JavaScript Libraries

One of the essential features of WebStorm’s editor is code completion. The way it is implemented in WebStorm is that it takes all JavaScript files in the project and goes through them, adding functions and methods to an internal index used for code completion suggestions. The index is automatically updated whenever existing files are changed or new files are added.


JSDoc, used for documenting code, also plays an important role in making your coding experience better. It powers WebStorm autocompletion with additional details about parameters and their types.


But what if all the libraries are loaded dynamically, or we want to exclude the folder with all the library code from the project to eliminate this third-party code from search results and code analysis?

This is where we introduce the concept (or mechanism) of External libraries that we use in WebStorm.

External libraries

External libraries are files explicitly added to project’s index to be used only in enhancing coding assistance (i.e. code completion, syntax highlighting, navigation, and documentation lookup). They are not to be edited in the scope of this project.

Let’s have a look at a couple of examples.

The library is added to the project via a CDN link

The quick-fix ‘Download library’ (call up with Alt+Enter) loads the file from the CDN link into the WebStorm cache (but not in your project).


To see the list of all libraries that power code completion for your project and enable specific aspects of code completion that you need to go to Preferences | Languages & Frameworks | JavaScript | Libraries.


The library code is in a project folder or elsewhere

You can also add libraries to this list manually. It’s not a very often case nowadays when most of the projects use npm and have a node_modules folder with all the dependencies. But it still might be useful when you have a JavaScript framework file somewhere in your project and you want the IDE to treat it as a library and not just as a source code.

Select Preferences | Languages & Frameworks | JavaScript | Libraries and click Add. Enter the library name and the path to the library file or folder. If you select Global visibility level, you’ll be able to enable this library in your other projects.


Additionally, you can specify the path to library’s/framework’s documentation. This URL will be opened when you press Shift+F1 (Show external documentation) on methods from the library.

All dependencies are in the node_modules folder

We would like to have code completion for the modules and keep them in the project, but there is no need for us to run inspections against these files. That is why this folder should be marked as a library. In fact, WebStorm does that automatically for you.


Completion for Node.js APIs

Node.js core modules (like http or fs) are another example where External libraries mechanism is used. To enable code completion for Node.js APIs, go to Preferences | Languages & Frameworks | Node.js and npm and click Enable below the selected Node.js version:


WebStorm will create and enable a new External library to provide code completion for Node.js APIs in the whole project.

Using TypeScript community stubs (TypeScript definition files)

WebStorm provides one more workaround for adding coding assistance for some popular libraries, frameworks and modules when you don’t have the source code available in your project. It allows you to download DefinitelyTyped stubs. These definition files for libraries and frameworks are added to the list of your project’s External libraries, thus enhancing code completion.

To add a TypeScript definition file for a library or framework you use, go to Preferences | Languages & Frameworks | JavaScript | Libraries – click Download and search for the library you need by typing its name, then hit Download again.


Develop with pleasure!
JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Cool Feature, Tutorials and tagged , . Bookmark the permalink.

55 Responses to How WebStorm Works: Completion for JavaScript Libraries

  1. Sergey says:

    Very nice article! Couple of things to mention: 1) Webstorm will mark properties of unknown data structure as unresolved – that typically happen in ajax callbacks, so it might be a good idea to use @typefed or custom definition (*.d.ts) file to describe that structure 2) If you have a folder with minified sources it might be better to exclude this folder altogether from Directories dialog and then install library (or better community stubs).
    Community stubs are definitely better because they contain type information, while it is not guarantied that unminified javascript files have jsdoc comments. Why is it important to have type information? Well there is another amazing part about webstorm – if it can guess type it will provide you type validation support, just like your favorite IDE for strictly typed language. Why would you care about types in javascript when you’re so smart to know how they are converted internally? Because we are all human beings and can make an error, so why not to catch that error as soon as possible then debug all the way back through callstack? Sometimes type validation in webstorm might fail due to more complex type definition of nested jsdoc structure, so if you would like to have better support please vote for these issues:


  2. maros says:

    How did you achieve autocompletion like in first screenshot?

    My team uses AMD import, just like you do, but there is never any type information attached to the variables: the proposed autocompletions start with __defineGetter__, __proto__, etc.

    In order to get autocompletion like you do, I would need to explicitly add a comment like:
    /*Engine.prototype*/ Engine

    We do use typescript definition files, but they are nearly useless when combined with AMD. Any help would be most welcome

    • Konstantin Ulitin says:

      Hi, Maros.
      To get relevant completion of imported AMD module, WebStorm have to correctly resolve path to module corresponding to function parameter. That path is now considered as file path, I’ve created issue WEB-12622 for this.
      Completion in Ekaterina’s example is working because we have heuristics to add type from parameter name matching to AMD module, and luckily the internal definition of Engine has such a name too.
      By the way, WebStorm understands that /*Engine.prototype.constructor*/ notation specifies that a symbol has a constuctor type (to get static methods completion). Please see WEB-10214.

      • maros says:

        It would be nice to know some basic rules in order to utilize them in our project.

        I have noticed that underscore.js gets proper autocompletion when imported through AMD, JQuery doesn’t. In fact, the autocompletion for JQuery imported through AMD strongly proposes methods of type HTMLElement.prototype.

        If I try to use $ as a variable outside of AMD, the type gets resolved perfectly well.

        Similarly, when I tried to add a Typescript file with this content:

        Then importing the module doesn’t offer any autocompletion.

        At the moment the type resolution works like a black box, sometimes it does, sometimes it doesn’t, without any clue as to what might be wrong. Revealing a few basic tips on how to get it up and rolling would be great.

  3. Pipo says:

    It would be great to use .d.ts files for better auto-completion, but use .jsdocs from original .js file and use the original .js fiel for “go to declaration” instead of jumping into the .d.ts.

    • Pipo says:

      Better example:

      Say I use “angular.module” in my source file.
      – Without any library I have just bad or no auto-completion for if I type “angular”. I can’t use “go to declaration” on “angular” (not found) and wrong “go to declaration” on “module” (Node.js globals).
      – With angular.js as a library I get better auto-completion if I type “angular”. I can use “go to declaration” on “angular” and wrong “go to declaration” on “module” (Node.js globals and angular.js).
      – With angular.d.ts as a library I get the best auto-completion if I type “angular”. The “go to declaration” on “angular” is wrong (2 places in the angular.d.ts itself) and the “go to declaration” on “module” is wrong (angular.d.ts). (Wrong in the sense that I want the real declaration in the source code, not the interface.)
      – With angular.d.ts and angular.js as a library it behaves just like only with the .d.ts. But it would be great if it would mix the best out of both worlds.

    • Konstantin Ulitin says:

      Good suggestion! Could you please create a feature request in our tracker?

  4. Daniel says:

    I’ve noticed with libraries like q, it doesn’t show the code complete suggestions, and the ones that are used show as “Unresolved function or method”, do you know why that is?

    • Ekaterina Prigara says:

      Some libraries are implemented in a very dynamic manner, so it’s very complicated for WebStorm to provide coding assistance for them. Downloading TypeScript community stubs for these libraries solve the problem.

  5. Rima says:

    Great! Is there also a way to download CDN-hosted CSS libraries into the Webstorm cache?

  6. Pingback: WebStorm code completion | Ben Ramseth

  7. Sergey says:

    I’ve created a video ( which shows a way of getting maximum from jsdoc autocompletions. The video also outlines existing issues with completions and validation and ticket is created here (, so please take time to vote for it. Also if you know about a better way to solve some of the issues showed in videos, or know about other ‘best practices’, please feel free to post them here. Thank you.

  8. noko says:

    Does it uses .map files that come with some js libraries?

  9. Dmitri says:

    How can I get rid of the case sensitive file system warning on a Mac 10.10.2? The webpage suggests editing file, but then other page suggests never edit file on the Mac. I can even find that file in my home directory. What is the right way to do this?

    • Ekaterina Prigara says:

      Please copy the from the bin folder (/Applications/ into ~/Library/Preferences/WebStorm*/ and then edit it.

  10. hellboy says:

    Why in Download Library dialog TypeScript community stubs list ends with PayPal-Cordova.Plugin.

    Another items (for example underscore.js) are not available.


  11. Thomas Tempelmann says:

    Despite the suggestions above, I am still getting “Unresolved function …” warning with methods, such as when using “io.on()” or socket.broadcast.
    Is there a way to solve that?

  12. Jean-Baptiste Demonte says:

    Is there a way to explain to webstorm that an object is the result of a path load use glob

    This kind of loading:

    var exports = module.exports = {};

    glob(__dirname + ‘/schemas/*.js’, function (err, files) {
    if (err) {
    logger.error(err.message || ‘Unknown error’);
    } else {
    files.forEach(function (file) {
    var name = file.replace(path, ”).replace(‘.js’, ”),
    module = require(file);
    if (options.verbose !== false) {‘ MODEL: ‘ + name);
    exports[name] = mongoose.model(name, module.schema, module.collection);

  13. doudou says:

    Hi, I’m using nodejs sequelize and I’ve install the sequelize library in my project(use npm install), but when I use the function findAll(), it still show me unresolved function or method.The sequelize library is in node_modules folder,what should I do? Thank you!

    • doudou says:

      The library works, I just think the underline is ugly.

    • Ekaterina Prigara says:

      Please make sure that you have listed the library in the project’s dependencies in package.json. WebStorm indexes only the modules listed in package.json. You can also try to add sequelize.d.ts as an external JavaScript library in Preferences | Languages and Frameworks | JavaScript | Libraries – Download – search for sequelize. TypeScript definition files help WebStorm to provide better code completion results.

      • Enrique Delgado Monroy says:

        Ekaterina, does WebStorm look both in dependencies and devDependencies within package.json? I’m using jest and it’s listed within devDependencies, but WebStorm does not what describe means.

        • Ekaterina Prigara says:

          Jest puts these methods into the global environment and they are not defined inside Jest module that WebStorm indexes. To fix that it’s recommended to add Jest type definition file to the list of JavaScript library in WebStorm – Preferences – Languages & Frameworks – JavaScript – Libraries, click Download and search for Jest.

  14. Daniele Segato says:

    can’t seem to make Webstorm work with autocompletion and libraries (nodejs).


    var AWS = require(“aws-sdk”);

    // Unresolved variable config

    // Unresolved variable S3
    var s3 = new AWS.S3({
    // no auto-completion / jsdoc
    apiVersion: ‘2006-03-01’,
    region: ‘us-west-2’}

    So there’s no auto completion, no documentation, no assist at all. Is this supposed to work like that?

    Same thing using jasmine: describe/it are unrecognized.

    When I execute them (launching node or jasmine) they work, so it’s not a problem with setting, it’s WebStorm not seeing them.
    Is this supposed to work like this?
    How can I make WebStorm understand the context? (coming from Java and evaluating WebStorm this is a bit unsettling)

    version: WebStorm 2016.1

    • Ekaterina Prigara says:

      Unfortunately, there’re some specifics of the implementation of the Jasmine library that make it impossible for WebStorm to resolve describe and it:
      The workaround is to install TypeScript definition files for Jasmine in Preferences | Languages and Frameworks | JavaScript | Libraries.
      It seems that it’s also the case with the aws-sdk module, downloading definition file for it helps. Unfortunately, with JavaScript our static analysis can’t always provide the 100% resolve for all functions and methods. Writing JSDoc helps a lot.

  15. wisnia says:

    Does the angular project (and package.json) has to be in the root of the project folder for the autocomplete to work? I’m using PhpStorm 2016.1.2 with Angular plugin and I don’t get @Component annotation completition, however *ngFor style directives completition work fine.

  16. Zomar says:

    If you don’t select any Javascript/ECMA Script in Hector you still get code completion for Javascript.

    What version of Javascript/ECMA Script is the base level?

  17. JackHu says:

    version u2016.2
    Not work in es6 class, But worked outside es6 class, for example:

    // code completion work here
    class Myclass extends Component {
    // code completion not work here

    • Ekaterina Prigara says:

      What code completion results would you expect here? WebStorm suggests constructor and static. If you add React TypeScript definition file via Preferences | Languages & Frameworks | JavaScript | Libraries – Download – Search for react, you’ll also see React lifecycle methods in the code completion.

  18. Alexander says:

    I have 2 projects: ucp-common and ucp-auth. ucp-common is a library that contains index.js with next code:
    'use strict';
    exports.Assertion = require('./lib/assertion'); // it is require a class Assertion with some static methods

    Project ucp-auth contains 2 folders: auth-common and customer-auth. auth-common is a library that references to ucp-common (reference to github in the package.json):
    //index.js in the auth-common
    const common = require('ucp-common');
    common.model = require('./lib/model');
    module.exports = common;

    In finally customer-auth is a microservice that references to auth-common (reference to local directory in the package.json):
    //main.js in the customer-auth
    const common = require('ucp-common');
    const assert = common.Assertion; //<-- Here warning 'Unresolved variable Assertion'

    I do npm i in the customer-auth and see all my libraries:

    What I do wrong? Why WebStorm does not see Assertion definition?

    • Ekaterina Prigara says:

      Hi Alexander,
      Thanks for the thorough description of your project structure, but it’s still hard to reproduce the problem. Any chance you can send us your projects for further investigations? You can either create a new issue on our tracker or contact our tech support. Thank you!

  19. Sam Blowes says: has now changed the structure of the the libararies and webstorm no longer works as expected

  20. labs says:


    class Mod{

    module.exports = Mod;

    class Level1 extends Mod{
    this.[test1 appears ok]
    const Mod = require('mod');
    module.exports= Level1;

    class Level2 extends Level1{
    this.[test1 do not appears]
    const Level1 = require('level1');
    module.exports= Level2;

  21. intosh says:

    Just want to say I am really impressed by the level of users support here. This article was published almost 3 years ago and the author is still actively responding to questions. Kudos!

    • Ekaterina Prigara says:

      Thanks for the nice words! Please let us know if you have any questions, we’d be glad to help!

  22. Troy Harrison says:

    Is there a way for webstorm to automatically find all the libraries from the node_modules folder and download if available from the definately typed repo?

  23. Troy says:

    I want to see completion for a plain-jane node.js library within a typescript file. I have enabled the code-completion help, but I just cannot get it to work. As an example, I am trying to instantiate and use methods on the class exported by the lcd module on npm. It suggests proper methods when in a javascript file, but not when in a typescript file. Any help would be appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *