Node.js Coding Assistance in WebStorm

Posted on by Ekaterina Prigara

In WebStorm 11 it’s now easier to start working with Node.js projects.

Configuring coding assistance for Node.js

To enable code assistance for Node.js core APIs (and that means you’ll get smart code completion, parameter info and navigation to source code), the only thing you need to do is go to Preferences | Languages & Frameworks | Node.js and npm and check Coding assistance for Node.js.

nodejs_enable

An even quicker way to do the same is to use the Enable Node.js Core library quick-fix. Press Alt+Enter on the highlighted usage of one of the Node.js core modules in the code and then press Enter.

nodejs-quickfix

This will take the Node.js version that is installed on your computer and specified as a Node interpreter in Preferences, and use its sources as a library for coding assistance inside WebStorm.

nodejs-completion

For this Node.js Core library we recommend that you specify the usage scope – the scope of your project where you use Node.js and want to have Node.js-specific coding assistance. By default, it is the whole project.

If you’d like to change the Node.js version you’re using, go back to Preferences and select the new version in the Node.js interpreter field. Click Enable under Code Assistance once again so that WebStorm reconfigures the library. That Node.js version will also be used as the default one for all new Node.js Run/Debug configurations you create.

New inspections for Node.js

WebStorm 11 also adds new handy inspections for Node.js apps. These only work when Node.js core library is enabled.

The Missing require() statement inspection checks that you’ve added a require() call for the module (either a Node.js core module, or one installed from npm, or one of your own) whose methods you’re using.

nodejs-missingrequire

For example, let’s type path.join() in our file. We’ll see a warning, then press Alt+Enter to see the available quick-fixes. The inspection will identify the files that export join method, and will suggest adding a require call for these files or specifically for that method. In our case it will suggest adding require calls to the Node.js core module path.

nodejs-addrequire

Another inspection, Missing module dependency, suggests adding a module to the dependencies or the devDependencies section in your package.json file, if you have required a module that is available on the npm and not yet installed in your project:

nodejs-missingdependency

You can disable these inspections by changing your inspection profile in Preferences | Editor | Inspections. Or just press Alt+Enter on the highlighted code and then, instead of hitting Enter, press Right arrow to see the option to Disable inspection.

nodejs-disableinspection

Develop with pleasure!
– JetBrains WebStorm Team

Comments below can no longer be edited.

