IntelliJ IDEA 2020.2ヘルプ

JavaScriptライブラリを構成する

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

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

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

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

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

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

次の例は、post() 関数が解決されていないNode 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. 必要なライブラリを選択し、除去をクリックします。

最終更新日: 2020年8月19日