PhpStorm 2016.2 Help

Configuring JavaScript Libraries

On this page:

Basics

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

Predefined and custom libraries

Right from PhpStorm, you can download and install a number of the most popular JavaScript libraries, such as: Dojo, ExtJS, jQuery, jQuery UI, Prototype, and others. Once installed, these libraries, by default, are visible in all files within the project.

You can also download any other JavaScript libraries and frameworks or even develop JavaScript libraries yourself, if necessary. To use such downloaded or self-developed libraries, you need to set them up as custom PhpStorm JavaScript libraries. 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, PhpStorm invokes this link and opens the documentation page in browser.

For jQuery, jQuery UI, Ext JS, Prototype, and Dojo library files, PhpStorm 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 PhpStorm 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 PhpStorm library and associating it with a project only ensures coding assistance in the development environment, that is, while you are working in PhpStorm. 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 PhpStorm library is characterized by its visibility status and scope.

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, but only affects the completion list and highlighting.

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 PhpStorm projects. The library itself can be located wherever you need, its settings are stored with other PhpStorm settings in the dedicated directories under the PhpStorm 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 a project all the team members should 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. 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,

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

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 lists the 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.

Downloading and installing a JavaScript-related library from PhpStorm

PhpStorm provides a dedicated user interface for downloading and installing the most popular official JavaScript libraries. Using this interface, you can download and install Dojo, ExtJS, jQuery, jQuery UI, Prototype, and other libraries.

Besides the above listed official libraries, you can download stubs for TypeScript definition files.

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X. Expand the Languages and Frameworks node, and then click Libraries under JavaScript.
  2. The JavaScript. Libraries page that opens shows a list of all the already available libraries. Click Download.
  3. In the Download Library dialog that opens, choose the group of libraries in the drop-down list. The available options are Official libraries and TypeScript community stubs. Depending on your choice, PhpStorm displays a list of available libraries. Select the one to be downloaded and installed, and click Download and Install. You return to the JavaScript Libraries page where the new library is added to the list. CLick OK to save the settings.

Configuring a custom JavaScript library

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X. Expand the Languages and Frameworks node, and then click Libraries under JavaScript.
  2. The JavaScript. Libraries page that opens shows a list of all the already available libraries. Click Add.
  3. In the New Library dialog box that opens, specify the name of the library, the framework to configure the library from, and framework version to use.
  4. Specify the library visibility:
    • To enable associating the library with the current project only, choose Current project.
    • To make the library available in any PhpStorm project, choose Global.
  5. Create a list of files to be included in the library:
    1. Click the Add button add next to the list of library files and choose Attach Files or Attach Directory on the context menu, depending of whether you need separate files or an entire folder.
    2. Select the required file, files, or entire directory in the dialog box that opens. PhpStorm returns to the New Library dialog box where the Name read-only field shows the name of the selected library file or the names of relevant library files from the selected directory.
    3. In the Type field, specify which version of library you have downloaded and are going to add.
      • Choose Debug if you are adding a library file with uncompressed code. This version is helpful in the development environment, especially for debugging.
      • Choose Release if you are adding a library file with minified code. This version is helpful in the production environment because the file size is significantly smaller.

      It is recommended that you always have a debug version on hand along with the minified one. Minified code is hard to read and hard for PhpStorm to handle. When a debug version is available, PhpStorm automatically detects and ignores the minified file and retrieves definitions and documentation from the debug version.

    4. Specify the URL addresses to access the documentation for library files.
      • To add a link to the documentation for a library, select the corresponding library file, click the Specify button in the Documentation URLs area, and specify the documentation URL in the dialog box that opens.
      • To remove a link, select it in the Documentation URLs and click the Remove button.

Removing a library file

In the New Library/Edit Library dialog box, select the required library file and click the Remove button delete .

Updating the contents of a library

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X. Expand the Languages and Frameworks node, and then click Libraries under JavaScript.
  2. The JavaScript. Libraries page that opens shows a list of all the already available libraries. Select the required library and click Edit.
  3. In the Edit Library dialog box that opens, add library files, remove library files, and change links to documentation as necessary.

Deleting a library

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X. Expand the Languages and Frameworks node, and then click Libraries under JavaScript.
  2. The JavaScript. Libraries page that opens shows a list of all the already available libraries. Select the required library and click Remove.

Specifying the scope to use a library in

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, but only affects the completion list and highlighting.

By default, all predefined libraries and libraries downloaded from PhpStorm provide completion, resolution, highlighting and are treated as libraries in any file within the project. In other words, their usage scope is the whole project.

Libraries that you create yourself are not considered libraries in any of the files unless you specify their usage scope explicitly.

To specify the scope for a library:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X. Expand the Languages and Frameworks node, and then click Libraries under JavaScript.
  2. The JavaScript. Libraries page that opens shows a list of all the already available libraries. Click Manage Scopes.
  3. In the JavaScript Libraries. Usage Scope dialog box that opens, specify the custom JavaScript libraries to use in files and folders within your project. To appoint a library for a file or folder, select the required item in the File/Directory field and choose the relevant library from the Library drop-down list.

    The contents of the list depend on the visibility type of the configured libraries. Global libraries are on the list in all PhpStorm projects. Project libraries are on the list only within the project they were originally configured in.

See Also

Last modified: 24 November 2016