PyCharm 4.0.0 Web Help

Some features described here are available in the Professional edition only.

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:

Prerequisites

Before you start working with JavaScript, make sure that JavaScript Support plugin is enabled.

The plugin is bundled with PyCharm and activated by default. If not, enable the plugin as described in Enabling and Disabling Plugins.

JavaScript support

JavaScript files are marked with viewAsJSON icon.

JavaScript support in PyCharm includes:

  • Switching between JavaScript language versions to choose the one that suits the targeted browser:
  • Full coding assistance:
  • 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 or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Ctrl+Slash or Ctrl+NumPad /Alt+SemicolonCtrl+Slash, Ctrl+NumPad / or Ctrl+ColonCtrl+Slash or Ctrl+Shift+CCtrl+Slash or Ctrl+NumPad /Command Slash or Command NumPad /Command Slash or Command NumPad /Command Slash or Command NumPad //Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+Slash, Ctrl+Shift+NumPad / or Ctrl+Shift+ColonCtrl+Shift+Slash or Ctrl+Shift+NumPad /Ctrl+Shift+SlashAlt Command Slash, Alt Command NumPad /, Control Shift Slash, Control Shift NumPad /, Shift Command Slash or Shift Command NumPad /Control Shift Slash, Control Shift NumPad /, Shift Command Slash or Shift Command NumPad /Control 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.

  • Numerous ways to navigate through the source code, among them:
    • Navigating with Structure Views.
    • Show/Goto Implementation (Ctrl+Alt+B or Ctrl+Alt+Button1 ClickCtrl+Alt+B or Ctrl+Alt+Button1 ClickCtrl+Alt+B or Ctrl+Alt+Button1 ClickCtrl+Alt+B or Ctrl+Alt+Button1 ClickCtrl+Alt+B or Ctrl+Alt+Button1 ClickCtrl+Alt+B or Ctrl+Alt+Button1 ClickCtrl+Alt+B or Ctrl+Alt+Button1 ClickCtrl+T or Ctrl+Alt+BAlt Command B or Alt Command Button1 ClickAlt Command B or Alt Command Button1 ClickAlt Command B or Alt Command Button1 Click) 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:
  • Running and debugging.
    • 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:
To develop an application that contains JavaScript

Developing an application that contains JavaScript, generally, includes performing the following steps:

  1. 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.
  2. Create a project to implement your application.
  3. On the JavaScript page of the Settings dialog box, choose the JavaScript language version that suits the targeted browser.
  4. Download, install, and configure JavaScript frameworks and libraries.
  5. Populate the project. Use the following PyCharm facilities, where applicable:
  6. Improve the quality and maintainability of your code using various types of refactoring, both common and JavaScript-specific.
  7. Run your application by opening its starting HTML page in the PyCharm default browser.
  8. 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.

See Also

Concepts:

Language and Framework-Specific Guidelines:

Reference:

Web Resources: