WebStorm 2024.3 ヘルプ

Jsdoc コメント

WebStorm は Jsdoc コメント(英語)を認識し、開始ブロックコメント /** を入力して Enter を押すと、@param@returns@private やその他のタグを自動的に挿入することで作成できます。JSDoc コメントは、JavaScript および TypeScript での Ctrl+Q を使用したドキュメント検索に使用されます。JavaScript ドキュメントの検索および TypeScript ドキュメントのルックアップを参照してください。また、連鎖メソッドでの型アノテーションおよびメソッド戻り型ヒントにも使用されます。

WebStorm は、ドキュメントコメント内の TODO パターンClosure コンパイラー(英語)アノテーション、TypeScript 構文も認識し、コード補完、インテンションアクション、その他のタイプのコーディング支援で使用します。

JSDoc 入門(英語)および JSDoc でサポートされているタイプ(英語)の例を使用して、JSDoc 構文の詳細な説明を見つけてください。

JSDoc コメントを作成する

  • 文書化するメソッド / 関数またはフィールドの宣言の前にキャレットを置き、開始ブロックコメント /** を入力して、Enter を押します。

    WebStorm は、該当する場合、パラメーター(@param)と戻り値(@returns)のリストを含む JSDoc コメントを生成します。リストされたパラメーター、戻り値などを記述します。

    Generate jsdoc comment
  • あるいは、専用の doc コメントの修正アクションを使用します。文書化するメソッド / 関数またはフィールドにキャレットを置き、Ctrl+Shift+A を押して Fix Doc Comment の入力を開始します。次に、リストから doc コメントの修正を選択し、Enter を押します。

JSDoc コメントの TypeScript 構文

JavaScript ファイルの JSDoc コメント内で、TypeScript アノテーション(@type@typedef など)を使用できます。WebStorm は、@typedef 宣言の共用体型(英語)やオプションのプロパティなど、TypeScript 構文構造を認識します。

WebStorm は、TypeScript アノテーション用のコード補完を提供します。

Code completion for TypeScript annotations within JSDoc in a JavaScript file

@type アノテーションに基づいて、WebStorm はパラメーターのヒントを表示します。

Parameter hints are shown based on type annotations within JSDoc in a JavaScript file

エディターでレンダリングされた JSDoc コメントを表示する

WebStorm を使用すると、JSDoc コメントを読みやすい形式で表示できます。このレンダリングされたビューモードでは、アイテムは @ タグでグループ化されて表示されますが、タグ自体はスキップされます。参照先の Web ページを開いて、参照先のトピックのクイックドキュメントを表示し、読みやすくするためにフォントサイズを調整できます。

Rendered View for JSDoc comments
  • レンダリングされたビューモードに入るには、コメントの上にマウスを置き、余白の the Toggle Rendered View icon をクリックするか、Ctrl+Alt+Q を押します。アイコンが the Toggle Rendered View icon に変わります。

    Turn on the Rendered View mode
  • レンダリングされたビューモードを終了するには、ガターで the Toggle Rendered View icon をクリックするか、JSDoc コメントのコンテキストメニューからレンダリングビューの切り替えを選択するか、Ctrl+Alt+Q を押します。

    Turn the Rendered View mode off
  • 現在のファイルのすべての JSDoc コメントに対してレンダリングされたビューモードをオンにするには、ガターのコンテキストメニューからすべての Doc コメントをレンダリングを選択します。

    Render all comments in the current file
  • 必要に応じて、コンテキストメニューからフォントサイズを調整を選択し、スライダーを使用してフォントサイズを変更します。

    Adjust font size
  • デフォルトでレンダリングされるすべての JSDoc コメントを表示するには、設定ダイアログ(Ctrl+Alt+S)を開き、エディター | 一般 | 外観に移動して、ドキュメントコメントをレンダリングするチェックボックスを選択します。

    Turn on Rendered JSDoc comments by default
  • レンダリングビューのガターアイコンを非表示にするには、ガターのコンテキストメニューからガターアイコンの構成を選択し、開いた設定 | エディター | 一般 | ガターアイコンページのドキュメントコメントの直接描画チェックボックスをオフにします。

関連ページ:

JavaScript ドキュメントの検索

WebStorm は、標準の JavaScript API、プロジェクトとその依存関係からのシンボル、外部ライブラリで定義されたシンボルのリファレンスを示しています。ドキュメントポップアップでシンボルのドキュメントを表示し、リンクが利用可能な場合は外部サイトのドキュメントを開くことができます。プロジェクトシンボルまたはプロジェクト依存のシンボルの場合、WebStorm は対応する JSDoc コメントからドキュメントを生成します。標準の JavaScript オブジェクトまたはメソッドの場合、We...

TypeScript

WebStorm は TypeScript ソースコードの開発、実行、デバッグをサポートします。WebStorm は .ts および .tsx ファイルを認識し、ユーザー側で追加の手順を踏むことなく編集するためのコーディング支援を提供します。TypeScript ファイルはアイコン。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般的で TypeScript...

JavaScript

WebStorm を使用すると、JavaScript および Node.js を使用して最新の Web、モバイル、デスクトップアプリケーションを開発できます。WebStorm は、React、Angular、Vue.js、その他のフレームワークもサポートし、Web 開発用のさまざまなツールとの緊密な統合を提供します。JavaScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、コードインスペクションおよびクイックフィックス...

TODO コメント

アプリケーションで作業するときは、将来の参照用にコードの一部にマークを付けたいことがあります。最適化と改善のための領域、変更の可能性、検討すべき質問などです。WebStorm では、エディターでハイライトされ TODO ツールウィンドウにリストされている特別なタイプのコメントを追加できます。デフォルトパターンの使用:デフォルトでは、WebStorm は 2 つのパターンを認識します - とは両方とも小文字と大文字です。これらのパターンは、サポートされているファイルタイプのコメント内で使用できます。...

JavaScript ライブラリを構成する

言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから WebStorm が取得する関数とメソッドに加えて、WebStorm の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。WebStorm は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト package.json のオブジェクトにリストさ...

Chrome での JavaScript のデバッグ

WebStorm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。以下のビデオと手順では、このデバッガーの使用を開始するための基本的な手順を説明しています。始める前に:設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript Debugger と入力します。プラグインの詳細については、プラグインのマッピン...