External API Docs Support for Popular JavaScript Frameworks

Posted on by Egor Malyshev

JavaScript libraries introduced recently are very well accepted by you. And it is just the time to make one step further to ease your work with JavaScript.

Now, in the recent 2.0 build, you can open a Web page with API documentation for an external library class or function at caret position by pressing Shift+F1. This works for the following frameworks:

  • jQuery/jQuery UI
  • Dojo
  • ExtJs
  • Prototype
  • Mootools
  • Scriptaculous
  • Yahoo UI 3.x

Every JavaScript framework has its own way of providing API documentation through Web pages and unfortunately there is no single uniform algorithm which would work for an arbitrary JavaScript library (framework).

To set up the feature for one of the supported frameworks open Settings dialog (File/Settings) and navigate to “JavaScript Libraries” panel. Add a new library or select an existing one. Let’s assume, for example, that we have the following jQuery library settings at this point:

Now if you click “Specify…” button, you will get the following dialog:

The IDE automatically detects jQuery framework and substitutes the API documentation link for it. Just click “OK” without modifying anything.

Please note: although you have a possibility to specify another URL, automatic navigation to jQuery API pages will work only for the initial link http://api.jquery.com because there is no guarantee that another URL refers to a similarly structured documentation.

Now let’s give it a try. Open a file containing some jQuery JavaScript code. Move the caret to a jQuery function. For example:

If you press Shift+F1, the following page will be brought up in your Web browser:

That’s it!

If you find out that a framework you are working with is missing from the list in the beginning of this post, you can submit a feature request to YouTrack issue tracking system. Note also that if you have several libraries defining equally named symbols (functions and etc.), you may need to press Ctrl+Q first to open a documentation window, select the right symbol to navigate to and click to open a corresponding API Web page.

Comments below can no longer be edited.

20 Responses to External API Docs Support for Popular JavaScript Frameworks

  1. Axel Rauschmayer says:

    January 24, 2011

    Wish: support for Qooxdoo.

  2. Peter Petermann says:

    January 25, 2011

    awesome, for someone who rather runs away from javascript (like me) this is a great help

  3. Zyava says:

    January 25, 2011

    Please note: although you have a possibility to specify another URL, automatic navigation to jQuery API pages will work only for the initial link http://api.jquery.com because there is no guarantee that another URL refers to a similarly structured documentation.

    Isn’t better bundle links to all supported javascript libraries documentation websites? Why users should guess which link should be used?

  4. Oleg says:

    January 25, 2011

    What about the similar support for PHP frameworks documentation, for example symfony, yii, doctrine, twig?

  5. Rustam Vishnyakov says:

    January 26, 2011

    Alex, Oleg,
    please submit feature requests to http://youtrack.jetbrains.net. We are planning our work based on these requests. Thank you!

    Zyava,
    there is also the following statement: “The IDE automatically detects jQuery framework and substitutes the API documentation link for it” as well as for other supported frameworks. And the right links are already bundled with the IDE, you don’t have to guess anything. The point here is that if (for whatever reason) you decide to change it, you will not get the navigation working the way you might expect.

  6. kevin says:

    January 27, 2011

    I pressed shift+F1, nothing happened. Does this work on the lastest mac build 103.8?

  7. Rustam Vishnyakov says:

    January 28, 2011

    Kevin,
    as I have stated in some cases you need to press Ctrl+Q and select the right symbol first and then click the arrow button in help window.

  8. Rustam Vishnyakov says:

    January 28, 2011

    I have created a feature request for Qooxdoo support, see http://youtrack.jetbrains.net/issue/WI-4940

  9. kevin says:

    January 28, 2011

    OK, I finally figured it out. I wasn’t using the default keymap, instead, i am using keymap for mac os x 10.5+
    I have click ctrl+j in my case and then go from there.

  10. David Rees says:

    January 30, 2011

    Looks good! Thanks.

  11. Zyava says:

    February 2, 2011

    Rustam Vishnyakov:
    In the javascript libraries section I must select library file and type documentation url. I don’t see dropdown list with supported libraries or anything similar to it. Please show me where can I select jquery documentation url (not type by hands)?

  12. Rustam Vishnyakov says:

    February 2, 2011

    Zyava,
    You should be able to get the URL automatically after adding library files. But if you click “Specify” button and see an empty dialog box without a predefined URL, then something might have gone wrong. Library detection algorithm is based on library file names. In this case it has failed probably because your library file name(s) do not match anything the IDE knows. For example, if you have a file named jq-123.js assuming that this is a jQuery library, you won’t get any default doc URL because IDE expects “jquery” keyword to be in your file name/path.

  13. Zyava says:

    February 4, 2011

    @Rustam
    Hmm, now I see. But this is counter-intuitive. And how can I check, is my desired library supported? Go and read help or download file, add it and press specify? We must too many moves for so simple thing. Again, what about drop-down list with supported libraries (+ maybe version selector)? And in this case phpstorm will be able download needed version lib file for me…

  14. Rustam Vishnyakov says:

    February 4, 2011

    I understand your proposal and it can be implemented. It makes sense also to write a feature request at http://youtrack.jetbrains.net. Thank you!

  15. Yuen-Chi Lian says:

    February 10, 2011

    Thanks for sharing, and I appreciate the effort and wish to see it improved further in future.

    If node JS can be made supported (and with in-IDE documentation), that’ll be excellent.

  16. Tony Xiao says:

    August 14, 2011

    What is the right API location for Ext Js 4? Anybody know?

    • rustam.vishnyakov says:

      November 16, 2011

      It should be http://docs.sencha.com/ext-js/4-0/#!/api
      But unfortunately the rules of making right URLs are different and you have to use the latest Php/WebStorm 3.0 (currently a EAP build).

  17. David Rees says:

    May 12, 2012

    Instead of us bugging you, it would be great if we there was a parametrized approach for external documentation so we (users) can add our own doc sources. See IDEA-85996.

  18. David Rees says:

    May 12, 2012

    @Yuen-Chi, you can vote for adding node doc at http://youtrack.jetbrains.com/issue/WI-9673