JavaScript
With WebStorm, you can develop modern web, mobile, and desktop applications with JavaScript and Node.js. WebStorm supports JavaScript and TypeScript programming languages, React and Angular frameworks and provides tight integration with various tools for web development.
On this page:
- Prerequisites
- JavaScript support
- Developing an application that contains JavaScript: general overview
- In this section
Prerequisites
Before you start working with JavaScript, make sure that the JavaScript Support plugin is enabled. The plugin is bundled with WebStorm and is activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.
JavaScript support
JavaScript files are marked with icon.
JavaScript support in WebStorm includes:
- Switching between JavaScript language versions:
- Full coding assistance:
- Smart code completion for keywords, labels, variables, parameters, user-defined or built-in functions, and JavaScript namespaces.
- Error and syntax highlighting.
- Code formatting and folding.
- Numerous code inspections and quick-fixes.
- Support of the strict mode standard.
- Code Generation
- Generating code stubs based on file templates during file creation.
- Inserting, expanding, and generating JavaScript code blocks using live templates.
- Creating various applications elements via JavaScript and AJAX intention actions.
- Possibility to create line and block comments (Ctrl+Slash/Ctrl+Shift+Slash).
- Unwrapping and removing statements.
- Building type hierarchies and viewing type hierarchies .
- Refactoring, both JavaScript-specific and available for all the supported languages, see Refactoring Source Code and Extract Parameter in JavaScript.
- Numerous ways to navigate through the source code, among them Navigating with Structure Views, Show/Goto Implementation (Ctrl+Alt+B) from overridden method / subclassed class, etc.
- Advanced facilities for searching through the source code.
- Support of the JSDoc format and generating documentation comments.
- Viewing reference information:
- Definitions, inline documentation, parameter hints.
- JSDoc comments.
- Lookup in external JavaScript libraries.
-
- Launching applications directly from WebStorm by opening the starting application HTML page in the default WebStorm browser.
- A dedicated debug configuration for launching debugging sessions directly from WebStorm.
- A JavaScript-aware debugger that lets you execute applications step by step, evaluate expressions, examine related information and find runtime bugs.
- Support for JavaScript breakpoints.
- Tight integration with related frameworks and technologies.
- Support for the JSON (JavaScript Object Notation) format:
- A JSON file type template mapped to
json
file extension. - JSON code formatting and folding.
- A JSON file type template mapped to
Developing an application that contains JavaScript: general overview
Developing an application that contains JavaScript, generally, includes performing the following steps:
- Create a project to implement your application.
- On the JavaScript page of the Settings dialog box, choose the JavaScript language version that you are going to use in your project.
- Install the project dependencies via the Node Package Manager by doing one of the following:
-
- Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing for Windows and Linux or for macOS, and click Node.js and NPM under Languages & Frameworks.
- On the Node.js and NPM page that opens, the Packages area shows all the Node.js-dependent packages that are currently installed on your computer, both at the global and at the project level. Click .
- In the Available Packages dialog box that opens, select the required package.
- Optionally specify the product version and click Install Package to start installation.
- Right-click the
package.json
file in the editor or in the Project tool window and choose Run 'npm install' on the context menu. - Open the built-in Terminal ( ) and run the
npm install <required_package>
commands. - Install the required packages on the Node.js and NPM page of the Settings / Preferences Dialog.
For details, see Node Package Manager (npm).
-
- Populate the project. Use the following WebStorm facilities, where applicable:
- Coding assistance.
- Code Generation.
- Various types of navigation and search through the source code.
- Viewing reference and generating documentation comments.
- Look-up in external libraries.
- Improve the quality and maintainability of your code using various types of refactorings, built-in code quality tools, and integration with other linters, see JavaScript Code Quality Tools.
- Run your application by opening its starting HTML page in the WebStorm default browser.
- Debug your application in the Google Chrome browser.
The JavaScript debugging functionality is incorporated in WebStorm, so just configure the debugger, whereupon you can start the debugging session and proceed as usual: set the breakpoints, step through them, stop and resume the program, and examine it when suspended.
In this section
- Configuring JavaScript Libraries
- Creating JSDoc Comments
- JavaScript Documentation Look-Up
- Refactoring JavaScript
- Testing JavaScript
- Running JavaScript in Browser
- Debugging JavaScript in Chrome
- Debugging JavaScript in Firefox
- Minifying JavaScript
- AngularJS
- Angular
- Flow Type Checker
- Grunt
- Gulp
- JavaScript Code Quality Tools
- Meteor
- PhoneGap/Cordova
- Vue.js