PhpStorm 2024.3 ヘルプ

JavaScript ライブラリを構成する

言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから PhpStorm が取得する関数とメソッドに加えて、PhpStorm の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。

PhpStorm は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。

TypeScript コミュニティスタブをダウンロード (TypeScript 定義ファイル)

PhpStorm では、DefinitelyTyped スタブ(英語)をライブラリとして設定および使用できます。これは、次のような場合に特に役立ちます。

  • コード補完を改善するには、PhpStorm 静的解析には高度すぎるライブラリまたはフレームワークのシンボルを解決し、そのようなシンボルの型情報を追加します。

  • テストフレームワークからグローバルに定義されたシンボルを解決します。

以下の例は、post() 関数が解決されていない Express アプリケーションのコードを示しています。

Symbol not resolved without d.ts

TypeScript 定義ファイルをインストールすると、PhpStorm は post() を正常に解決します。

Symbol resolved after d.ts is installed

PhpStorm を使用すると、インテンションアクションを使用してエディターから直接 TypeScript 定義ファイルをダウンロードできます。または、設定: JavaScript ライブラリページでそれを行うこともできます。

インテンションアクションを使用して TypeScript 定義をダウンロードする

  • このライブラリまたはフレームワークの import または require ステートメントにキャレットを置き、Alt+Enter を押して、より良いタイプ情報を得るための TypeScript 定義のインストールを選択します。

    Download TypeScript definitions intention action

    PhpStorm はライブラリの型定義をダウンロードし、JavaScript ライブラリページのライブラリリストに追加します:

    Type definitions library added to the list

  • あるいは、package.json を開き、型定義をダウンロードするパッケージにキャレットを置き、Alt+Enter を押して、「@types/<パッケージ name>」をインストールしますを選択します。

    Install type definitions from package.json

JavaScript ライブラリページで TypeScript 定義をダウンロードする

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | JavaScript | ライブラリを選択します。

  2. 開いたライブラリページでダウンロードをクリックし、開いたライブラリのダウンロードダイアログで必要なライブラリを選択し、ダウンロードしてインストールをクリックします。

    Add TypeScript definition file

PhpStorm は、ダウンロードされた型定義を外部ライブラリノードのプロジェクトツールウィンドウ Alt+1 に表示します。

Downloaded type definitions are shown under the External libraries node

オプション

Node.js コアライブラリを構成する

Node.js バイナリにコンパイルされる fs(英語)、path(英語)、http(英語)、およびその他のコアモジュールのコード補完と参照解決を取得するには、Node.js コアモジュールソースを JavaScript ライブラリとして構成する必要があります。

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | Node.js を選択します。

  2. Node.js コーディング支援チェックボックスを選択します。

    Node.js コアライブラリはバージョン固有のものです。Node.js ページで Node.js のバージョンを変更した場合は、もう一度チェックボックスを選択する必要があります。その後、PhpStorm はこの新しいバージョン用の新しいライブラリを作成します。

node_modules ライブラリを構成する

プロジェクトの依存関係にコード補完を提供するために、PhpStorm は node_modules ライブラリを自動的に作成するため、Node.js モジュールはプロジェクトに保持されますが、それらに対してインスペクションは実行されないため、パフォーマンスが向上します。

node_modules library added to the list

プロジェクトツールウィンドウ Alt+1 では、node_modules もライブラリとしてマークされています。

node_modules folder marked as library root.png

ただし、node_modules ライブラリには、プロジェクトの package.json ファイルの dependencies オブジェクトにリストされているモジュールのみが含まれています。PhpStorm は依存関係の依存関係を node_modules ライブラリに含めませんが、実際にはそれらをプロジェクトから除外します。

ライブラリのスコープを構成する

PhpStorm は、クライアント側のコードで Node.js API など、無関係な補完を提案することがあります。これは、デフォルトで PhpStorm がプロジェクトフォルダー全体の補完のためにライブラリを使用するためです。PhpStorm では、ライブラリのスコープを設定することでコード補完を調整できます。

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | JavaScript | ライブラリを選択します。

    ライブラリページには、利用可能なライブラリのリストが表示されます。

  2. 必要なライブラリの横にある有効チェックボックスをオフにして、スコープの管理をクリックします。「JavaScript ライブラリ。使用スコープ」ダイアログが開きます。

  3. JavaScript ライブラリの使用スコープダイアログで、追加ボタン () をクリックし、ライブラリスコープに含めるファイルまたはフォルダーを選択します。JavaScript ライブラリの使用スコープダイアログでは、パスフィールドに選択したファイルまたはフォルダーが表示されます。

  4. 追加されたファイルまたはフォルダーごとに、ライブラリリストから、構成するライブラリを選択します。

サンプル: HTML および Node.js コアライブラリのスコープを構成する

