WebStorm 2024.3 ヘルプ

JavaScript ドキュメントの検索

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

  • プロジェクトシンボルまたはプロジェクト依存のシンボルの場合、WebStorm は対応する JSDoc コメント(英語)からドキュメントを生成します。

  • 標準の JavaScript オブジェクトまたはメソッドの場合、WebStorm は組み込み TypeScript 定義ファイル (英語) d.ts からの対応する JSDoc コメントを表示します。これらのファイルは WebStorm にバンドルされており、定期的に更新されます。

  • d.ts ファイルにコメントがない場合、WebStorm は対応する MDN 記事からの要約を表示します。

デフォルトでは、ドキュメントはドキュメントポップアップに表示されますが、いつでもドキュメントツールウィンドウで開くことも、デフォルトでドキュメントツールウィンドウに表示されるように設定することもできます。

ポップアップのクイックドキュメント

Quick Documentation in a popup
  • エディターで必要なシンボルの上にマウスを置きます。

  • シンボルにキャレットを置き、Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントを選択します。

    Ctrl+Q をもう一度押して、ドキュメント> ツールウィンドウでこのドキュメントを開きます。

  • ポップアップで the Show Options Menu icon をクリックしてフォントサイズを変更するか、クイックドキュメントツールバーを表示するか、ソースコードに移動します。

ポップアップで the Show Options Menu icon をクリックしてフォントサイズを変更したり、クイックドキュメントツールバーを表示したり、ソースコードに移動したりできます。詳細については、クイックドキュメントポップアップを構成するを参照してください。

ツールウィンドウのクイックドキュメント

デフォルト設定では、Ctrl+Q表示 | クイックドキュメント)を押すと、ポップアップでクイックドキュメントが開きます。設定を変更して、ツールウィンドウにドキュメントを表示できます。

Quick Documentation Lookup in the tool window
  • クイックドキュメントポップアップで、the Show Options Menu icon をクリックし、ドキュメントのポップアップを前に表示オプションを無効にします。

  • ドキュメントツールウィンドウで、ツールウィンドウツールバーの the Show Options Menu icon をクリックし、ドキュメントのポップアップを前に表示オプションを無効にします。

ツールウィンドウで特定のコード要素のドキュメントを開き、現在のファイルの他の要素のドキュメントを表示し続けることができます。

ツールウィンドウでは、コードドキュメントが固定されていないタブ(アスタリスクシンボル(*)でマークされたタブ)に表示されます。このドキュメントを表示するには、シンボルにカーソルを合わせるか、キャレットを配置します。クイックドキュメントツールウィンドウ: モードを参照してください。

シンボルの MDN ドキュメント

  • ドキュメントポップアップ Ctrl+Q で、下部のリンクをクリックします。

    ws_mdn_docs.png
  • Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

WebStorm は、デフォルトの WebStorm ブラウザーで MDN 記事を開きます。

サードパーティの JavaScript ライブラリのドキュメント

  1. 必要なライブラリまたはフレームワークをダウンロードし、外部 JavaScript ライブラリとして構成し、外部ドキュメントへのリンクを指定します。詳細については、カスタムのサードパーティ JavaScript ライブラリの構成を参照してください。

  2. シンボルにキャレットを置き、Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

npm パッケージのドキュメント

  • package.json ファイルまたは require または import ステートメントで、パッケージの名前にキャレットを置き、キーを押します。Ctrl+Q

    Quick Doc for an npm package is opened from an import statement
    Quick Doc for an npm package is opened from a package.json
  • ブラウザーで npm 公式 Web サイト(英語)のドキュメントを開くには、ポップアップ内のリンクをクリックするか、Shift+F1 を押します。

関連ページ:

ドキュメントツールウィンドウ

デフォルトでは、WebStorm はポップアップにクイックドキュメントを表示します。ツールウィンドウで表示するには、ポップアップでクリックしてドキュメントツールウィンドウで開くを選択するか、を 2 回押します。または前のページに切り替えるか、次のドキュメントページに移動します(たとえば、ハイパーリンクをクリックした後)。macOS では、3 本の指で右から左、左から右にスワイプするジェスチャーも使用できます。ドキュメントが現在開いているシンボルのソースコードに移動します。ドキュメントのポップ...

インラインドキュメントの表示

クイックドキュメントの参照を使用すると、プロジェクトおよびその依存関係からのシンボルの参照、および標準の JavaScript オブジェクトおよびメソッドの参照を表示できます。詳細については、「JavaScript ドキュメントの検索および TypeScript ドキュメントのルックアップ」を参照してください。プロジェクトシンボルまたはプロジェクトの依存関係からのシンボルの場合、WebStorm は対応する JSDoc コメントからドキュメントを生成します。コメントを作成するには、ドキュメント化する...

JavaScript ライブラリを構成する

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

カバレッジで未使用のコードを見つける

WebStorm を使用すると、クライアント側アプリケーションで未使用の JavaScript、TypeScript、CSS コードを見つけることができます。特別なコードカバレッジモードでアプリケーションを実行すると、WebStorm は、すべてのファイルとフォルダーで使用されたコードの量を示すレポートを作成します。ソースマップのおかげで、このレポートにはソースファイルのカバレッジが表示されますが、ブラウザーで実際に実行されたコンパイル済みコードのカバレッジは表示されません。コードカバレッジモー...

JavaScript 後置テンプレート

後置コード補完では、入力したばかりの式の周囲にテンプレートコードを追加できます。ドットの後に略語(後置)を入力して展開キー(デフォルトでは)を押すか、コード補完ポップアップで略語を選択すると、テンプレートが展開されます。WebStorm には、定義済みの後置テンプレートのセットが付属しており、JavaScript および TypeScript 用に独自のカスタム後置テンプレートを定義できます。カスタムテンプレートの作成を参照してください。JavaScript の事前定義テンプレートは Type...