Prerequisites
Note
Before you start working with JavaScript, make sure that JavaScript Support plugin is enabled.
The plugin is bundled with WebStorm and activated by default. If it is not, enable the plugin.
JavaScript support
JavaScript files are marked with 
icon.
JavaScript support in WebStorm includes:
- Switching between JavaScript language versions to choose the one that suits the targeted browser:
-
Full coding assistance:
-
Smart, DOM-based, browser-type aware JavaScript code completion for:
- Keywords, labels, variables, parameters and functions.
- User defined and built-in JavaScript functions.
- JavaScript namespaces.
- Error and syntax highlighting.
- Code formatting and folding.
- Numerous code inspections and quick-fixes, including the Switch to JavaScript <version> quick-fix.
- Support of the strict mode
standard. - Support for ECMAScript.
- Initial support of ECMAScript Harmony.
-
Smart, DOM-based, browser-type aware JavaScript code completion for:
-
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+DivideCtrl+Slash; Ctrl+Divide/Ctrl+Shift+Slash; Ctrl+Shift+DivideCommand Shift Slash; Command Shift Divide; Command Shift Slash; Command Shift Divide).
- Unwrapping and removing statements.
- Building type hierarchies and viewing type hierarchies .
-
Refactoring
WebStorm provides both common refactoring types available for all the supported languages and JavaScript-specific refactoring.
- Common refactorings:
- Rename a file, function, variable, parameter, or label (both directly and via references).
- Move/Copy a file.
- Safe Delete a file.
- Extract function.
- JavaScript-Specific Extract Parameter Refactoring
- Common refactorings:
-
Numerous ways to navigate through the source code, among them:
- Navigating with Structure Views.
- Show/Goto Implementation (Ctrl+Alt+BCtrl+Alt+B) from overridden method / subclassed class.
- 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.
- Running and debugging.
- 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:
AJAX,
JQuery, YUI,
DoJo, Prototype,
MooTools, Qooxdoo, and Bindows:
- Code completion for every framework.
- DoJo style type annotations to provide more accurate completion and parameter type information.
- Quick Documentation lookup for DoJo style commands.
- Support for the JSON (JavaScript Object Notation) format:
- A JSON file type template mapped to json file extension.
- JSON code formatting and folding.
Developing an application that contains JavaScript, generally, includes performing the following steps:
- Make sure the JavaScript Support plugin is enabled. The plugin is bundled with WebStorm and activated by default. If it is not, enable the plugin.
- Create a project to implement your application.
- On the JavaScript page of the Settings dialog box, choose the JavaScript language version that suits the targeted browser.
- Download, install, and configure JavaScript frameworks and libraries.
-
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 refactoring, both common and JavaScript-specific.
- Run your application by opening its starting HTML page in the WebStorm default browser.
-
Debug your application.
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.
Note
Debugging for JavaScript applications is supported only in the Firefox
and Google Chrome browsers.