How to configure WebStorm / PhpStorm project so that JS code intelligence works well for Node.js projects?
Solution 1
This has been fixed in WebStorm 7, see http://youtrack.jetbrains.com/issue/WEB-1927.
Solution 2
To do this in the UI (tested from PyCharm 2.7.3, result shown in PhpStorm 6.0.3):
Add JavaScript Libraries
File → Settings
(Project Settings) → JavaScript → Libraries
[Add...] →
Name: node_modules
Visiblilty: [x] Current project
[Attach...]
{select project's node_modules folder}
{repeat for bower}
Exclude Folder from Project
(Project Settings) → Project Structure
Right-click on folder → [Excluded]
To do this from project's .iml file:
Changing the project's .iml
to the following:
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/bower_components" />
<excludeFolder url="file://$MODULE_DIR$/node_modules" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="node_modules" level="application" />
<orderEntry type="library" name="bower_components" level="application" />
</component>
</module>
Caused the editor to exclude node_modules and bower_components, but make them available for completion and library search
Tested in PyCharm, IntelliJ, and WebStorm.
Solution 3
Unfortunately there is no easy "right" way. You can exclude all node_modules directories that are located inside top level node_modules directory.
It will make completion better, but not ideal.
Further discussion is here: http://devnet.jetbrains.net/message/5468926 .
Solution 4
You can download a plugin for Node.js integration: http://plugins.intellij.net/plugin/?webide&pluginId=6098
Related videos on Youtube
Borek Bernard
For the past few years, I've been trying to bring Git version control to WordPress via a project called VersionPress. We're also working on a cloud-hosted version, VersionPress.com. I love TypeScript, Node.js, Kubernetes and clean code.
Updated on September 16, 2022Comments
-
Borek Bernard over 1 year
In WebStorm / PhpStorm / IDEA, there are quite a lot of code intelligence feature for JavaScript built in. However, when developing a Node.js application, including everything from
node_modules
complicates matters with things like "Navigate to file" (I don't want the IDE to offer me tens ofpackage.json
s fromnode_modules
folder, for example). But excluding thenode_modules
folder entirely has its own problems - there is no code completion etc.So what's the "right" way to approach this in WebStorm? Should I include only some of the files from
node_modules
? Or exclude everything from there and somehow use the concept of project or global libraries?Thanks.
-
Jeff Whelpley over 10 yearsNote that after testing this out in WebStorm 7 EAP, I found that this did not work. I filed a bug report and JetBrains says that it will be working with WebStorm 7 EAP build 130.1710.
-
vaughan over 10 yearsThis is the answer. Check the event log and it will show this message:
Node.js project detected: To separate your sources from the dependencies, create "Node.js Dependencies" JavaScript library from node_modules folder (show balloon)
. -
Anthony Hildoer about 10 yearsIf you don't have that event still, its manually done like this: open preferences->Project Settings->JavaScript->Libraries. Check "Node.js Globals". Then highlight Node.js Globals, and click "Configure". In the window that opens, click Project Settings->Libraries. Click + at the top of the middle section. Select JavaScript from the drop down. Browse to the node_modules directory and select it. Then the "choose roots" window opens. Select only node_modules. If your node_modules dir contains modules already, you will have to manually deselect all of them. Click ok until all windows are closed.
-
Shane about 10 yearsNot fixed in my copy as well.