Skip to end of metadata
Go to start of metadata

Redirection Notice

Icon
This page will redirect to https://www.jetbrains.com/help/phpstorm/developing-node-js-applications.html in about 2 seconds.

 

This tutorial describes how to configure PhpStorm to work with Node.js projects. We’ll go through the steps required to create a new Express app as an example.

Prerequisites

To work with Node.js in PhpStorm, the following components are required:

  • Node.js interpreter and npm. These can be installed from http://nodejs.org.
  • The NodeJS plugin should be enabled. This can be done through IDE Settings | Plugins by clicking the Install JetBrains plugin... button.

1. Initial configuration

Let's go over the initial configuration steps for working with Node.js in PhpStorm

1.1. Initial configuration for a new Express app

Create a new project using PhpStorm. This can be done from the PhpStorm Welcome screen by clicking New Project, or using the File | New Project... menu.

In the Create New Project dialog, give the project a name and set the project type to Node.js Express App

PhpStorm will then locate Node.js and npm on your computer and populate the Node.js Express App configuration dialog.

Icon

If Node.js is not installed, go to http://nodejs.org/ for more information on installation.

From the Node.js Express App configuration dialog, we can specify several additional options:

  • Paths to Node.js and npm
  • Express version to use
  • Template engine to use
  • CSS engine to use
  • Whether session support should be enabled for the application

Clicking OK will generate a new Express application. PhpStorm will suggest installing or locating Node.js source files that are required for proper code completion.

1.2. Initial configuration for a new project from existing files

If you are working with a Node.js project created from existing files, go to Project Settings | Node.js and NPM and set the path to the Node.js interpreter and download sources of the Node.js Core Modules. This will make sure the Node.js application can be run and autocompletion is supported when editing code.

2. Configuring libraries

From the Project Settings | JavaScript | Libraries, make sure that both Node.js Globals and Node.js Core Modules libraries are checked. It will enable code completion for Node.js:

Icon

When you open a project with node_modules directory in it, PhpStorm will suggest creating a Node.js Dependencies JavaScript library. This action will add these modules to the list of JavaScript libraries used by the IDE for code completion, syntax highlighting, navigation and documentation lookup.

3. Enhancing support for Express framework

To enhance syntax highlighting and code completion for methods from Express module, download the corresponding TypeScript definition file through Project Settings | JavaScript | Libraries by clicking the Download button, selecting TypeScript Community Stubs and searching for Express.

4. Adding npm packages to the project

Working with npm to install additional packages can be done by using the Local Terminal, or by going through Project Settings | Node.js and NPM. From there, we can install, uninstall and upgrade npm packages in our project.

Installing a new package can be done by clicking the Install button and searching for the package to install. We can specify the package version and optionally specify additional command line options passed to npm.

  • No labels