npm and Yarn
AppCode integrates with the npm and Yarn package managers so you can install, locate, upgrade, and remove packages of reusable code from inside the IDE. The Node.js and NPM page provides a dedicated UI for managing packages. Of course, you can also do that from the command line in the built-in Terminal.
AppCode also lets you run and debug npm scripts. AppCode parses
package.json files, recognizing definitions of scripts, shows scripts in a tree view, and lets you navigate between a script in the tree and its definition in the
AppCode detects projects with Yarn workspaces and indexes all the dependencies that are listed in the
package.json files of the workspaces but are located in the root
Before you start
Install and enable the NodeJS plugin as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
To use Yarn, install it as described on the Yarn Official website.
Choosing a project package manager
With AppCode, you can choose whether to use npm or Yarn in a project. By default, AppCode suggests npm. However if you open a project with a
yarn.lock file and Yarn is installed on your machine, AppCode automatically changes the package manager for this project to Yarn. You can also set Yarn as default AppCode package manager.
To choose a package manager for the current project
In the Settings/Preferences dialog (N/A), click Node.js and NPM under Languages and Frameworks. The Node.js and NPM page opens.
From the Package manager list, choose
yarnto use the system default installation. To use a custom installation of a package manager, click Select, and then choose the relevant path to the package manager in the dialog that opens. AppCode automatically uses the chosen package manager when you select the
Projectalias from the Package manager list in the Run/Debug Configuration: NPM dialog. AppCode also uses the path to the chosen package manager every time you invoke the Run 'npm install'/ Run 'yarn install' command or run an npm/Yarn script, see Running and debugging scripts for details.
To set Yarn as the default AppCode package manager
In the Default Settings dialog ( ), click Node.js and NPM under Languages and Frameworks.
On the Node.js and NPM page that opens, choose
yarnfrom the Package manager list. After that, AppCode will suggest Yarn as default every time you create a new project.
Installing packages using the built-in Terminal
As you may know, npm can install packages both globally or as project dependencies or development dependencies, learn more from the npm Official website. With Yarn, you can also install packages globally or as project dependencies, see Yarn Official website for details.
To install a package
npm install --global <package_name>or
yarn global add <package_name>for global installation.
npm install --save <package_name>,
npm install --save-dev <package_name>, or
yarn add <package_name> --devto install the package as a project dependency or a development dependency.
To install all dependencies from a package.json file
Open the embedded Terminal ( ) and type
npm install or
yarn install at the command prompt. As a result you get all the dependencies listed in the
package.json from the current folder. Learn more from Editing package.json.
Installing and upgrading packages on the Node.js and NPM page
AppCode shows all the currently installed packages on the Node.js and NPM page. To open the page, in the Settings/Preferences dialog (N/A), click Node.js and NPM under Languages and Frameworks. Globally installed packages are listed on top. For each package, AppCode shows its currently installed version and the latest available version.
To install a package
Click and in the Available Packages dialog that opens, select the required package.
By default, the latest package version is installed. To install another one, select the Specify version checkbox and choose the required version from the list.
The default installation is local. To use another installation type, select the Options checkbox and type
-gfor global installation or
--save-devto install the package as a dependency/development dependency. Learn more from the npm Official website and Yarn Official website.
To view the location of a package
Hover the mouse pointer over the package name. AppCode shows the path to the package in a tooltip.
To upgrade a package to the latest version
Select the package in the list and click .
To remove a package
Select the package in the list and click .
AppCode helps you handle your project dependencies in
package.json files providing extensive coding assistance:
Code completion for package names.
Information on the latest available package version.
Quick documentation look-up for packages.
To install the dependencies from a package.json file, do one of the following:
Open the relevant
package.jsonfile in the editor or select it in the Project tool window and choose Run 'npm install' on the context menu.
Click Run 'npm install' in the pop-up window: AppCode shows this pop-up window when the dependencies are not installed yet or when they have changed. If you close the pop-up window or turn it off by choosing Don't show again, you can still install the dependencies using the Run 'npm install' action or in the built-in terminal.
To update your project dependencies
AppCode also runs an inspection that checks whether the packages from
devDependencies are installed and their versions match the specified range. If the inspection detects any mismatch, it suggests a quick-fix. To apply it, press N/A and choose Run 'npm install' from the list:
Running and debugging scripts
You can launch npm or Yarn scripts from a
package.json file in the editor, from a tree of scripts in the dedicated npm tool window, according to a dedicated run configuration, or automatically, as a start-up or a before-launch task.
The results of script execution are displayed in the Run Tool Window. The tool window shows the npm or Yarn script output, reports the errors occurred, lists the packages or plugins that have not been found, etc. The name of the last executed script is displayed on the title bar of the tool window.
During a script debugging session, AppCode opens the Debug Tool Window where you can step through the program, stop and resume the program execution, examine it when suspended, view actual HTML DOM, etc.
To enable debugging a script
$NODE_DEBUG_OPTION to its definition in the
package.json file, for example:
Running and debugging scripts from package.json
AppCode lets you quickly launch single scripts from
package.json files. To run or debug several scripts, use a run configuration or the npm tool window.
package.json file in the editor, click in the gutter next to the script, and choose Run <script_name> or Debug <script_name> on the context menu.
Running and debugging scripts from the npm tool window
The tool window opens when you select a
package.json file in the Project tool window or open it in the editor and choose Show npm Scripts on the context menu. As soon as you invoke npm or Yarn, it starts building a tree of scripts defined within the
scripts property of the
package.json file on which it was invoked. If you have several
package.json files in your project, you can build a separate script tree for each of them and run scripts without dropping the previously built trees. Each tree is shown under a separate node.
To open the npm tool window if it is not opened yet
To build a tree of scripts in an already opened npm tool window
In the npm tool window, click on the toolbar and choose the required
package.json file from the list. By default, AppCode shows the
package.json file in the root of your project. If you have another
package.json file, click Choose package.json and select the
package.json file you need in the dialog that opens. AppCode adds a new node with the path to the chosen
package.json file on its title and builds a scripts tree under the new node.
To re-build a tree
To sort the scripts in a tree by their names
To run one script
To debug one script
Select the script in the tree and choose Debug <script_name> on the context menu.
To run or debug several scripts
Running scripts by a run configuration
When you run or debug scripts from the editor or from the npm tool window, AppCode automatically creates temporary run configurations. Besides using them, you can create and launch your own npm run configurations.
Click on the toolbar and select npm from the pop-up list. The Run/Debug Configuration: npm dialog opens.
Specify the CLI command to execute, the scripts to run (use blank spaces as separators), and the location of the
package.jsonfile where these scripts are defined. Optionally, type the command line arguments for executing the scripts.
- Specify the Node.js interpreter to use. If you choose the
Projectalias, AppCode will automatically use the project default interpreter from the Node interpreter field on the Node.js and NPM page.
In most cases, AppCode detects the project default interpreter and fills in the field itself. You can also choose another configured local interpreter or click and configure a new one.
Specify the package manager to use. If you choose the
Projectalias, AppCode will use the default project package manager from the Node .js page. You can also choose the relevant package alias (
yarn) or specify an explicit path to a custom installation of a package manager.
Select the newly created run configuration from the list on the main tool bar and then click . The output is displayed in the Run tool window.
Running scripts automatically on start-up
If you have some scripts that you run on a regular basis, you can add the corresponding run configurations to a list of startup tasks. The tasks will be executed automatically on the project start-up.
Running scripts as before-launch tasks
Open the Run/Debug Configurations Dialog dialog by choosing on the main menu, and select the required configuration from the list or create it anew by clicking and choosing the relevant run configuration type.
In the dialog box that opens, click in the Before launch area and choose Run npm script from the drop-down list.
In the NPM Script dialog box that opens, specify the npm run/debug configuration settings.