IntelliJ IDEA is widely recognized as one of the best Java development platforms in the industry. This series of tutorials explores how to combine IntelliJ IDEA with your favorite language, platform, or framework. This tutorial introduces you to developing modern Web, mobile, and desktop applications using JavaScript and Node.js. Let’s have a try

Note: This feature is only supported in Ultimate releases.

With IntelliJ IDEA, you can develop modern Web, mobile, and desktop applications using JavaScript and Node.js.

IntelliJ IDEA supports JavaScript and TypeScript programming languages, React and Angular frameworks, and provides tight integration with a variety of Web development tools.

This tutorial introduces you to a short introductory guide that takes you from creating a Web application to debugging and testing it.

Create a new application

  1. Select the file | | new from the main menu, select the project, or click the new project button on the welcome screen.

  2. In the Project Categories and Options dialog box (the first page of the New Project wizard), select Static Web in the left pane.

  3. In the right pane, select Static Web again, and then click Next.

  4. On the second page of the wizard, specify the project name and the path to the folder where the project-related files will be stored. Click Finish.

Start with an existing JavaScript application

If you want to continue developing your existing JavaScript application, open it in IntelliJ IDEA, select the version of JavaScript you want to use, and configure the library in it. (Optional) Download the required NPM dependencies.

Open an existing application source on your computer

Click on the welcome screen open or select file | drive from main singles. In the dialog box that opens, select the folder to store the source.

Check out application sources from version control

  1. Click Check out from Version Control on the Welcome screen or select VCS to view version control from the main menu. :

  2. Select your version control system from the list.

  3. In the VS-specific dialog box that opens, type your credentials and repository to check out the application source.

Select the JavaScript language version

For reliable and effective coding help, you need to specify the language version that will be used by default in all JavaScript files in your application.

1: in the Settings/preferences dialog (Ctrl + Alt + S), go to the “languages and frameworks” | JavaScript. Open in a JavaScript page.

2: Select a supported JavaScript language version from the list:

  • ECMAScript 3

  • ECMAScript 5.1

  • JavaScript 1.8.5

  • ECMAScript 6: This version adds support for features introduced in ECMAScript 2015-2017 as well as some current proposals for the standard.

  • React JSX: This version adds support for JSX syntax on top of ECMAScript 6

  • Flow: This release adds support for the Flow syntax.

Use multiple versions of JavaScript

If you are using an application that uses both ECMAScript 5.1 and later versions of ECMAScript, JSX, or Flow, the easiest way is to select the highest language version for the entire project from the list on the JavaScript page. For example, if you use ES5.1 and JSX, enable JSX (because it is a superset of ES5.1 and ES6).

Configure different versions of the JavaScript language for different folders

  1. On the JavaScript page, click the JavaScript Language Versions dialog box next to the list of JavaScript language versions to open.

  2. Click in the dialog box that opens to select the folder where you want to customize the language version. IntelliJ IDEA returns you to the JavaScript Language Version dialog box, where the selected folder is shown in the Path field.

  3. From the Language list, select the language version of the files in the selected folder. In all other JavaScript files in the project, IntelliJ IDEA will use the version selected on the JavaScript page.

Download the NPM dependency

Make sure you have Node.js on your computer. If your application uses certain tools, libraries, or frameworks, download the required packages.

Insert the installation package into the empty project

In embedded terminal (Alt+F12), type:

npm install

If you already have a package.json file in your project

  • Right click on the package.json file in the editor or Project tool window, and choose Run ‘NPM Install’ from the context menu.

  • Alternatively, NPM Install runs on a terminal (Alt+F12).

Configure code completion for project dependencies

To provide code completion for project dependencies, IntelliJ IDEA automatically creates a node_modules library. In IntelliJ IDEA, a library is a file or group of files whose functions and methods are added to IntelliJ IDEA’s internal knowledge in addition to the functions and methods that IntelliJ IDEA retrieves from the project code you edit. For more information and examples, see Configuring JavaScript libraries and code completion.

Viewing Parameter Prompts

Parameter prompts display parameter names in methods and functions to make the code easier to read. By default, parameter prompts are displayed only for literal or function expression values, but not for named objects.

Configuration Parameter Prompt

  1. In “Settings/preferences dialog (Ctrl + Alt + S), go to the” editor “| | general appearance. The Look and feel page opens.

  2. Click Configure next to the Show Parameter Name prompt check box (which is selected by default).

  3. In the Configuration Parameter Name Prompt dialog box that is displayed, select the Show names of all parameters check box in the Options area.

  4. To hide parameter prompts for all types of values, clear the Show Parameter Name prompts check box. Learn more from parameter information.

Automatic import in JavaScript

  1. IntelliJ IDEA can generate import statements for modules, classes, components, and any other symbols exported. If you are using ES6 in your project, IntelliJ IDEA can dynamically add missing import statements when you are finished with ES6 symbols.

  2. In cases where earlier JavaScript versions or wheAuto-Importrt is disabled on completion, IntelliJ IDEA marks the symbol as unparsed and displays a tooltip



  3. When pressing Alt+Enter, IntelliJ IDEA shows suggested quick fixes:



  4. If there are multiple possible import sources, IntelliJ IDEA displays a list of suggestions:



Add the ES6 import statement when the code is complete

  1. In “Settings/preferences dialog (Ctrl + Alt + S), go to the” editor “| | general automatic import. The Automatic Import page is displayed.

  2. In the TypeScript/JavaScript area, select the Add ES6 import when code is complete check box.

  3. IntelliJ IDEA can also generate import statements for symbols defined in project dependencies. Automatic import applies to symbols in packages that contain TypeScript definition files (as in moment or Redux) or sources written as ES modules.

Configure syntax highlighting

Run JavaScript in a browser

  1. In the editor, open the HTML file with a JavaScript reference. This HTML file does not have to be the HTML file that implements the start page of your application.

  2. Do one of the following:

  3. Select view | from the main menu in the browser open or press Alt + F2. Then select the desired browser from the list.

  4. Hover the mouse pointer over the code to display the browser icon bar:

  5. Click the icon indicating the desired browser.

Debug JavaScript

  • IntelliJ IDEA provides a built-in debugger for client-side JavaScript code for Chrome.

  • You can also debug client-side JavaScript in Firefox, version 36 and later. However, it is highly recommended that you use Chrome or any other browser in the Chrome family. With IntelliJ IDEA, you can debug JavaScript applications running on built-in servers, external servers, or remote servers.