In PhpStorm, a library is a file or a set of files whose functions and methods are added to PhpStorm's internal knowledge in addition to the functions and methods that PhpStorm retrieves from the project code that you edit. In the scope of a project, its libraries by default are write-protected.
PhpStorm 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.
Just put the tags into your customjs file and put your code inside. PhpStorm will highlight everything correctly then. When comparing PhpStorm vs Visual Studio Code, the Slant community recommends Visual Studio Code for most people. In the question“What are the best JavaScript IDEs or editors?” Visual Studio Code is ranked 1st while PhpStorm is ranked 12th. The most important reason people chose Visual Studio Code is.
Using TypeScript community stubs (TypeScript definition files)
Setup the Default Settings for PHPbstorm, so that all projects start with them by default. Go to Default Settings Languages & Frameworks JavaScript and choose JavaScript language version to ECMAScript 6 Select Prefer Strict mode (SEE THE PICTURE BELLOW!) You may need to repeat this process for the current Settings as well.
TypeScript community stubs are also known as TypeScript definition files, or TypeScript declaration files, or DefinitelyTyped stubs, or just d.ts files.
In PhpStorm, DefinitelyTyped stubs can be configured and used as libraries, which is in particular helpful in the following cases:
To improve code completion, resolve symbols for a library or a framework that is too sophisticated for PhpStorm 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 an Express application where the post() function is not resolved:
PhpStorm successfully resolves post() after you install the suggested TypeScript definition file:
Learn or teach how to code with best-of-industry tools from JetBrains. Free Educational Licenses for JetBrains' tools. PhpStorm IDE provides code refactoring, auto-completion, on-the-fly error prevention, zero-configuration debugging, and an extended HTML, CSS, and JavaScript editor. PhpStorm provides tools and code assistance features for working with databases and SQL in your projects.
PhpStorm lets you download TypeScript definition files right from the editor, using an intention action, or you can do it on the Settings: JavaScript Libraries page.
Download TypeScript definitions using an intention action
Position the caret at the
requirestatement with this library or framework, press Alt+Enter, and choose Install TypeScript definitions for better type information:PhpStorm downloads the type definitions for the library and adds them to the list of libraries on the JavaScript. Libraries page:
Download TypeScript definitions in the Settings/Preferences dialog
In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Libraries.
On the Settings: JavaScript Libraries page that opens, click Download and in the Download Library dialog that opens, select the required library, and click Download and Install.
PhpStorm downloads the type definitions for the selected library and shows them in the External Libraries node in the Project view.
Optionally
PhpStorm enables the downloaded type definitions in the scope of the current project. You can change this scope as described in Configuring the scope of a library below. See also Example: Configuring the scope for HTML and Node.js Core libraries.
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.
Configure Node.js Core
In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | Node.js and NPM.
Select the Coding assistance for Node.js checkbox.
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 PhpStorm creates a new library for this new version.
Configuring node_modules library
To provide code completion for project dependencies, PhpStorm 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. PhpStorm 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 PhpStorm suggests irrelevant completion, for example, Node.js APIs in your client-side code. This happens because by default PhpStorm uses a library for completion in the entire project folder. PhpStorm lets you tune code completion by configuring scopes for libraries.
Configure the scope of a library
In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Libraries. The Settings: JavaScript Libraries page that opens shows a list of all the already available libraries.
Select the required library, clear the Enabled checkbox next to it, and click Manage Scopes. The JavaScript Libraries. Usage Scope dialog opens.
Click and select the files or folders that you want to include in the library scope. PhpStorm brings you back to the JavaScript Libraries Usage Scopes dialog where the Path field shows the selected files or folders.
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 PhpStorm, 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.
Configure the scopes of the HTML and Node.js Core libraries
In the Settings/Preferences dialog Ctrl+Alt+S, go to JavaScript under Languages and Frameworks, then click Libraries. The Settings: JavaScript Libraries page opens showing all the libraries that are configured for the current project.
Clear the Enabled checkboxes next to HTML and Node.js Core items.
Click Manages Scopes. The JavaScript Libraries Usage Scopes dialog opens.
To configure the scope for the HTML library, click , select the folders with the client-side code, and then choose HTML from the Library 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 list.
Now PhpStorm resolves items from the HTML and Node.js Core libraries and suggests them in completion only in files from these chosen project folders.
In the same way, you can configure the scope of the automatically created node_modules library, see Configuring node_modules library.
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 PhpStorm. To add the objects from such library .js file to completion lists, download the file and configure it as an external library.
Download a library
Position the caret at the CDN link to the library, press Alt+Enter, and choose Download library from the list:
The library is downloaded to PhpStorm cache (but not into your project) and a popup with an information message appears:
On the JavaScript Libraries page, the downloaded library is added to the list and enabled it in the scope of the current project:
In the Project tool window, the library is shown under the External Libraries node:
Change the visibility of a library
By default, PhpStorm marks the downloaded library as Global, which means that you can enable and re-use it in any other PhpStorm 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.
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 PhpStorm to treat it as a library and not just as your project code that you edit.
Configure a custom library
Download the required framework file.
In the Settings/Preferences dialog Ctrl+Alt+S, click JavaScript under Languages and Frameworks, then click Libraries. On the Settings: JavaScript Libraries page that opens, click Add. The New Library dialog opens.
Specify the name of the external JavaScript library, click , and choose Attach File or Attach Directory from the list. In the dialog that opens, select the file or folder with the downloaded framework.
Phpstorm For Javascript Tutorial
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. PhpStorm 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. PhpStorm opens a popup 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 from the context menu. PhpStorm opens a 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
In the Settings/Preferences dialog Ctrl+Alt+S, click JavaScript under Languages and Frameworks, and then click Libraries. The Settings: JavaScript Libraries page opens showing a list of all the already available libraries.
Select the required library and click Remove.
Phpstorm Javascript Debug
Those of us who work a lot with JavaScript often face a small issue with Autocompletion which turns to be not a small issue but a big mess.
By default, completion works for all JavaScript files located under your project root. This may lead to a long and almost unusable completion list. Even if you use just a few JavaScript libraries in your project like jQuery, Ext JS and MooFX, you can get up to 4,000 autocompletion hints for Document object coming from all those libraries! And even when you type e.g. “set”, you’ll still end up with about 200 functions starting with “set” . Not a lot of help, is it? 😉
Starting from WebStorm/PhpStorm 2.0 we include a new feature that deals with this very issue. Now, in Settings | Project settings you can specify the JavaScript Libraries that should be used for each file/folder or for the whole project — in other words, their Usage Scope. In the example below we have two libraries defined for our project.
Let’s say we have jCrop and jQuery in our project.
example1.js uses only jCrop because we specifed at project-level that we use this library for the whole project (and thus we may need autocompletion for jCrop in any file).
example2.html will use jQuery and jCrop so autocompletion will be available for both libraries.
Phpstorm Javascript Unresolved Variable
These settings will be stored in the project file, so you can share it via your VCS to other members of your project, so that they will be ready-to-go just by checking out project files.
How to set up JavaScript library in WebStorm/PhpStorm
Open IDE Settings | Project Settings. Select JavaScript | Libraries | Add… and add the files or folders you need.
There is an additional benefit — you will be able to create global JavaScript libraries shared between different projects.
“Download Library” Intention
There is an even easier way to create a library containing just one .js file, if this file is located on the Internet and can be accessed over HTTP. For example, if a JavaScript library is available online. Here is a small example of an 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/Option+Enter and choose “Download Library” from the list of available intention actions:
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”. The downloaded file will be stored in your local file system for code completion and navigation to work.
Download the latest WebStorm/PhpStorm EAP and try this.