How to use AMD code completion with webstorm and requirejs?

Question

I have something like this

define(function(require) {

    var Router = require('./router');
    var Backbone = require('backbone');
    var Log = require('log');

...

Apparently Webstorm is meant to support AMD modules but I can't get it to work, instead a get a massive list of properties from every .js file in the project.

Has anyone had any luck getting Webstorm code completion / refactoring with requirejs modules?

Update, I was able to get it working if I following the following construct

define(['backbone', './router', './log'], function(Backbone, Router, Log) {

however, all paths have to be relative. This is impractical for a path that is configured in require.config, so Backbone does not have code completion.

requirejs.config({
    baseUrl: 'js',

    paths: {
        'backbone' : '../bower_components/backbone/backbone-min',
...

Plus, the above syntax becomes ugly when there are many dependencies...

update 2 The above does not work if you change directory, for example, the Log below does not get code completion:

define(['backbone', './router', '../utils/log'], function(Backbone, Router, Log) {

Answer 1

As commented above, the support for AMD and CustomJS modules is on the roadmap for WebStorm 8. The Early Access Program started recently offers a preview for the AngularJS and Spy-js support only, but the AMD support is in progress and I hope that it'd appear in the next update.

In the meanwhile, you can try the Require.js plugin which provides a partial support for the requirejs modules. You'll get path completion for the module dependencies in the define call, including the requirejs plugins recognition:

The code completion offers so many "false positives" that you'd better learn the interface of your objects and use the "IntelliSense" just as a hint or a help to finish long identifiers; I doubt that the plugin helps the IDE here:

Other features like finding usages or refactoring (rename file and rename object) do not work across the boundary of the module closure. You're better off with the Replace in Path feature...

Notes to the plugin: The path to the config file in the plugin settings is relative to the public directory (the base URL). Also, I'd recommend checking out the binary package from the github project site, which may offer a newer version than the WebStorm plugin manager. (The 0.13 downloaded from there fixed crashing of the plugin with my project, while the WebStorm IDE still offered the 0.12.)

UPDATE: The issue WEB-825 appears to be partially fixed in WebStorm-134.1081 downloadable from EAP. The Find Usages feature recognizes formal parameters initialized from the requirejs dependencies and searches for the module references in the project instead of for the variable reference in the current closure:

Refactoring has improved. Renaming a file in the projtect does affect all module references, but it introduces a relative path to the requirejs base directory (URL). For example, renaming toolitems.js in the src/model directory to menuitems.js changes all references from "model/toolitems" to "../model/menuitems"; providing the requirejs base directory is in the src directory. Renaming a method works in the entire project. Renaming an object works only within the scope of the current closure. Should work globally? You may intentionally choose different object names for the same module export in every closure with Require.js... Still, it is a good habit to use the same names for consistency and an improvement here would be nice.

The Require.js plugin, which brings a partial AMD support to WebStorm 7 seems not to be needed in WebStorm 8 anymore.

UPDATE II: The Require.js plugin still helps the WebStorm 8 users. It recognizes baseUrl and paths from the Require.js configuretion. You can map module path prefixes to different directory roots and still have to "Go To Location" feature working:

// file configured for the Require.js config file path
require.config({
  paths: {
    core: '../core/src',
    recman: '../recman/src',
    app: '.'
  }
});

// Example of a module from the app project
define([
  'core/model/node', 'recman/model/hold, 'app/view/manager'
], function (NodeModel, HoldModel, ManagerView) {
  ...
});