IntelliJ IDEA 2020.3 ヘルプ

JavaScript ライブラリを構成する

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

IntelliJ IDEA は、コーディング支援(つまり、コード補完、構文ハイライト、ナビゲーション、ドキュメントの参照)を強化するためにのみライブラリを使用します。ライブラリはプロジェクトの依存関係を管理する方法ではありません。

TypeScript コミュニティスタブの使用 (TypeScript 定義ファイル)

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

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

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

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

ws_js_configure_libraries_node_express_symbols_not_resolved_without_d_ts.png

推奨される TypeScript 定義ファイルをインストールした後、IntelliJ IDEA は post() を正常に解決します。

ws_js_configure_libraries_node_express_symbols_resolved_with_d_ts.png

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

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

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

    ws_js_libs_download_ts_definitions_intention_action.png

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

    ws_js_libs_download_ts_definitions_added_to_lib_list.png

設定 / 環境設定で TypeScript 定義をダウンロードするダイアログ

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | JavaScript | ライブラリに移動します。

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

    ws_js_configure_libraries_download_ts_community_stubs.png

    IntelliJ IDEA は、選択したライブラリの型定義をダウンロードし、プロジェクトビューの外部ライブラリノードに表示します。

オプション

Node.js コアライブラリの構成

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

Node.js コアを構成する

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | Node.js および NPM に移動します。

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

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

node_modules ライブラリの構成

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

ws_js_node_modules_added_settings.png

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

ws_js_configure_libraries_node_modules_marked_as_library_root.png

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

ライブラリのスコープの構成

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

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | JavaScript | ライブラリに移動します。開く設定: JavaScript ライブラリページには、すでに利用可能なすべてのライブラリのリストが表示されます。

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

  3. icons.general.add.png をクリックし、ライブラリスコープに含めるファイルまたはフォルダーを選択します。IntelliJ IDEA は、JavaScript ライブラリの使用スコープダイアログに戻ります。パスフィールドには、選択したファイルまたはフォルダーが表示されます。

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

例: HTML および Node.js コアライブラリのスコープの構成

IntelliJ IDEA の full-stack JavaScript アプリケーションで作業する場合、コード補完はクライアントサイドコードの Node.js API と Node.js コードの DOM API を提案していることがよくあります。これは、DOM API を持つ HTML ライブラリと Node.js API を持つ Node.js コアライブラリがデフォルトでプロジェクト全体で有効になっているために発生します。無関係な補完候補を取り除くには、これらのライブラリのスコープを設定する必要があります。

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

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワークJavaScript に移動し、ライブラリをクリックします。設定: JavaScript ライブラリページが開き、現在のプロジェクト用に構成されているすべてのライブラリが表示されます。

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

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

  4. HTML ライブラリのスコープを構成するには、icons.general.add.png をクリックし、クライアント側コードのあるフォルダーを選択して、ライブラリリストから HTML を選択します。

  5. Node.js コアライブラリのスコープを構成するには、もう一度 icons.general.add.png をクリックし、サーバー側コードを持つフォルダーを選択して、ライブラリリストから Node.js コアを選択します。

    ws_manage_lib_scope.png

    IntelliJ IDEA は、HTML および Node.js Core ライブラリのアイテムを解決し、選択したプロジェクトフォルダーのファイルのみで完成させることができます。

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

CDN リンクを介して追加されたライブラリの構成

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

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

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

    ws_js_configure_libraries_download_from_cdn.png

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

    ws_js_configure_libraries_vue_added_popup.png

    JavaScript ライブラリページでは、ダウンロードしたライブラリがリストに追加され、現在のプロジェクトのスコープ内で有効になります。

    ws_js_configure_libraries_vue_added.png

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

    ws_js_configure_libraries_download_from_cdn_show_in_project_view.png

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

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

    ws_js_configure_libraries_change_visibility.png

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

プロジェクトに JavaScript フレームワークファイルがあるとします。IntelliJ IDEA は編集したプロジェクトコードだけでなく、それをライブラリとして扱います。

カスタムライブラリを構成する

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

  2. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワークJavaScript をクリックしてから、ライブラリをクリックします。開いた設定: JavaScript ライブラリページで、追加をクリックします。新規ライブラリダイアログが開きます。

  3. 外部 JavaScript ライブラリの名前を指定し、icons.general.add.png をクリックして、リストからファイルの添付または添付ディレクトリを選択します。開いているダイアログで、ダウンロードしたフレームワークでファイルまたはフォルダーを選択します。

    ws_js_configure_libraries_add_custom.png

オプション

  • デフォルトでは、ライブラリはグローバルです。つまり、他のプロジェクトにアタッチすることができます。ライブラリの再利用を抑止するには、新規ライブラリダイアログでプロジェクトを選択します。

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

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

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

  • ファイルをエディターで開くか、プロジェクトビューで選択してステータスバーの the Hector icon をクリックします。IntelliJ IDEA は現在のファイルに関連するライブラリをリストするポップアップを開きます。リストを変更するには、スコープ内のライブラリリンクをクリックして、表示されるスコープの管理ダイアログでスコープ設定を編集します。

  • または、エディターでファイルを開き、コンテキストメニューから JavaScript ライブラリの使用を選択します。IntelliJ IDEA は、使用可能な構成済みライブラリのリストを開きます。現在のファイルに関連付けられているライブラリには、チェックマークが付いています。

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

    • ライブラリを現在のファイルに関連付けるには、このライブラリの横にあるチェックボックスをオンにします。

ライブラリを削除する

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワークJavaScript をクリックしてから、ライブラリをクリックします。設定: JavaScript ライブラリページが開き、すでに利用可能なすべてのライブラリのリストが表示されます。

  2. 必要なライブラリを選択し、除去をクリックします。