54 Responses to Node.js Coding Assistance in WebStorm

  1. snowdream says:

    November 6, 2015

    Cool!!!

  2. Jakes Lee says:

    November 7, 2015

    I tried to use Webstorm 11. The code assistance for NODE.JS is dead!!

    var express = require('express');
    var router = express.[No Router() recommended]


    var express = require('express');
    var router = express.Router();

    router.[NO POST FUNCTION SUGGESTED]

    The problem above does not exist in Webstorm 10. I have enabled Code Assistance in Node.js and npm

    • Ekaterina Prigara says:

      November 9, 2015

      Do you have express library in your project files?

      • Jakes Lee says:

        November 11, 2015

        Of course! I have used command `npm install –save express` to install express library in directory node_modules. The same code, it works fine while I re-open in Webstorm 10.

        • Sergey Simonchik says:

          November 11, 2015

          Hmm, seems to be a bug. Please make sure that in your case node_modules/express is not under excluded directories (File | Settings | Project | Directories).

          FYI: code assistance seems to work correctly for me using a sample Express project (generated with “File | New Project… | Node.js Express App”). Here is how code completion looks like (screenshot).
          If you have a different completion list using the sample Node.js Express App, please file an issue in the https://youtrack.jetbrains.com/issues/WEB. We’ll investigate it further. Thanks.

          • bromi says:

            January 22, 2016

            Hello.
            If I try the clean example like you said, i have the same completion as on your screenshot.
            But if I just rename the variable to one different letter, it’s all gone somehow:
            http://i.imgur.com/8jjsPRx.png

            • Ekaterina Prigara says:

              January 25, 2016

              Hi, which screenshot in the blog post are you referring to?

            • Ekaterina Prigara says:

              January 25, 2016

              Reproduced the problem, thanks for your feedback. Here’s a link to the issue that you can follow for updates: https://youtrack.jetbrains.com/issue/WEB-19960

          • Ivo says:

            December 11, 2017

            Hi Sergey, just wanted to let you know that by accident I added node_modules to excluded, which caused the error. Thanks!

    • Romain Bessuges-Meusy says:

      April 25, 2020

      Hey you know what, it’s 2020, we’re quarantined, and I still have no support for router.post or router.put in my freshly installed express app in PHP Storm.

  3. Brock Angelo says:

    November 26, 2015

    Ya, I gotta say that in the latest version (WS 11) the Node.js support is confusing. I still get errors in files that don’t understand what “require” means, even though I’ve enabled the “Node.js Core Library” in my Project and in the Default Settings…

    • Ekaterina Prigara says:

      November 26, 2015

      That’s weird. What does the warning say? Can you please report us an issue with a bit more details: https://youtrack.jetbrains.com/issues/WEB Would really appreciate that. Thanks!

  4. Lucas Pottersky says:

    July 15, 2016

    Is it possible to configure a Remote Node Interpreter that lives inside a Docker container?

    I found out that’s possible with JetBrains’s PyCharm (https://www.jetbrains.com/help/pycharm/2016.1/configuring-remote-interpreters-via-docker.html).

    How can I do the same with WebStorm?

  5. Andrew Yinger says:

    September 27, 2016

    node js coding assistance works great, but for some reason, the editor colors seem wrong after any require statement.

    for example:

    var globalvar = ‘some string’; // globalvar is set to global variable color as expected

    but if i insert:

    var fs = require(‘fs’);
    var globalvar = ‘some string’; // both fs and globalvar are now set to *local* variable color, which is unexpected

    i have tried all the color settings under Editor/Colors & Fonts/ language defaults and /javascript , but nothing seems to fix this issue.

    • Ekaterina Prigara says:

      September 27, 2016

      That’s intended: we assume that if you use ‘require’ that means that it’s a Node.js module and all variables in a Node.js module are local.

  6. Yape says:

    November 16, 2016

    Is there any way to get Node.js coding assistance for single .js files? I use Node.js to write a lot of local tools, and I’d just like the ability to get “intellisense” on Node calls without having to create a project for a single .js file.

    • Ekaterina Prigara says:

      November 16, 2016

      You can enable the Node.js library in Preferences | Languages & Frameworks | Node.js and npm and then hit the Usage scope… button and select the files that use Node.js.

  7. hangu Kang says:

    November 24, 2016

    i have tow questions.
    it is possible, could you answer to me?

    1. Node.js v– Core Modules and Node.js Globals two merge into Node.js Core library ( in Preferences | Languages & Frameworks | Node.js and npm)

    2, then.. after click ‘Node.js Core library’ enable , i wanna check the options but there is only ‘Node.js Core’ without ‘Node.js Globals’ libraries in javascript Preferences | Languages & Frameworks

    • Ekaterina Prigara says:

      November 24, 2016

      I’m not sure I understood your first question correctly. There’s only one library related to Node.js APIs now, it’s called Node.js Core. You can enable that, as described in this blog post, in Preferences | Languages & Frameworks | Node.js and npm.

  8. James Pedid says:

    December 16, 2016

    One challenge I face with WebStorm’s coding assistance is the usage of mapping paths with webpack’s resolve functionality.

    For example, let’s say I have a project with a directory structure of myProjectDir, myProjectDir/src, myProjectDir/app1, myProjectDir/app2, myProjectDir/common, etc. From a file inside of myProjectDir/app1, if I want to find a file using normal node.js, I have to use relative paths, e.g. require(‘../../common/util.js’) in order to load the contents of that file.

    With webpack, however, I can instead set up a resolve function that will map any file that starts with ‘common’ to be mapped to the path myProjectDir/src/common, so then I can require util.js in my app file as require(‘common/util’). This is much more convenient than relative paths because it provides an anchor to which I can name my special folders that have shared content, or my projects such as app1 and app2.

    It would be nice to have access to this functionality in WebStorm (also PyCharm), but unforunately I don’t expect you guys to examine the webpack config for this information; and to be honest, I don’t want to you do so either. Instead, I want to be able to set up these aliases in WebStorm (PyCharm)’s javascript setup, and then have you guys recognize the files based on the aliases I set up there, for the purposes of coding assistance.

    • Dennis Ushakov says:

      December 17, 2016

      Hi James,

      you can follow WEB-13409 and WEB-17254 for intelligent support of WebPack requires. You can set it up manually in WebStorm by selecting myProjectDir/src -> Right click -> Mark as -> Resource root. Unfortunately this won’t work in PyCharm

  9. David Kezi says:

    March 24, 2017

    Good day, i had a similar issue when using Fetch Api instead of XMLHttp but i still get the “unresolved function or method fetch()” even after enabling nodejs core in the preferences.. please help! I’m using webstorm 2017.1

    • Ekaterina Prigara says:

      March 24, 2017

      Hello David, I have replied you on Twitter, however I thought you were referring to browser Fetch API. What do you mean by Node.js Fetch API? If you want to use this module https://github.com/bitinn/node-fetch, then it should be enough just to add it to your package.json file and install. You don’t need to do the steps I mentioned on twitter.

      • Alex says:

        June 23, 2017

        Yes, he’s talking about browser fetch api, not about NodeJs. This one https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch.
        Same problem in last PhpStorm. It says unresolved function or method name inspite of absolutely working code. What should be enabled to make IDE aware of this method?

        • Ekaterina Prigara says:

          June 25, 2017

          Sorry, the blog post above is about Node.js, so I assumed that the question is about Node.js.
          To provide the IDE with the Fetch API definitions it’s recommended to use a TypeScript definition file – in Preferences | Languages & Frameworks | JavaScript | Libraries click Download and start typing “isomorphic fetch”, select the item and click Download.

          • Alex says:

            June 26, 2017

            Added as you advised but it’s not changed anything, “fetch” still says “unresolved function or method”. I’m using this method in jsx file if it changes something.

            • Ekaterina Prigara says:

              June 26, 2017

              Can you please send us a screenshot of the Library page in Preferences and a screenshot of your file. You can link to them in the comment here or contact our tech support using the Submit request link here: https://intellij-support.jetbrains.com/hc/en-us/?webstorm
              Thank you!

  10. Halisson Alves says:

    June 2, 2017

    Nice… thanks to share with us!

  11. Pruthvi says:

    July 27, 2017

    I can’t enable Node js core library

    • Ekaterina Prigara says:

      July 27, 2017

      Can you please provide a bit more info about that? What WebStorm version do you use? What Node.js version do you have? Is it selected on the Preferences | Languages & Frameworks | Node.js and npm page?

    • Elie says:

      July 30, 2017

      Same problem for me! It was working before but now every time I enable node.js coding assistance the `Configuring Node.js Support…` popup window appears as always but once the popup has disappeared nothing changes. WebStorm still not recognize `require` and node libraries like `fs` or `readline`. I tried to restart, enable it through default settings, project settings and through code hints but nothing works.

      WebStorm 2016.3.2
      Build #WS-163.9166.30, built on December 12, 2016

      • Ekaterina Prigara says:

        July 31, 2017

        What Node.js version do you use? Please try the latest WebStorm 2017.2. We don’t test new Node.js version with the older IDE versions, so it might have happened that some changes in node broke the integration.

  12. Troy says:

    September 12, 2017

    I can enable coding assistance, but it doesn’t appear to work within a typescript file, only within javascript files.

  13. Eli Ponyatovski says:

    October 24, 2017

    When I am trying to enable NodeJs support it waits some time on the progress bar and then quits without adding the support. Any idea?

    • Eli Ponyatovski says:

      October 24, 2017

      Apparently it only works with Node 7.10.0 and not 8.7.0

    • Ekaterina Prigara says:

      October 24, 2017

      What WebStorm version and OS do you use? Can you please send us the IDE logs (menu Help – Show logs)? You can send them to our issue tracker or tech support. Thanks!

  14. mo says:

    November 25, 2017

    Did not work with node.js 9.1.0

    • lena_spb says:

      November 25, 2017

      what doesn’t work for you namely?

  15. Vlad says:

    December 8, 2017

    Is there any plugin to display a dependency version in the editor ?
    import {Observable} from “rxjs/Observable”; // rxjs@^5.5.5

    • Ekaterina Prigara says:

      December 11, 2017

      No, sorry, we are not aware of such plugin.

  16. Sooriyan C says:

    January 22, 2018

    I Will Try to
    But , Error is occur
    “file node.js not directory”
    what will be do

  17. David says:

    March 17, 2018

    Same problems here with the latest version of WebStorm, no autocomplete for express objects in particular, and overall autocomplete for non-core node modules that are imported and used in the project is very poor.

    WS v2017.3.4 on Mac

    • Ekaterina Prigara says:

      March 19, 2018

      Hello David,
      Can you please tell us a bit more about the problems?
      For some modules that are written in a very dynamic way (and Express is one of them), we recommend adding the TypeScript definitions files to the WebStorm’s libraries. To do that, please press Alt-Enter on the require statement and select ‘Install TypeScript definitions’:

      • Diego Herrera says:

        December 21, 2018

        It’s working for me

  18. Pavel says:

    October 25, 2018

    Hello! I can’t enable this feature =(

    When I trying enable code assistance pressing on the button “Enable” nothing happens. I try do it from “Languages and Frameforks” and hints – nothing.
    Node interpreter: ~/.nvm/versions/node/v8.4.0/bin/node
    Webstorm: 2018.2.5. And i had this problem on previous version (2017…)

    In “Languages and Frameforks / javascript / libraries” i don’t see Nodejs Core Modules

    Bash: which node // /Users/$username/.nvm/versions/node/v8.4.0/bin/node

    • Ekaterina Prigara says:

      October 25, 2018

      Hello,
      Is there any error message when you check the checkbox? Please send the IDE logs (menu Help – Compress logs and show in Finder) and a screenshot of the Node.js and npm page in Preferences to our tech support: https://intellij-support.jetbrains.com/hc/en-us/requests/new
      Thanks!

      • Pavel says:

        October 26, 2018

        Support helped me.
        Problem was in vm.options (“Help | Edit Custom VM Options…”)
        Removing -Djava.net.preferIPv6Addresses=true should help.

        Thanks.

        • Ekaterina Prigara says:

          October 26, 2018

          Thanks for the update!

  19. jaydeep rajput says:

    December 22, 2018

    i am facing the same the same problem . but there is option for enabling core lib in webstrom
    snapshot of that is given in link https://photos.app.goo.gl/i51LzTeCrvSn4nbr9

    • lena_spb says:

      December 24, 2018

      Hello!

      not sure I understand what problem you refer to… Do you have issues resolving Node.js core functions, like require(), despite having the coding assistance enabled? It must be https://youtrack.jetbrains.com/issue/WEB-35836. Please disable Node.js coding assistance in Settings | Languages & Frameworks | Node.js and NPM, apply and then re-enable it to get libraries downloaded – does it help?