CLion Help

Configuring JavaScript Libraries

On this page:


When working in CLion, you can use various JavaScript libraries and frameworks with full coding assistance at displosal. The only thing you need is "introduce" the required libraries to CLion so they are recognized and references to them are successfully resolved.

Predefined and custom libraries

Right from CLion, you can download and install a number of the most popular JavaScript libraries, such as: Dojo, ExtJS, jQuery, jQuery UI, Prototype, and others.

CLion also provides the ability to set up custom JavaScript libraries that contain previously downloaded external JavaScript libraries and frameworks. Configured libraries can be used in code completion, highlighting, navigation, and Documentation Lookup.

To enable Documentation Lookup for symbols defined in an external library or framework, provide a link to its documentation. Upon pressing Shift+F1 with the cursor positioned at the symbol in question, CLion invokes this link and opens the documentation page in browser.

For jQuery, jQuery UI, Ext JS, Prototype, and Dojo library files, CLion automatically detects links to the library documentation.

To get all the above mentioned coding assistance for a library or a framework, you need to configure it as a CLion library and specify the library scope by associating the library with your project or its part, so you can reference the library from the files within this scope, get code completion, and retrieve definitions and documentation.

Please note, that configuring a framework as a CLion library and associating it with a project only ensures coding assistance in the development environment, that is, while you are working in CLion. To use a framework or library in the production environment, make sure the relevant version of the framework is available on the server.

Visibility and Scope

Each CLion library is characterized by its visibility status and scope. The visibility status of a library determines whether it can be used in one project (Project) or can be re-used at the IDE level (Global).

  • Once configured, a Global library can be associated with any of CLion projects. The library itself can be located wherever you need, its settings are stored with other CLion settings in the dedicated directories under the CLion home directory.

    The advantage of configuring a framework as a global library is that you can store such library in one location and re-use it in unlimited number of your projects without copying the library under the project root every time.

    The disadvantage of this approach is that to enable team work on the project all the team members have the library stored on their machines in the same location relative to the project root.

  • A Project library is visible only within one single project. Therefore a project library can be associated only with this project or its part, in other words, the scope of a project library is restricted to the current project or its part. This means that project libraries cannot be re-used, so if you later try to use a framework configured as a project library with another project, you will have to configure the library anew.

    The advantage of configuring a JavaScript framework as a project library is that you can share the library definition among other team members through the project settings so each developer does not have to configure the library separately,

    To use a self-developed JavaScript library, configure it as a CLion library.

  • Predefined libraries bring JavaScript definitions (also known as “stubs”) for the standard DOM, HTML5 and EcmaScript API, as well as for Node.js global objects. These libraries make the basis for coding assistance in accordance with the API provided by the corresponding JavaScript engine. By enabling a certain predefined library you can ensure that your code fits the target environment.

    Predefined libraries are by default enabled in the scope of the entire project. A predefined library can be disabled or associated with another scope but it cannot be deleted.

The scope of a library defines the set of files and folders in which the library is considered as library, that is, it is write-protected, excluded from check for errors and refactoring, affects the completion list and highlighting.

Viewing the libraries associated with a file

  1. Open the file in the editor.
  2. Click the Hector icon hector.png on the Status bar. The pop-up window that opens shows the list of libraries associates with the current file. To change the list, click the Libraries in scope links and edit the scope settings in the Manage Scope dialog box that opens.

See Also

Last modified: 7 May 2015