PyCharm 2022.1 Help

JavaScript documentation look-up

PyCharm shows you reference for standard JavaScript APIs, for symbols from your project and from its dependencies, as well as for symbols defined in external libraries. You can view the documentation for symbols in the Documentation popup, get information on method parameters, and open documentation on external sites if links to them are available.

  • For a project symbol or for a symbol from the project dependencies, PyCharm generates the documentation from the corresponding JSDoc comment.

  • For a standard JavaScript object or method, PyCharm shows the corresponding JSDoc comment from the built-in TypeScript definition files d.ts. These files are bundled with PyCharm and updated on a regular basis.

  • If no comment is found in the d.ts files, PyCharm shows a summary from the corresponding MDN article.

By default, documentation is shown in the Documentation popup but you can configure it to appear in the Documentation tool window.

View documentation for a symbol

  • When you hover the mouse pointer over a symbol, PyCharm immediately displays the reference for it in the Documentation popup.

    You can turn off this behavior or configure the popup to appear faster or slower, see Configuring the behavior of Documentation popup below.

  • Position the caret at the symbol and press Ctrl+Q or select View | Quick Documentation Lookup from the main menu.

    Press Ctrl+Q again to open this documentation in the Documentation tool window.

Configure the behavior of Documentation popup

Click the Show Options Menu icon in the popup to change the font size, display the quick documentation toolbar, or go to the source code.

  • To toggle the focus of the Quick Documentation popup and the Documentation Tool Window, press Ctrl+Q sequentially.

  • To turn off showing documentation automatically when you hover the mouse over code symbols, Click the Show Options Menu icon in the popup and disable the Show on Mouse Move option.

  • To change the font size of the documentation, click the Show Options Menu icon in the quick documentation popup, select Adjust Font Size and move the slider.

  • To have the Documentation popup shown faster or slower, open the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | General | Code Completion, then select the Show the documentation popup checkbox and specify the delay time.

Learn more from Quick Documentation

View the MDN documentation for symbols

  • In the Documentation popup Ctrl+Q, click the link at the bottom:

    ws_mdn_docs.png
  • Press Shift+F1 or select View | External Documentation from the main menu.

PyCharm opens the MDN article in the default PyCharm browser.

View documentation for third-party JavaScript libraries

  1. Download the required library or framework, configure it as an external JavaScript library, and specify the link to its external documentation, see Configuring a custom third-party JavaScript library for details.

  2. Position the caret at the symbol in question and press Shift+F1 or choose View | External Documentation from the main menu.

View documentation for npm packages

  • In a package.json file or in a require or import statement, position the caret at the name of the package and press Ctrl+Q

    ws_quick_doc_for_npm_package.png
  • To open the documentation on the npm official website in the browser, press Shift+F1.

View reference in a tool window

Change the font size of quick documentation

  • Click the Slider icon in the upper-right corner of the quick documentation window, and move the slider.

  • In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | General and select the Change font size (Zoom) with Ctrl+Mouse Wheel checkbox. See Useful editor configurations for details.

Last modified: 11 April 2022