JavaScript Libraries in Intellij IDEA 10

JetBrains

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.

“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.

Subscribe to IntelliJ IDEA Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!