How WebStorm Works: Completion for JavaScript Libraries

Ekaterina Prigara

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

Comments below can no longer be edited.

71 Responses to How WebStorm Works: Completion for JavaScript Libraries

  1. Sergey says:

    July 1, 2014

    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:


    • Ekaterina Prigara says:

      July 1, 2014

      Thank you, Sergey, for your comment and feedback.

    • John says:

      May 24, 2015

      Thanks Sergey, i added the vote. Come on people, there was only one vote!!!!

  2. maros says:

    July 2, 2014

    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:

      July 2, 2014

      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:

        July 3, 2014

        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:

        declare module "something" {
          export var foo: number;

        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:

    July 2, 2014

    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:

      July 2, 2014

      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:

      July 2, 2014

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

  4. Daniel says:

    July 7, 2014

    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:

      July 7, 2014

      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.

      • Akash says:

        December 31, 2017

        I am facing the same problem with nodeJS module yargs beside adding TypeScript community stubs for that library.

        • Ekaterina Prigara says:

          January 2, 2018

          Adding a TypeScript definition file for yargs should solve the problem.

  5. Rima says:

    August 27, 2014

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

  6. WebStorm code completion | Ben Ramseth says:

    August 27, 2014

    […] As luck would have it, a timely blog posting covers this process here. […]

  7. Sergey says:

    September 6, 2014

    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.

    • Ekaterina Prigara says:

      September 8, 2014

      Sergey, thank you for the screencast.

  8. noko says:

    November 13, 2014

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

    • Ekaterina Prigara says:

      November 13, 2014

      WebStorm understands .js files and .min.js + .map

  9. Dmitri says:

    February 22, 2015

    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:

      February 25, 2015

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

  10. hellboy says:

    December 10, 2015

    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:

    February 2, 2016

    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?

    • Thomas Tempelmann says:

      February 2, 2016

      (I am trying this with the chat tutorial code from the website)

  12. Jean-Baptiste Demonte says:

    February 6, 2016

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

    • Konstantin Ulitin says:

      February 8, 2016

      Unfortunately, there is no way to do it now.

      • Jean-Baptiste Demonte says:

        February 10, 2016

        Thanks for the answer

  13. doudou says:

    March 15, 2016

    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:

      March 15, 2016

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

    • Ekaterina Prigara says:

      March 15, 2016

      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:

        January 10, 2017

        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:

          January 10, 2017

          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.

          • Enrique Delgado Monroy says:

            January 10, 2017

            Awesome, thanks.

  14. Daniele Segato says:

    May 19, 2016

    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:

      May 19, 2016

      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:

    June 16, 2016

    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.

    • Andrey Starovoyt says:

      June 20, 2016

      Hi. Are you using typescript?

  16. Zomar says:

    December 11, 2016

    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:

    March 15, 2017

    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:

      March 15, 2017

      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:

    March 31, 2017

    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:

    |-- node_modules
    |    |-- auth-common
    |    |-- ucp-common
    |--  main.js 

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

    • Ekaterina Prigara says:

      April 3, 2017

      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:

    April 3, 2017 has now changed the structure of the the libararies and webstorm no longer works as expected

  20. labs says:

    April 6, 2017


    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;

    • Ekaterina Prigara says:

      April 7, 2017

      What WebStorm version do you use? Is that a JavaScript or a TypeScript file?

  21. intosh says:

    May 1, 2017

    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:

      May 2, 2017

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

  22. Troy Harrison says:

    May 30, 2017

    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:

    September 12, 2017

    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.

    • Ekaterina Prigara says:

      September 13, 2017

      TypeScript requires you to add d.ts files for the JS libraries you’re using locally in the project. That can be done using npm. Here’s a good explanation:
      What is described in this blog post is the way to use d.ts files to improve code completion in JavaScript files.

      • Troy says:

        September 25, 2017

        I’m already aware that TypeScript (TS) definition files can be used to improve code completion. However, when you are working in pure JavaScript (JS) files, I have noticed pure JS libraries have pretty decent auto-completion/suggestion. And sometimes there exist no TS definition files for a JS library. I’m lobbying that the auto-completion suggestions that are enabled in JS files should also be enabled in TS files when one is occasionally required to use a pure JS library within a TS file/project. It seems silly not to include that feature when pure JS is allowed in TS files.

        • Ekaterina Prigara says:

          October 2, 2017

          Definition files can improve code completion in JavaScript files, but if you’re writing TypeScript code in .ts files, having the definition files is a must, otherwise, the code won’t be compiled by the TypeScript compiler. That is why WebStorm doesn’t provide completion from JavaScript libraries in TypeScript if there’s no d.ts file.

          • Troy says:

            October 2, 2017

            That’s 100% false. The TypeScript compiler most certainly will compile JavaScript code without definition files. I do that daily with no issue. TypeScript would never be so constricting. So if WebStorm/PhpStorm can, it should definitely provide completion for JavaScript code within .ts files in order to stay relevant and unrestrictive to TypeScript developers.

          • Troy says:

            October 2, 2017

            If you do a simple Google search and actually research around, you will quickly find that “any valid JS is valid TS”. Please consider providing JS code completion hints within .ts files.

            • Ekaterina Prigara says:

              October 2, 2017

              Please share with us a sample project that shows a configuration for compiling TypeScript files without d.ts files for the JavaScript libraries. Thank you!

          • Troy says:

            October 2, 2017

            You can demonstrate it yourself: Install any npm library that does not have definition files and do `const library = require(“library”)` in a .ts file. Compile that and you will receive no compiler warnings. Why? Because “any valid JS code is valid TS code”.

          • Troy says:

            October 2, 2017

            You are over-complicating things, I’ll afraid.

          • Troy says:

            October 2, 2017

            Worst case scenario, you may have to set “allowJs” to true in your tsconfig file. But I usually don’t have to and I can easily compile pure JavaScript statements within a .ts file.

            • Ekaterina Prigara says:

              October 2, 2017

              Please report a new feature request on our issue tracker

              • Ekaterina Prigara says:

                October 2, 2017

                If you want to have both JavaScript completion and TypeScript linting, you can use the latest WebStorm 2017.3 EAP that supports checkJS option, but the files have to have .js extension.

  24. Daniel says:

    December 22, 2018

    Dear Ms. Prigara,
    How can I set up autocompletion for Gnome applet / desklet programming in Linux Mint? “GObject introspection is a middleware layer between C libraries (using GObject) and language bindings,” (in my case Javascript). Is there support for this to happen without third-party code?

    • lena_spb says:

      December 24, 2018


      WebStorm provides no special support for Gnome programming, but I believe that you can set up .js files from as JavaScript libraries for completion

  25. Manvendra says:

    July 6, 2019

    Cannot you make webstorm to automatically download the libraries using the package.json, like vs code does?

    • Ekaterina Prigara says:

      July 8, 2019

      Hello, not sure I understand the question. WebStorm shows you a suggestion to run npm install to download the dependencies when you open the project. Code completion suggestions will be immediately available after their source code is indexed.