How to use AMD code completion with webstorm and requirejs?
NickName:jax Ask DateTime:2013-11-20T10:16:38

How to use AMD code completion with webstorm and requirejs?

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

Copyright Notice:Content Author:「jax」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/20086068/how-to-use-amd-code-completion-with-webstorm-and-requirejs

More about “How to use AMD code completion with webstorm and requirejs?” related questions

How to use AMD code completion with webstorm and requirejs?

I have something like this define(function(require) { var Router = require('./router'); var Backbone = require('backbone'); var Log = require('log'); ... Apparently Webs

Show Detail

Webpack with requirejs/AMD

I'm working on a new module for an existing project that still uses requireJS for module loading. I'm trying to use new technologies for my new module like webpack (which allows me to use es6 load...

Show Detail

requirejs shim amd library dependencies

I understand how to use requirejs config to set up dependencies between non-AMD libraries like backbone and underscore. It's my understanding that shim is only for non-AMD libraries. How do I use

Show Detail

RequireJS AMD project with external, not single-file amd dependencies

Because I want to be flexible, I want to create 3 SEPARATE small JavaScript RequireJS AMD projects (utils, mvc, widgets). I do not want them to be in one large project. They should not be executable

Show Detail

Making requirejs modules AMD compliant

I'm currently building an app where the frontend is doing a lot of the heavy lifting. To keep everything neat and organised I'd like to use requirejs. However, to use require.js to its' full extent...

Show Detail

JavaScript code coverage in RequireJS / AMD modules

Short and seemingly stupid question because so simple and you'd think ubiquitous: has anyone gotten any kind of code coverage to work within a RequireJS front-end project (non NodeJS)? Seems like a

Show Detail

compile RequireJS to remove AMD dependency

I'm using RequireJS to manage my dependencies in development, but at production I would like to remove all dependencies on an AMD loader. It looks like the RequireJS optimizer creates a file that s...

Show Detail

WebStorm Code Completion

I am using generator-webapp and at app/index.html I don't have code completion for Bootstrap classes. In settings WebStorm recognises the Bootstrap dependency.

Show Detail

RequireJS import documentation

Im using in WebStorm editor. My project is using RequireJS with AMD. There is an example of code: dep.js define([], function () { var exports = { helloWorld: function() { console.log("Hello

Show Detail

How to enable Code Completion Auto pop-up in WebStorm?

I've been trying to get Code Completion to work on the current version of WebStorm (2017.3), but to no avail. Specifically when working with HTML code completion seems to only work when I press the

Show Detail