PhpStorm でフルスタックの JavaScript アプリケーションに取り組んでいると、コード補完がクライアント側のコードに Node.js API をいくつか提案し、Node.js コードに DOM API を提案していることに気付くことがよくあります。これは、DOM API を使用する HTML ライブラリと Node.js API を使用する Node.js コアライブラリがプロジェクト全体でデフォルトで有効になっているために発生します。無関係な補完候補を取り除くには、これらのライブラリのスコープを構成する必要があります。

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | JavaScript | ライブラリを選択します。

    ライブラリページには、利用可能なライブラリのリストが表示されます。

    Configure JavaScript libraries: a list of available libraries

  2. HTML および Node.js コアの項目の横にある有効チェックボックスをオフにします。

    Clear Node.js Core and HTML

  3. スコープの管理をクリックします。JavaScript ライブラリの使用スコープダイアログが開きます。

  4. HTML ライブラリのスコープを構成するには、「 app.general.add.png 」をクリックします。

    Add scope for HTML

    開いたダイアログで、クライアント側のコードが含まれるフォルダーを選択し、オープンをクリックします。

    Add scope for HTML: select folders

    JavaScript ライブラリの使用スコープダイアログに戻り、選択したフォルダーがリストに追加されます。

    Manage Scopes dialog: folders for HTML library added

    各フォルダーの横にあるライブラリリストから、HTML を選択します。

    Specify scope: HTML library selected

  5. Node.js コアライブラリのスコープを構成するには、 を再度クリックし、サーバー側コードを含むフォルダーを追加し、それぞれに対してライブラリリストから Node.js コアを選択します。

    Specify scope: Node.js Core library selected

    現在、PhpStorm は HTML および Node.js コアライブラリからアイテムを解決し、これらの選択されたプロジェクトフォルダーからのファイルでのみ補完して提案します。

同様に、自動的に作成される node_modules ライブラリのスコープを構成できます。node_modules ライブラリの構成を参照してください。

CDN リンク経由で追加されたライブラリを構成する

ライブラリ .js ファイルが CDN リンクを介して参照される場合、ランタイムでは使用できますが、PhpStorm では表示されません。そのようなライブラリ .js ファイルから補完リストにオブジェクトを追加するには、ファイルをダウンロードして外部ライブラリとして構成します。

ライブラリをダウンロードする

  • ライブラリへの CDN リンクにキャレットを置き、Alt+Enter を押して、リストからライブラリのダウンロードを選択します。

    Intention action: download CDN library

    ライブラリは PhpStorm キャッシュにダウンロードされます (プロジェクトにはダウンロードされません)。情報メッセージを含むポップアップが表示されます。

    CDN library added

    JavaScript ライブラリページで、ダウンロードしたライブラリがリストに追加されます。

    CDN library added to the list

    プロジェクトツールウィンドウ Alt+1 では、ライブラリは外部ライブラリノードに表示されます。

    Downloaded CDN library is shown under the External Libraries node

ライブラリの可視性を変更する

  • デフォルトでは、PhpStorm はダウンロードしたライブラリをグローバルとマークします。つまり、他の PhpStorm プロジェクトでも有効にして再利用できます。このデフォルト設定を変更するには、ダウンロードしたライブラリをリストから選択し、編集をクリックし、表示されるライブラリの編集ダイアログでプロジェクトを選択します。

    Configure the visibility of a library

カスタムのサードパーティ JavaScript ライブラリを構成する

プロジェクトまたはマシン上の他の場所に JavaScript フレームワークファイルがあり、それを編集するプロジェクトコードとしてだけでなく、ライブラリとして PhpStorm に処理させたいとします。

  1. 必要なフレームワークファイルをダウンロードします。

  2. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | JavaScript | ライブラリを選択します。

  3. ライブラリページで、追加をクリックします。

  4. 新規ライブラリダイアログで、外部 JavaScript ライブラリの名前を指定します。

  5. 追加ボタン (app.general.add.png) をクリックし、リストからファイルを添付またはディレクトリを添付を選択します。

    Configure custom library: Add files/folders

    ファイルブラウザーで、フレームワークをダウンロードしたファイルまたはフォルダーを選択します。

    Configure custom library: library added

    OK をクリックすると、ライブラリページに戻り、新しいライブラリがリストに追加されます。

    The new custom library is added to the list

  6. プロジェクトツールウィンドウ Alt+1 では、ライブラリは外部ライブラリノードに表示されます。

    A custom library is shown under the external Libraries node

オプション

  • デフォルトでは、ライブラリは現在のプロジェクト全体の有効範囲で有効になっています。ライブラリのスコープの構成の説明に従って、このデフォルト設定を変更することができます。

  • ドキュメント URL 領域で、ライブラリまたはフレームワークの公式ドキュメントへのパスを指定します。このライブラリのシンボルで Shift+F1 を押すと、PhpStorm はこの URL を開きます。

ファイルに関連付けられたライブラリを表示する

  • エディターでファイルを開き、Ctrl+Shift+A を押して、リストから JavaScript ライブラリの使用を選択します。

    View associated JS libraries: Find Action

    PhpStorm には、使用可能な構成済みライブラリのリストが表示されます。現在のファイルに関連付けられているライブラリにはチェックマークが付いています。

    View associated JS libraries: popup list

    • 現在のファイルをライブラリのスコープから削除するには、このライブラリの横にあるチェックマークを外します。

    • ライブラリを現在のファイルに関連付けるには、このライブラリの横にチェックを入れます。

ライブラリを削除する

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | JavaScript | ライブラリを選択します。

    ライブラリページには、使用可能なライブラリのリストが表示されます。

  2. ライブラリを選択して除去をクリックします。

Bower Jsdoc コメント