CLion
 
2023.2
Shortcuts: Windows
Get CLion
You are viewing the documentation for an earlier version of CLion.
  1. Language and framework-specific guidelines
  2. JavaScript
  3. Configure JavaScript libraries

Configure JavaScript libraries

Last modified: 11 October 2023

Required plugin:

Javascript and TypeScript -  The plugin is bundled with CLion and enabled by default.

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

CLion reserves two predefined auto-generated library folders:

note

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

Download TypeScript community stubs (TypeScript definition files)

tip

TypeScript community stubs are also known as TypeScript definition files, or TypeScript declaration files, or DefinitelyTyped stubs, or just d.ts files.

In CLion, 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 CLion 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:

Symbol not resolved without d.ts

CLion successfully resolves post() after you install a TypeScript definition file:

Symbol resolved after d.ts is installed

With CLion 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

  • Place the caret at the import or require statement with this library or framework, press AltEnter, and choose Install TypeScript definitions for better type information:

    Download TypeScript definitions intention action

    CLion downloads the type definitions for the library and adds them to the list of libraries on the JavaScript. Libraries page:

    Type definitions library added to the list

  • Alternatively, open your package.json, place the caret at the package to download a type definition for, press AltEnter, and select Install '@types/<package name>'.

    Install type definitions from package.json

Download TypeScript definitions on the JavaScript Libraries page

  1. Press CtrlAlt0S to open the IDE settings and then select Languages & Frameworks | JavaScript | Libraries.

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

    Add TypeScript definition file

CLion shows the downloaded type definitions in the Project tool window, under the External Libraries node.

Downloaded type definitions are shown under the External libraries node

Optionally

Configure 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_modules library

To provide code completion for project dependencies, CLion 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.

node_modules library added to the list

In the Project tool window, the node_modules is also marked as a library:

node_modules folder 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. CLion does not include the dependencies of dependencies into the node_modules library but actually excludes them from the project.

Configure the scope of a library

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

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

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

In the same way, you can configure the scope of the automatically created node_modules library, refer to Configuring node_modules library.

Configure 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 CLion. 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

  • Place the caret at the CDN link to the library, press AltEnter, and choose Download library from the list:

    Intention action: download CDN library

    The library is downloaded to CLion cache (but not into your project), and a popup with an information message appears:

    CDN library added

    On the JavaScript Libraries page, the downloaded library is added to the list:

    CDN library added to the list

    In the Project tool window, the library is shown under the External Libraries node:

    Downloaded CDN library is shown under the External Libraries node

Change the visibility of a library

  • By default, CLion marks the downloaded library as Global, which means that you can enable and re-use it in any other CLion 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.

    Configure the visibility of a library

Configure a custom third-party JavaScript library

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

Optionally

  • 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. CLion will open this URL when you press ShiftF1 on a symbol from this library.

View the libraries associated with a file

Delete a library

See also

Procedures