AppCode 2017.3 Help

Configuring JavaScript Libraries

You need to configure JavaScript libraries when all the libraries are loaded dynamically or when you want to exclude a folder with all the library code from search and code analysis.

AppCode distinguishes between predefined libraries and external JavaScript libraries.

  • Predefined libraries bring JavaScript definitions for the standard Web and JavaScript API as well as for Node.js global objects and modules (node_modules). These libraries make the basis for coding assistance in accordance with the API provided by the corresponding JavaScript engine. Enabling a predefined library ensures that your code fits the target environment.
    By default, a predefined library is enabled in the scope of the whole current project. A predefined library can be associated with another scope or disabled entirely but it cannot be removed.
  • An external JavaScript library is a file that you add explicitly to the internal project index in addition to the functions and methods that AppCode retrieves from your project JavaScript files. In the scope of a project, its external libraries are write-protected and are shown in the Project tool window under the External Libraries node.
    AppCode uses external libraries only to enhance coding assistance (that is, code completion, syntax highlighting, navigation, and documentation lookup). The mechanism of external libraries is not a way to manage your project dependencies.

Each AppCode library is characterized by its scope and visibility status.

  • 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 and excluded from code analysis and refactoring contrary to your project code that you edit.
  • The visibility status of a library determines whether it is used in the current project only (Project) or can be associated with any other AppCode project (Global). A Global library itself can be located wherever you need, its settings are stored with other AppCode settings in the dedicated directories under the AppCode home directory.

Using TypeScript community stubs (TypeScript definition files)

DefinitelyTyped stubs help AppCode resolve symbols inside the code that is too sophisticated for static analysis. TypeScript definition files make the basis for resolving globally defined symbols from test frameworks. You can also improve tcde completion for the symbols from a library or a framework by downloading the TypeScript definition file for it. AppCode lets you download TypeScript definition files right from the editor, using an intention action, or on the JavaScript. Libraries page.

To download TypeScript definitions for a library or framework
Place the cursor at the require statement with this library or framework, press ⌥⏎, and choose Install TypeScript definitions for better type information from the list:

ws_js_libs_download_ts_definitions_intention_action.png
AppCode dowanloads 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

Alternatively

  1. In the Settings/Preferences dialog (⌘,), click JavaScript under Languages and Frameworks, and then click Libraries. The JavaScript Libraries page opens.
  2. Click Download on the toolbar. The Download Library dialog opens.
  3. Choose TypeScript community stubs from the drop-down list, select the required library, and click Download and Install.
    ws_js_configure_libraries_download_ts_community_stubs.png
    AppCode downloads the type definitions for the selected library and shows them under the External Libraries node.
By default, AppCode enables the downloaded type definitions and marks them as Global, which means that you can at any time enable and re-use them in any other AppCode project. You can change these default settings as described in Changing the scope of a library below.

Configuring a node_modules library

AppCode automatically marks the node_modules folder as a predefined library. This lets you get code completion for Node.js modules and keep them in your project. At the same time, AppCode does not run any inspections against them which improves performance. The node_modules folder is added to the list of libraries automatically:

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

Configuring HTML and Node.js Core Libraries

When working on a full-stack JavaScript application in AppCode, 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.

  1. In the Settings/Preferences dialog (⌘,), 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 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 add.png again, select the folders with the server-side code, and choose Node.js Core from the Libraries drop-down list.
Now AppCode 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 AppCode. 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 ⌥⏎, and choose Download library from the list:

ws_js_configure_libraries_download_from_cdn.png
The library is downloaded to AppCode 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 as Global 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

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 AppCode to treat it as a library and not just as your project code that you edit.

  1. Download the required framework file.
  2. In the Settings/Preferences dialog (⌘,), 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 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 Changing the scope of a library.
  • In the Documentation URLs area, specify the path to the official documentation of the library or framework. AppCode will open this URL when you press ⇧F1 on a symbol from this library.

Viewing the libraries associated with a file

  1. Open the file in the editor and click hector.png on the Status bar. AppCode opens a pop-up window that lists the libraries associates with the current file.
  2. To change the list, click the Libraries in scope links and edit the scope settings in the Manage Scope dialog that opens.

Changing the scope of a library

  1. In the Settings/Preferences dialog (⌘,), 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 add.png and select the files or folders that you want to include in the library scope. AppCode 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.
See examples from Configuring HTML and Node.js Core Libraries.

Deleting a library

  1. In the Settings/Preferences dialog (⌘,), 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: 14 December 2017

See Also