JavaScript ライブラリを構成する
言語と IDE のコンテキストでは、 ライブラリはファイルまたはファイルのセットです。 これらのファイルの関数とメソッドは、編集したプロジェクトコードから IntelliJ IDEA が取得する関数とメソッドに加えて、IntelliJ IDEA の内部知識に追加されます。 プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。
IntelliJ IDEA は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。
node_modules プロジェクト package.json の
dependenciesオブジェクトにリストされている Node.js パッケージを保持します。 詳細については、 node_modules ライブラリの構成を参照してください。ダウンロードした TypeScript 定義ファイルや CDN リンクから参照したライブラリ、 Node.js コア結節や任意の カスタムサードパーティライブラリを格納するための 外部ライブラリ 。
TypeScript コミュニティスタブをダウンロード (TypeScript 定義ファイル)
IntelliJ IDEA では、 DefinitelyTyped スタブをライブラリとして設定および使用できます。これは、次のような場合に特に役立ちます。
コード補完を改善するには、IntelliJ IDEA 静的解析には高度すぎるライブラリまたはフレームワークのシンボルを解決し、そのようなシンボルの型情報を追加します。
テストフレームワークからグローバルに定義されたシンボルを解決します。
以下の例は、 post() 関数が解決されていない Express アプリケーションのコードを示しています。
TypeScript 定義ファイルをインストールすると、IntelliJ IDEA は post() を正常に解決します。
IntelliJ IDEA を使用すると、インテンションアクションを使用してエディターから直接 TypeScript 定義ファイルをダウンロードできます。または、 設定: JavaScript ライブラリ ページでそれを行うこともできます。
インテンションアクションを使用して TypeScript 定義をダウンロードする
このライブラリまたはフレームワークの
インポートまたはrequireステートメントにキャレットを置き、 Alt+Enter を押して、 より良いタイプ情報を得るためのTypeScript 定義のインストール を選択します。
IntelliJ IDEA はライブラリの型定義をダウンロードし、 JavaScript。 ライブラリ ページのライブラリリストに追加します:
あるいは、 package.json を開き、型定義をダウンロードするパッケージにキャレットを置き、 Alt+Enter を押して、 「@types/<パッケージ名>」をインストールする を選択します。
JavaScript ライブラリページで TypeScript 定義をダウンロードする
Ctrl+Alt+S を押して設定を開き、 を選択します。
開いた ライブラリ ページで ダウンロード をクリックし、開いた ライブラリのダウンロード ダイアログで必要なライブラリを選択し、 ダウンロードしてインストール をクリックします。
IntelliJ IDEA は、ダウンロードした型定義を プロジェクト ツールウィンドウ (Alt+1) の 外部ライブラリ ノード下に表示します。
オプション
IntelliJ IDEA は現在のプロジェクトの範囲でダウンロードされた型定義を可能にします。 下記の ライブラリのスコープの構成に従ってこの範囲を変更することができます。 サンプル: HTML および Node.js コアライブラリのスコープの構成も参照してください。
Node.js コアライブラリを構成する
Node.js バイナリにコンパイルされる fs(英語)、 path(英語)、 http(英語) などのコアモジュールのコード補完と参照解決を取得するには、 Node.js コアモジュールソースを JavaScript ライブラリとして構成する必要があります。
Ctrl+Alt+S を押して設定を開き、 を選択します。
優先ランタイム フィールドで Node.js が選択されていることを確認してください。
Node.js ランタイム リストから必要な Node.js インストールを選択します。
Node.js コーディング支援(A) のチェックボックスを選択します。
Node.js コアライブラリはバージョン固有のものです。 JavaScript ランタイム ページで Node.js のバージョンを変更した場合は、もう一度チェックボックスを選択する必要があります。 その後、IntelliJ IDEA はこの新しいバージョン用の新しいライブラリを作成します。
node_modules ライブラリを構成する
プロジェクトの依存関係にコード補完を提供するために、IntelliJ IDEA は node_modules ライブラリを自動的に作成するため、Node.js モジュールはプロジェクトに保持されますが、それらに対してインスペクションは実行されないため、パフォーマンスが向上します。
プロジェクト ツールウィンドウ (Alt+1) では、 node_modules もライブラリとしてマークされています。
ただし、 node_modules ライブラリには、プロジェクトの package.json ファイルの dependencies オブジェクトにリストされているモジュールのみが含まれています。 IntelliJ IDEA は依存関係の依存関係を node_modules ライブラリに含めませんが、実際にはそれらをプロジェクトから除外します。
ライブラリのスコープを構成する
IntelliJ IDEA は、クライアント側のコードで Node.js API など、無関係な補完を提案することがあります。 これは、デフォルトで IntelliJ IDEA がプロジェクトフォルダー全体の補完のためにライブラリを使用するためです。 IntelliJ IDEA では、ライブラリのスコープを設定することでコード補完を調整できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
ライブラリ ページには、利用可能なライブラリのリストが表示されます。
必要なライブラリの横にある 有効 チェックボックスをオフにし、 スコープの管理 をクリックします。 JavaScript ライブラリの使用箇所ダイアログが開きます。 使用スコープダイアログが開きます。
JavaScript ライブラリの使用スコープ ダイアログで、 追加 ボタン (
) をクリックし、ライブラリスコープに含めるファイルまたはフォルダーを選択します。 JavaScript ライブラリの使用スコープ ダイアログでは、 パス フィールドに選択したファイルまたはフォルダーが表示されます。追加されたファイルまたはフォルダーごとに、 ライブラリ リストから、構成するライブラリを選択します。
サンプル: HTML および Node.js コアライブラリのスコープを構成する
IntelliJ IDEA でフルスタックの JavaScript アプリケーションに取り組んでいると、コード補完がクライアント側のコードに Node.js API をいくつか提案し、Node.js コードに DOM API を提案していることに気付くことがよくあります。 これは、DOM API を使用する HTML ライブラリと Node.js API を使用する Node.js コアライブラリがプロジェクト全体でデフォルトで有効になっているために発生します。 無関係な補完候補を取り除くには、これらのライブラリのスコープを構成する必要があります。
Ctrl+Alt+S を押して設定を開き、 を選択します。
ライブラリ ページには、利用可能なライブラリのリストが表示されます。
HTML および Node.js コア の項目の横にある 有効 のチェックボックスをオフにします。
スコープの管理 をクリックします。 「JavaScript ライブラリの使用スコープ 」ダイアログが開きます。
HTML ライブラリのスコープを構成するには、「
」をクリックします。
開いたダイアログで、クライアント側のコードが含まれるフォルダーを選択し、 開く をクリックします。
JavaScript ライブラリの使用スコープ ダイアログに戻り、選択したフォルダーがリストに追加されます。
各フォルダーの横にある ライブラリ リストから、 HTML を選択します。
Node.js コア ライブラリのスコープを構成するには、
を再度クリックし、サーバー側コードを含むフォルダーを追加し、それぞれに対して ライブラリ リストから Node.js コア を選択します。
現在、IntelliJ IDEA は HTML および Node.js コアライブラリからアイテムを解決し、これらの選択されたプロジェクトフォルダーからのファイルでのみ補完して提案します。
同様に、自動的に作成される node_modules ライブラリのスコープを構成できます。 node_modules ライブラリの構成を参照してください。
CDN リンク経由で追加されたライブラリを構成する
ライブラリ .js ファイルが CDN リンクを介して参照される場合、ランタイムでは使用できますが、IntelliJ IDEA では表示されません。 そのようなライブラリ .js ファイルから補完リストにオブジェクトを追加するには、ファイルをダウンロードして外部ライブラリとして構成します。
ライブラリをダウンロードする
ライブラリへの CDN リンクにキャレットを置き、 Alt+Enter を押して、リストから ライブラリのダウンロード を選択します。
ライブラリは IntelliJ IDEA キャッシュにダウンロードされます (プロジェクトにはダウンロードされません)。情報メッセージを含むポップアップが表示されます。
JavaScript ライブラリ ページで、ダウンロードしたライブラリがリストに追加されます。
プロジェクト ツールウィンドウ (Alt+1) では、ライブラリは 外部ライブラリ ノード下に表示されます。
ライブラリの可視性を変更する
デフォルトでは、IntelliJ IDEA はダウンロードしたライブラリを グローバル としてマークします。これにより、このライブラリは他の IntelliJ IDEA プロジェクトでも有効化および再利用できます。 このデフォルト設定を変更するには、リストでダウンロードしたライブラリを選択し、 Edit をクリックし、開いた ライブラリの編集 ダイアログで プロジェクト を選択します。
カスタムのサードパーティ JavaScript ライブラリを構成する
プロジェクトまたはマシン上の他の場所に JavaScript フレームワークファイルがあり、それを編集するプロジェクトコードとしてだけでなく、ライブラリとして IntelliJ IDEA に処理させたいとします。
必要なフレームワークファイルをダウンロードします。
Ctrl+Alt+S を押して設定を開き、 を選択します。
ライブラリ ページで、 追加 をクリックします。
新規ライブラリ ダイアログで、外部 JavaScript ライブラリの名前を指定します。
追加 ボタン (
) をクリックし、リストから ファイルのアタッチ… または ディレクトリのアタッチ… を選択します。
ファイルブラウザーで、フレームワークをダウンロードしたファイルまたはフォルダーを選択します。
OK をクリックすると、 ライブラリ ページに戻り、新しいライブラリがリストに追加されます。
プロジェクト ツールウィンドウ (Alt+1) では、ライブラリは 外部ライブラリ ノード下に表示されます。
オプション
デフォルトでは、ライブラリは現在のプロジェクト全体の有効範囲で有効になっています。 ライブラリのスコープの構成の説明に従って、このデフォルト設定を変更することができます。
ドキュメントURL 領域で、ライブラリまたはフレームワークの公式ドキュメントへのパスを指定します。 このライブラリのシンボルで Shift+F1 を押すと、IntelliJ IDEA はこの URL を開きます。
ファイルに関連付けられたライブラリを表示する
エディターでファイルを開き、 Ctrl+Shift+A を押して、リストから JavaScript ライブラリの使用 を選択します。
IntelliJ IDEA には、使用可能な構成済みライブラリのリストが表示されます。 現在のファイルに関連付けられているライブラリにはチェックマークが付いています。
現在のファイルをライブラリのスコープから削除するには、このライブラリの横にあるチェックマークを外します。
ライブラリを現在のファイルに関連付けるには、このライブラリの横にチェックを入れます。
ライブラリを削除する
Ctrl+Alt+S を押して設定を開き、 を選択します。
ライブラリ ページには、使用可能なライブラリのリストが表示されます。
ライブラリを選択して 除去 をクリックします。