{"id":246,"date":"2010-07-27T13:34:03","date_gmt":"2010-07-27T11:34:03","guid":{"rendered":"http:\/\/www.speich.net\/articles\/?p=246"},"modified":"2019-10-06T12:33:50","modified_gmt":"2019-10-06T10:33:50","slug":"how-to-create-javascript-documentation-in-phpstorm","status":"publish","type":"post","link":"https:\/\/www.speich.net\/articles\/en\/2010\/07\/27\/how-to-create-javascript-documentation-in-phpstorm\/","title":{"rendered":"How to create JavaScript documentation in PhpStorm"},"content":{"rendered":"<p><strong>Update 19.07.2013<\/strong>: This guide is outdated. Read <a title=\"PhpStorm and JSDoc 3\" href=\"http:\/\/www.speich.net\/articles\/2013\/07\/19\/generate-javascript-documentation-with-jsdoc-3-and-phpstorm\/\">How to Generate JavaScript Documentation with JSDoc 3 and PhpStorm<\/a><\/p>\n<p><a title=\"PhpStorm\" href=\"http:\/\/www.jetbrains.com\/phpstorm\/\">PhpStorm&#8217;s<\/a> code assist feature nicely displays our own JavaScript code documentation. But what if you wanted to create a separate documentation you can hand out or integrate into your website? Then you should use <a title=\"jsdoc-toolkit website\" href=\"http:\/\/code.google.com\/p\/jsdoc-toolkit\/\">jsdoc-toolkit<\/a>. You can configure and run jsdoc-toolkit directly from PhpStorm. Here is what you have to do:<\/p>\n<p><!--more--><\/p>\n<p>File -&gt; Settings -&gt; External Tools -&gt;Add&#8230;<\/p>\n<figure style=\"width: 723px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" \" title=\"Install jsdoc-toolkit as an external tool.\" src=\"\/articles\/images\/screenshot-run-external-tools2.gif\" alt=\"Install jsdoc-toolkit as an external tool.\" width=\"723\" height=\"375\" \/><figcaption class=\"wp-caption-text\">Screenshot of how to install jsdoc-toolkit as an external tool in PhpStorm.<\/figcaption><\/figure>\n<p>Provide the following information:<\/p>\n<p><strong>Name<\/strong>:\u00a0 jsdoc-toolkit<br \/>\nThis name will show up in your Tools Menu. If you fill in a group name such as JavaScript, then the entry will become a submenu of JavaScript.<\/p>\n<p><strong>Program<\/strong>: &lt;pathToJava.exe&gt;<br \/>\nFill in the path to your java executable, e.g. C:Program FilesJavajdk1.6.0_19binjava.exe<\/p>\n<p><strong>Parameters<\/strong>: -jar jsrun.jar apprun.js -t=templatescodeview -v -r &#8220;&lt;pathToSourceDirectory&gt;&#8221; -d=&#8221;&lt;pathToDestinationDirectory&gt;&#8221;<br \/>\nThe source directory is the one you want to document, e.g. where your JavaScript files reside in. The destination directory is where you want the documentation to be created in. Please note, that paths are given without a trailing slash. In case your path arguments contain spaces it is important to <strong>enclose these parameter in quotes<\/strong>.\u00a0 For more information about the parameters see the <a title=\"jsdoc-toolkit wiki\" href=\"http:\/\/code.google.com\/p\/jsdoc-toolkit\/w\/list\">jsdoc-toolkit wiki<\/a>.<\/p>\n<p><strong>Working Directory<\/strong>: &lt;pathToJsdocToolkit&gt;<br \/>\nFill in the path to your jsdoc-toolkit installation directory, e.g. C:Website Toolsjsdoc-toolkit<\/p>\n<figure style=\"width: 723px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" \" title=\"How to install jsdoc-toolkit into PhpDocumentor\" src=\"\/articles\/images\/screenshot-run-external-tools3.gif\" alt=\"Screenshot of how to install jsdoc-toolkit into PhpDocumentor\" width=\"723\" height=\"339\" \/><figcaption class=\"wp-caption-text\">Screenshot of how to install jsdoc-toolkit into PhpDocumentor.<\/figcaption><\/figure>\n<p>In case you also wanted to create documentation for your PHP code, you should read the blog entry &#8216;<a href=\"\/articles\/?p=239\">How to create PHP documentation in PhpStorm<\/a>&#8216;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update 19.07.2013: This guide is outdated. Read How to Generate JavaScript Documentation with JSDoc 3 and PhpStorm PhpStorm&#8217;s code assist feature nicely displays our own JavaScript code documentation. But what if you wanted to create a separate documentation you can hand out or integrate into your website? Then you should use jsdoc-toolkit. You can configure &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.speich.net\/articles\/en\/2010\/07\/27\/how-to-create-javascript-documentation-in-phpstorm\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to create JavaScript documentation in PhpStorm&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[49,75,91],"class_list":["post-246","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-jsdoc-toolkit","tag-phpstorm","tag-tutorial","entry"],"_links":{"self":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":1,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"predecessor-version":[{"id":1692,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/posts\/246\/revisions\/1692"}],"wp:attachment":[{"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.speich.net\/articles\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}