In WebStorm, a library is a file or a set of files whose functions and methods are added to WebStorm's internal knowledge in addition to the functions and methods that WebStorm retrieves from the project code that you edit. In the scope of a project, its libraries by default are write-protected.
WebStorm 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 WebStorm, 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 WebStorm static analysis, and add type information for such symbols.
To resolve globally defined symbols from test frameworks.
post()function is not resolved: WebStorm successfully resolves
To download TypeScript definitions using an intention action
Place the cursor at the
To download TypeScript definitions in the Settings/Preferences dialog
Click Download and in the Download Library dialog that opens, select the required library, and click Download and Install. WebStorm 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 configure Node.js Core
In the Settings/Preferences dialog (Ctrl+Alt+S), click Node.js and NPM under Languages and Frameworks. The Node.js and NPM page opens.
- 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 WebStorm creates a new library for this new version.
Configuring node_modules library
To provide code completion for project dependencies, WebStorm 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. In the Project tool window, the
node_modules is also marked as a library: However, the
node_modules library contains only the modules that are listed in the
dependencies object of your project
package.json file. WebStorm 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 WebStorm suggests irrelevant completion, for example, Node.js APIs in your client-side code. This happens because by default WebStorm uses a library for completion in the entire project folder. WebStorm lets you tune code completion by configuring scopes for libraries.
To configure the scope of a library
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
To configure the scopes of the HTML and Node.js Core libraries
Clear the Enabled checkboxes next to HTML and Node.js Core items.
To configure the scope for the HTML library, click , select the folders with the client-side code, and then choose HTML from the Library drop-down list.
To configure the scope for the Node.js Core library, click again, select the folders with the server-side code, and choose Node.js Core from the Libraries drop-down list. Now WebStorm 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 WebStorm. 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
To change the visibility of a library
By default, WebStorm marks the downloaded library as Global, which means that you can enable and re-use it in any other WebStorm 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.
To configure a custom library
Download the required framework file.
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. WebStorm 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 on the Status bar. WebStorm 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.
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
Select the required library and click Remove.