External API Docs Support for Popular JavaScript Frameworks

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.

This blog is permanently closed.

For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.

 
This entry was posted in Cool Feature, PhpStorm, WebStorm and tagged , . Bookmark the permalink.

20 Responses to External API Docs Support for Popular JavaScript Frameworks

  1. Wish: support for Qooxdoo.

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

  3. Zyava says:

    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:

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

  5. Rustam Vishnyakov says:

    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:

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

  7. Rustam Vishnyakov says:

    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:

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

  9. kevin says:

    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:

    Looks good! Thanks.

  11. Zyava says:

    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:

    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:

    @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:

    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:

    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:

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

  17. David Rees says:

    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:

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

Comments are closed.