JavaScript-Specific Guidelines
PyCharm enables creating rich Internet applications and Web applications by providing elaborate support of JavaScript and tight integration with AJAX and other adjacent frameworks and technologies.
In this section:
- JavaScript-Specific Guidelines
- Building Call Hierarchy
- Building Method Hierarchy
- Configuring JavaScript Libraries
- Creating JSDoc Comments
- Viewing JavaScript Reference
- Running and Debugging JavaScript
- JavaScript-Specific Refactorings
- Unit Testing JavaScript
- Minifying JavaScript
- Tracing with Spy-Js
- Using AngularJS
- Using Angular CLI
- Using the Flow Type Checker
- Using Grunt Task Runner
- Using Gulp Task Runner
- Using JavaScript Code Quality Tools
- Using Meteor
- Using PhoneGap/Cordova
Prerequisites
Before you start working with JavaScript, make sure that the JavaScript Support plugin is enabled. The plugin is bundled with PyCharm and is activated by default. If it is not, enable the plugin as described in Enabling and Disabling Plugins.
JavaScript support
JavaScript files are marked with 
icon.
JavaScript support in PyCharm 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:
- 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.
-
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.
- Possibility to build and view type, method and call hierarchies
-
Refactoring
PyCharm 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+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.
-
- Launching applications directly from PyCharm by opening the starting application HTML page in the default PyCharm browser.
- A dedicated debug configuration for launching debugging sessions directly from PyCharm.
- 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
jsonfile extension. - JSON code formatting and folding.
- A JSON file type template mapped to
To develop an application that contains JavaScript
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 PyCharm and activated by default. If it is not, enable the plugin. Make sure the JavaScript Support plugin is enabled. The plugin is bundled with PyCharm and activated by default. If it is not, enable the plugin. Make sure the JavaScript Support plugin is enabled. The plugin is bundled with PyCharm and 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.
- 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 PyCharm 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 PyCharm default browser.
-
Debug your application.
The JavaScript debugging functionality is incorporated in PyCharm, 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.
Debugging for JavaScript applications is supported only in the Firefox and Google Chrome browsers.