PyCharm 2018.2 Help

Configuring JavaScript Libraries

In PyCharm, a library is a file or a set of files whose functions and methods are added to PyCharm's internal knowledge in addition to the functions and methods that PyCharm retrieves from the project code that you edit. In the scope of a project, its libraries by default are write-protected.

PyCharm uses libraries only to enhance coding assistance (that is, code completion, syntax highlighting, navigation, and documentation lookup). Please note that a library is not a way to manage your project dependencies.

Using TypeScript community stubs (TypeScript definition files)

In PyCharm, DefinitelyTyped stubs can be configured and used as libraries, which is in particular useful in the following cases:

  • To improve code completion, resolve symbols for a library or a framework that is too sophisticated for PyCharm static analysis, and add type information for such symbols.

  • To resolve globally defined symbols from test frameworks.

The example below shows a piece of code from a Node Express application where the post() function is not resolved:
ws_js_configure_libraries_node_express_symbols_not_resolved_without_d_ts.png
PyCharm successfully resolves post() after you install the suggested TypeScript definition file:
ws_js_configure_libraries_node_express_symbols_resolved_with_d_ts.png
PyCharm lets you download TypeScript definition files right from the editor, using an intention action, or you can do it on the JavaScript. Libraries page.

To download TypeScript definitions using an intention action

  • Place the cursor at the require statement with this library or framework, press Alt+Enter, and choose Install TypeScript definitions for better type information:

    ws_js_libs_download_ts_definitions_intention_action.png
    PyCharm downloads the type definitions for the library and adds them to the list of libraries on the JavaScript. Libraries page:
    ws_js_libs_download_ts_definitions_added_to_lib_list.png

To download TypeScript definitions in the Settings/Preferences dialog

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click JavaScript under Languages and Frameworks, and then click Libraries. The JavaScript. Libraries page opens.

  2. Click Download and in the Download Library dialog that opens, select the required library, and click Download and Install.

    ws_js_configure_libraries_download_ts_community_stubs.png
    PyCharm downloads the type definitions for the selected library and shows them in the External Libraries node in the Project view.

Configuring Node.js Core library

To get code completion and reference resolution for fs, path, http, and other core modules that are compiled into the Node.js binary, you need to configure the Node.js Core module sources as a JavaScript library.

To configure Node.js Core

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click Node.js and NPM under Languages and Frameworks. The Node.js and NPM page opens.

  2. Select the Coding assistance for Node.js checkbox.

    Please note that the Node.js Core library is version-specific. So if you change the version of your Node.js on the Node.js and NPM page, you need to select the checkbox again. After that PyCharm creates a new library for this new version.

Configuring node_modules library

To provide code completion for project dependencies, PyCharm creates a node_modules library automatically so Node.js modules are kept in your project but no inspections are run against them, which improves performance.

ws_js_node_modules_added_settings.png
In the Project tool window, the node_modules is also marked as a library:
ws_js_configure_libraries_node_modules_marked_as_library_root.png
However, the node_modules library contains only the modules that are listed in the dependencies object of your project package.json file. PyCharm does not include the dependencies of dependencies into the node_modules library but actually excludes them from the project.

Configuring the scope of a library

From time to time you may notice that PyCharm suggests irrelevant completion, for example, Node.js APIs in your client-side code. This happens because by default PyCharm uses a library for completion in the entire project folder. PyCharm lets you tune code completion by configuring scopes for libraries.

To configure the scope of a library

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click JavaScript under Languages and Frameworks, and then click Libraries. The JavaScript. Libraries page opens showing a list of all the already available libraries.

  2. Select the required library, clear the Enabled checkbox next to it, and click Manage Scopes. The JavaScript Libraries. Usage Scope dialog opens.

  3. Click icons.general.add.png and select the files or folders that you want to include in the library scope. PyCharm brings you back to the JavaScript Libraries Usage Scopes dialog where the Path field shows the selected files or folders.

  4. For each added file or a folder, from the Library list, select the library which you are configuring.

Example: Configuring the scope for HTML and Node.js Core libraries

When working on a full-stack JavaScript application in PyCharm, you often notice that code completion suggests some Node.js APIs in your client-side code and DOM APIs in the Node.js code. This happens because the HTML library with DOM APIs and the Node.js Core library with Node.js APIs are by default enabled in the whole project. To get rid of irrelevant completion suggestions, you need to configure the scope for these libraries.

To configure the scopes of the HTML and Node.js Core libraries

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click JavaScript under Languages and Frameworks, then click Libraries. The JavaScript. Libraries page opens showing all the libraries that are configured for the current project.

    ws_html_node_libs.png

  2. Clear the Enabled checkboxes next to HTML and Node.js Core items.

  3. Click Manages Scopes. The JavaScript Libraries Usage Scopes dialog opens.

  4. To configure the scope for the HTML library, click icons.general.add.png, select the folders with the client-side code, and then choose HTML from the Library drop-down list.

  5. To configure the scope for the Node.js Core library, click icons.general.add.png again, select the folders with the server-side code, and choose Node.js Core from the Libraries drop-down list.

    Now PyCharm resolves items from the HTML and Node.js Core libraries and suggests them in completion only in files from these chosen project folders.

Configuring a library added via a CDN link

When a library .js file is referenced through a CDN link, it is available for the runtime but is invisible for PyCharm. To add the objects from such library .js file to completion lists, download the file and configure it as an external library.

To download a library

  • Position the cursor at the CDN link to the library, press Alt+Enter, and choose Download library from the list:

    ws_js_configure_libraries_download_from_cdn.png
    The library is downloaded to PyCharm cache (but not into your project) and an information pop-up message appears:
    ws_js_configure_libraries_vue_added_popup.png
    On the JavaScript Libraries page, the downloaded library is added to the list and enabled it in the scope of the current project:
    ws_js_configure_libraries_vue_added.png
    In the Project tool window, the library is shown under the External Libraries node:
    ws_js_configure_libraries_download_from_cdn_show_in_project_view.png

To change the visibility of a library

  • By default, PyCharm marks the downloaded library as Global, which means that you can enable and re-use it in any other PyCharm project. To change this default setting, select the downloaded library in the list, click Edit, and choose Project in the Edit Library dialog that opens.

    ws_js_configure_libraries_change_visibility.png

Configuring a custom third-party JavaScript library

Suppose you have a JavaScript framework file in your project or elsewhere on your machine and you want PyCharm to treat it as a library and not just as your project code that you edit.

To configure a custom library

  1. Download the required framework file.

  2. In the Settings/Preferences dialog (Ctrl+Alt+S), click JavaScript under Languages and Frameworks, then click Libraries. On the JavaScript. Libraries page that opens, click Add. The New Library dialog opens.

  3. Specify the name of the external JavaScript library, click icons.general.add.png, and choose Attach File or Attach Directory from the list. In the dialog that opens, select the file or folder with the downloaded framework.

    ws_js_configure_libraries_add_custom.png

Optionally

  • By default, the library is Global, which means that you can attach it to any other project. To suppress re-using a library, choose Project in the New Library dialog.

  • By default, the library is enabled in the scope of the whole current project. You can change this default setting as described in Configuring the scope of a library.

  • In the Documentation URLs area, specify the path to the official documentation of the library or framework. PyCharm will open this URL when you press Shift+F1 on a symbol from this library.

Viewing the libraries associated with a file

  • Open the file in the editor or select it in the Project view and click hector.png on the Status bar. PyCharm opens a pop-up window that lists the libraries associated with the current file. To change the list, click the Libraries in scope links and edit the scope settings in the Manage Scope dialog that opens.

  • Alternatively, open the file in the editor and choose Use JavaScript Library on the context menu. PyCharm opens a pop-up list with the available configured libraries. The libraries associated with the current file are marked with a tick.
    • To remove the current file from a library's scope, clear the checkbox next to this library.

    • To associate a library with the current file, select the checkbox next to this library.

Deleting a library

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click JavaScript under Languages and Frameworks, and then click Libraries. The JavaScript. Libraries page opens showing a list of all the already available libraries.

  2. Select the required library and click Remove.

Last modified: 21 November 2018

See Also