JavaScript Libraries in Intellij IDEA 10

Meeting the needs of developers working with JavaScript, Intellij IDEA 10 adds a new feature to allow specifying global JavaScript libraries that can be used across multiple projects. For a particular project you can set a scope for each library by defining files and directories the library is applicable to. If you already have JavaScript files in your project and keep your current settings, code completion and navigation would work as before.

Terminology

JavaScript library is a collection of JavaScript files. Each of these files may contain a debug (uncompressed) version or a release version, also known as minified. Code completion works both for debug and release versions but but when going to declaration, you won’t be taken to the minified version since there’s not much sense to descramble it yourself as you may know.

Getting Started

First, you need to create a new JavaScript library and tell Intellij IDEA which files it should contain. You can do this both for .js files already in your project and/or for those located outside project root directory.
Let’s start with an empty project and add an external JavaScript library stored locally on your PC:
1. Open “Project Structure” dialog and choose “Global Libraries”.
2. Click [+] button and choose “JavaScript” library type from the drop-down list.
3. Specify your library name in the “Name” field.

Now you are ready to add files to the library. If you have a preloaded debug version, you can add it by clicking “Attach Debug Version…” button and choosing a .js file containing the uncompressed JavaScript code. Similarly you can add release files using “Attach Release Version…” button. At this point it’s up to you to decide which file contains a debug and which a release version.

If you choose a directory after clicking, for example, “Add Debug Versions From…”, Intellij IDEA will automatically scan this directory for uncompressed .js files and will add them under “Debug” node in project structure. “Add Release Versions From…” works in a similar way. This comes in handy when you want to create a JavaScript library from multiple .js files located in a single directory.

Click [OK] in Project Structure dialog when you are done with your changes. From now both code completion and navigation will automatically start working for the newly created library for any file containing JavaScript code.

The below example shows code completion from jQuery library containing a jquery-1.4.4.js library file.
JQuery code completion

“Download Library” Intention

There is even an easier way to create a library containing just one .js file if this file is located in the Internet and can be accessed over HTTP. For example, if a JavaScript library is available online. Here is a small example of HTML file containing a link to jQuery on jquery.com:

Assuming that jQuery library hasn’t been defined yet, you can move the caret to “http://code.jquery.com/…” string, press [Alt]+[Enter] and choose “Download Library” from the list of available intentions:

It may take a while before the library is downloaded but eventually you will see the message “Successfully downloaded http://code.jquery.com/jquery-1.4.3.js”. If you open Project Settings, the library will be already there, in Global Libraries section:

The downloaded file is stored in your local file system for code completion and navigation to work.

Narrowing Down Completion Variants by Defining a Library Scope

By default completion works from all global JavaScript libraries and JavaScript files located under your project root which may quickly result in a long and almost unusable completion list. You can change this by specifying which JavaScript files are applicable to a file or a group of files located under the same directory. To do that you can use “Settings”/”JavaScript”/”Libraries”/”Usage Scope”. Simply select the libraries you would like to use from a drop-down list. To remove a library just select it again.

I have created 3 libraries for my example below: jquery-1.4.3, jcrop and thickbox:

example1.js uses jquery-1.4.3 and thickbox because directory/project-level libraries are added to libraries defined for a particular file. Similarly example2.html uses jquery-1.4.3 and jcrop. Code completion in example1.html will take all the 3 libraries plus any JavaScript files under the project root because restrictions are defined neither for itself nor for any of its parent directories/project.

The described library mappings are stored at project level in a separate project configuration file.

Download the latest IntelliJ IDEA X EAP and try this.

This entry was posted in New Features and tagged , , . Bookmark the permalink.

9 Responses to JavaScript Libraries in Intellij IDEA 10

  1. Stephen Friedrich says:

    If only I could add a folder recursively.
    ExtJS sources are organized into 21 (!) folders…

  2. Stephen Friedrich says:

    Err, you describe in detail how you set up all that stuff, but what are the actual benefits? Ok, now I have setup ExtJS by 21 * adding folder contents.

    The two points that I understand is that you can limit applicability of libraries to certain folder/files plus you can re-use a global library across projects.
    Both points do not help me at all: I use ExtJS everywhere in the project and I prefer to use only project libraries, so everyone is ready-to-go by just checking out the IDEA project files.

    How about packaging? Can I specify where to put that library in an artifact?

    How is the minimized version ever used by IDEA?

    If I “Go to File” and type “c*js”, I still see dozens of ExtJS files in the list and have a hard time finding the two files that belong to my project. I think the library files should only be included if I select “Include non-project files”.

    Also if I “Find Usages” on a JS function, there’s no library scope as there is in Java. For example if I search for usages of Ext.isArray() IDEA finds 105 usages, but only 3 are in my own code, the rest in ExtJS itself. It would be great to be able to focus on my own code.

  3. Geekycoder says:

    Wow… that is a awesome feature. This kind of attention to detail is what make Intellij stands up from other competitor.

  4. Rustam Vishnyakov says:

    Stephen,
    the original goal was to limit a number of completion variants a user may get for a JS code. You may have global libraries under your project root and in this case you still can control which libraries are applicable to certain folders and files. As for minified versions, they are used in some projects without their uncompressed counterparts (don’t ask me why). But despite not being able to navigate to such code, you still can get a completion from it.
    Starting from the next EAP you can also add files recursively, for example, by selecting the root “src” directory in ExtJs. You may also want to create several libraries for core, widgets etc. instead of putting everything to one if you later want to restrict completion for your project JavaScript files. But of course it remains up to you.
    The rest of your comment sounds to me like a number of feature requests. It would be great if you could submit them at http://youtrack.jetbrains.net.
    Thanks!

  5. Sergey Belov says:

    What about supporting CommonJS modules specification?
    http://wiki.commonjs.org/wiki/Modules

  6. Rustam Vishnyakov says:

    Sergey,
    CommonJS support is a subject of a particular JavaScript engine, not IDE. IDE can’t introduce neither new language elements nor any tricky tags inside the code because it may confuse other developers not using the same IDE.

  7. Sergey Belov says:

    Idea can support CommonJS modules as a facet (like Django facet for a python editor). It should support require() function and resolving of exported objects through it for autocompletion to word, inspections and so on.

  8. Sergey Belov says:

    *for autocompletion to work

  9. IainRushton says:

    Does this actually work in 10.5.2 ? I followed the instructions pretty closely, but still get an large number of completion and navigation options. This is an essential feature for me. I basically set the root of the project to a small number of files which exist in the project. Hoping only they would come up as navigation or completion options.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">