PyCharm 2019.1ヘルプ

npmおよびYarn

PyCharmはnpm(英語)およびYarn(英語)パッケージマネージャーと統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、削除することができます。Node.jsとNPMページはパッケージを管理するための専用のUIを提供します。もちろん、内蔵のターミナルのコマンドラインからも実行できます。

PyCharmではnpmスクリプトの実行とデバッグ(英語)もできます。PyCharmは package.json ファイルを解析し、スクリプトの定義を認識し、スクリプトをツリービューで表示します。また、ツリー内のスクリプトと package.json ファイル内のその定義の間を移動できます。

PyCharmはYarnワークスペース(英語)を持つプロジェクトを検出し、ワークスペースの package.json ファイルにリストされているがルート node_modules フォルダーにあるすべての依存関係を索引付けします。

PyCharm indexes all the dependencies listed in different package.json file but stored in the root node_modules folder

始める前に

  1. Node.js(英語)をダウンロードしてインストールします。npmもインストールされているため、これを使用する場合は、前の手順を完了してください。

  2. Yarnを使用するには、Yarn(英語)の公式Webサイトの説明に従ってインストールしてください。

プロジェクトパッケージマネージャーの選択

PyCharmでは、プロジェクトでnpmとYarnのどちらを使用するかを選択できます。デフォルトでは、PyCharmはnpmを推奨します。ただし、yarn.lock ファイルを使用してプロジェクトを開き、Yarnがマシンにインストールされている場合、PyCharmは自動的にこのプロジェクトのパッケージマネージャーをYarnに変更します。YarnをデフォルトのPyCharmパッケージマネージャーとして設定することもできます。

現在のプロジェクトのパッケージマネージャーを選択する

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、言語とフレームワーク | Node.jsとNPMに進みます。Node.js および NPMページが開きます。

  2. システムのデフォルトインストールを使用するには、パッケージ・マネージャーリストからnpmまたはyarnを選択します。パッケージマネージャーのカスタムインストールを使用するには、選択をクリックして、表示されたダイアログでパッケージマネージャーへの適切なパスを選択します。

    ws_package_manager_configuration.png

    実行/デバッグ構成: NPMダイアログのパッケージ・マネージャーリストから Project エイリアスを選択すると、PyCharmは選択されたパッケージマネージャーを自動的に使用します。PyCharmはまた、実行 'npm install' / 実行 'yarn install'コマンドを実行するかnpm / Yarnスクリプトを実行するたびに、選択されたパッケージマネージャーへのパスを使用します。詳細はスクリプトの実行とデバッグを参照してください。

YarnをデフォルトのPyCharmパッケージマネージャーとして設定するには

  1. 新規プロジェクトの設定ダイアログ(ファイル | 新規プロジェクトの設定...)で、言語とフレームワークNode.js および NPMをクリックします。

  2. 開いたNode.js および NPMページで、パッケージ・マネージャーリストから yarn を選択します。その後、新しいプロジェクトを作成するたびに、PyCharmはデフォルトとしてYarnを提案します。

内蔵ターミナルを使ってパッケージをインストールする

ご存知のように、npmはパッケージをグローバル(英語)にインストールすることも、プロジェクトの依存関係開発の依存関係としてインストールすることもできます。詳細については、npm(英語)の公式Webサイトを参照してください。Yarnでは、パッケージをグローバル(英語)に、またはプロジェクトの依存関係としてインストールすることもできます。詳細については、Yarn(英語)の公式Webサイトを参照してください。

パッケージをインストールする

  • 埋め込みターミナルAlt+F12)で、以下のいずれかのコマンドを入力します。

    • グローバルインストール用のnpm install --global <package_name> または yarn global add <package_name>

    • パッケージをプロジェクト依存関係または開発依存関係としてインストールするには、npm install --save <package_name>npm install --save-dev <package_name>、または yarn add <package_name> --dev

package.jsonファイルからすべての依存関係をインストールするには

  • 埋め込みターミナルAlt+F12)で、以下のいずれかのコマンドを入力します。

    • npm install
    • yarn install

    その結果、現在のフォルダーから package.json にリストされているすべての依存関係を取得します。package.jsonを編集するからさらに学びましょう。

Node.jsおよびNPMページでのパッケージのインストールとアップグレード

PyCharmはNode.jsとNPMページに現在インストールされているすべてのパッケージを表示します。このページを開くには、設定/環境設定ダイアログ(Ctrl+Alt+S)で、言語とフレームワークNode.js および NPMをクリックします。グローバルにインストールされたパッケージは一番上にリストされています。各パッケージについて、PyCharmは現在インストールされているバージョンと利用可能な最新バージョンを表示します。

パッケージをインストールする

  1. the Add button をクリックして表示される使用可能なパッケージダイアログで、必要なパッケージを選択します。

  2. デフォルトでは、最新のパッケージバージョンがインストールされています。別のものをインストールするには、バージョン指定チェックボックスを選択してリストから必要なバージョンを選択します。

  3. デフォルトのインストールはローカルです。別のインストールタイプを使用するには、オプションチェックボックスを選択し、グローバルインストールの場合は -g を、依存関係/開発依存関係としてパッケージをインストールする場合は --save / --save-dev を入力します。npm(英語)およびYarn(英語)の公式Webサイトから詳細を学びましょう。

パッケージの場所を表示する

  • パッケージ名の上にマウスポインタを置きます。PyCharmはパッケージへのパスをツールチップに表示します。

パッケージを最新バージョンにアップグレードする

  • リストからパッケージを選択して the Upgrade buttonをクリックします。

パッケージを削除する

  • リストからパッケージを選択して the Uninstall (Delete) buttonをクリックします。

package.jsonを編集する

PyCharmは、package.json ファイルでプロジェクトの依存関係を処理するのに役立ち、広範なコーディング支援を提供します。

  • パッケージ名についてはコード補完。

    Code completion for package names
  • 利用可能な最新のパッケージバージョンに関する情報。

    Showing the latest available package version
  • npm install <package>@<version> または yarn add <package>@<version>を介してインストールできるバージョンの範囲に関する情報。 npm install または yarn install を実行すると、この範囲から入手可能な最新バージョンがインストールされます。

    ツールチップの情報を表示するには、Ctrl または Cmd を押してバージョンの上にカーソルを合わせます。セマンティックバージョニングの詳細については、npmオフィシャルドキュメント(英語)を参照してください。

    Showing the range of available package versions
  • 以前のパッケージバージョンのコード補完。 Ctrl+Space を押すか、最新のものとは異なるバージョンを入力し始めると、PyCharmはパッケージの以前のすべてのバージョンを含む候補リストを表示します。

    Code completion for previous package versions

  • パッケージのクイックドキュメント検索。

    Quick documentation look-up for packages

package.jsonファイルから依存関係をインストールするには、以下のいずれかを実行します。

  • 関連する package.json ファイルをエディターで開くか、プロジェクトツールウィンドウで選択してコンテキストメニューから実行 'npm install'を選択します。

  • ポップアップで実行 'npm install'をクリックしてください。

    ws_npm_yarn_package_run_npm_install_package_json_dependent.png
    PyCharmは、依存関係がまだインストールされていない場合、または依存関係が変更された場合に、このポップアップを表示します。ポップアップを閉じるか再度表示しないを選択してポップアップをオフにしても、実行 'npm install'アクションまたはを使用して依存関係をインストールできます。

プロジェクトの依存関係を更新する

  • ポップアップで実行 'npm install'をクリックします。

    ws_npm_yarn_package_run_npm_update.png

    プロジェクトを開いたり、バージョン管理から更新したり、package.jsonを編集するたびに、PyCharmはこのポップアップを表示します。

    PyCharmは、dependencies または devDependencies からのパッケージがインストールされていて、それらのバージョンが指定された範囲と一致するかどうかをチェックするインスペクションも実行します。

    ws_node_inspect_that_package_up_to_date.png

    インスペクションが何らかの不一致を検出した場合は、迅速な修正を提案します。適用するには、Alt+Enter を押して、リストから実行 'npm install'を選択します。

    ws_node_inspect_that_package_up_to_date_quick_fix.png

スクリプトの実行とデバッグ

npmまたはYarnスクリプトは、エディターの package.json ファイルから、専用のnpmツールウィンドウにあるスクリプトのツリーから、専用の実行設定に従って、またはstart-upまたはbefore-launchタスクとして自動的に起動できます。

スクリプトの実行結果は実行ツール・ウィンドウに表示されます。ツールウィンドウには、npmまたはYarnスクリプトの出力、エラーの報告、見つからなかったパッケージまたはプラグインの一覧などが表示されます。最後に実行されたスクリプトの名前がツールウィンドウのタイトルバーに表示されます。

スクリプトのデバッグセッション中に、PyCharmはデバッグツールウィンドウを開き、そこでプログラムをステップ実行し、プログラムの実行を停止して再開し、中断時にそれを調べ実際のHTML DOMを表示することができます

スクリプトのデバッグを有効にする

  • $NODE_DEBUG_OPTIONpackage.json ファイルの定義に追加します。次に例を示します。

    { "name": "application-name", "version": "0.0.1", "scripts": { "main": "node $NODE_DEBUG_OPTION ./app-compiled.js" } }

package.jsonからのスクリプトの実行とデバッグ

PyCharmは package.json ファイルから単一のスクリプトを素早く起動させます。いくつかのスクリプトを実行またはデバッグするには、実行構成またはnpmツールウィンドウを使用します。

  • エディターで package.json ファイルを開き、スクリプトの横にあるガターの中の Run をクリックして、コンテキストメニューから実行 <スクリプト名>またはデバッグ <スクリプト名>を選択します。

    ws_run_npm_task.png

npmツールウィンドウからのスクリプトの実行とデバッグ

ツールウィンドウは、プロジェクトツールウィンドウで package.json ファイルを選択するか、エディターで開き、コンテキストメニューからnpm スクリプトの表示を選択すると開きます。npmまたはYarnを呼び出すとすぐに、それが呼び出された package.json ファイルの scripts プロパティー内で定義されたスクリプトのツリーの構築を開始します。プロジェクトに複数の package.json ファイルがある場合は、それらのそれぞれに対して別々のスクリプトツリーを作成し、以前に作成したツリーを削除せずにスクリプトを実行できます。各ツリーは別々のノードに表示されます。

まだ開いていない場合はnpmツールウィンドウを開く

  • プロジェクトツールウィンドウで必要な ファイルを選択するか、エディターで開き、コンテキストメニューからnpm スクリプトの表示を選択します。npmツールウィンドウが開き、選択または開いた package.json ファイルに従って構築されたスクリプトツリーが表示されます。

すでに開いているnpmツールウィンドウでスクリプトのツリーを作成する

  • npmツールウィンドウで、ツールバーの the Add button をクリックして、リストから必要な ファイルを選択します。デフォルトでは、PyCharmはプロジェクトのルートに ファイルを表示します。

  • 別の ファイルがある場合は、package.jsonを選択してくださいをクリックして表示されるダイアログで必要な ファイルを選択します。PyCharmは、選択した ファイルへのパスをタイトルに含む新しいノードを追加し、その新しいノードにスクリプトツリーを作成します。

ツリーを再構築する

  • 必要なノードに切り替えて、ツールバーの Reload をクリックします。

ツリー内のスクリプトを名前でソートする

  • ツールバーの Settings をクリックし、メニューから次でソートを選択してから名前を選択します。
    デフォルトでは、ツリーには package.json (オプション定義順)で定義されている順序でスクリプトが表示されます。

1つのスクリプトを実行する

  • スクリプトをダブルクリックしてください。

  • ツリーでスクリプトを選択して Enter を押すか、コンテキストメニューから実行<script name>を選択します。

1つのスクリプトをデバッグする

  • ツリー内のスクリプトを選択して、コンテキストメニューからデバッグ <スクリプト名>を選択します。

複数のスクリプトを実行またはデバッグする

  • 複数選択モードを使用します。Shift (隣接するアイテムの場合)または Ctrl (隣接しないアイテムの場合)キーを押しながら必要なスクリプトを選択してから、選択のコンテキストメニューから実行またはデバッグを選択します。

実行構成によるスクリプトの実行

エディターまたはnpmツールウィンドウからスクリプトを実行またはデバッグすると、PyCharmは自動的に一時的な実行設定を作成します。使用する以外に、独自のnpm実行設定を作成し起動することができます。

  1. メインメニューで実行 | 構成の編集を選択します。

  2. ツールバーの the Add button をクリックして、リストからnpmを選択します。実行/デバッグ構成: npmダイアログが開きます。

  3. 実行するCLIコマンド、実行するスクリプト(区切り文字として空白を使用)、およびこれらのスクリプトが定義されている package.json ファイルの場所を指定します。必要に応じて、スクリプトを実行するためのコマンドライン引数(英語)入力します(英語)

  4. 使用するNode.jsインタープリターを指定してください。これはローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。

    必要に応じて、Node.jsに渡すNode.js固有のオプションパラメータ環境変数(英語)を指定します。

  5. 使用するパッケージマネージャーを指定してください。 Project エイリアスを選択した場合、PyCharmはNode.jsページのデフォルトのプロジェクトパッケージマネージャーを使用します。関連するパッケージエイリアス( npmまたはyarn )を選択するか、パッケージマネージャーのカスタムインストールへの明示的なパスを指定することもできます。

  6. mtoolbarバーのリストから新しく作成された実行構成を選択してから、Runをクリックします。出力は実行ツール・ウィンドウに表示されます。

起動時にスクリプトを自動的に実行する

定期的に実行するスクリプトがいくつかある場合は、対応する実行設定を起動タスクのリストに追加できます。タスクはプロジェクトの起動時に自動的に実行されます。

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、ツール | 開始タスクに進みます。

  2. 開いた起動タスクページで、ツールバーの the Add button をクリックします。

  3. リストから、必要なnpm実行設定を選択します。設定がリストに追加されます。

    プロジェクトに適用可能な構成がない場合は、the Add button` をクリックして構成の編集を選択します。次に、開いた実行/デバッグ構成: NPMページで必要な設定を使用して構成を定義します。新しい設定を保存すると、自動的に起動タスクのリストに追加されます。

起動前タスクとしてのスクリプトの実行

  1. メインメニューで実行 | 構成の編集を選択して実行/デバッグ構成ダイアログダイアログを開き、リストから必要な設定を選択するか、または Add New Configuration をクリックして関連する実行設定タイプを選択して新しい設定を作成します。

  2. 開いたダイアログで、起動前エリアの Add をクリックし、ドロップダウンリストからnpm スクリプトの実行を選択します。

  3. 開いたNPMスクリプトダイアログで、npm実行/デバッグ構成設定を指定します。

最終更新日: 2019年7月15日

関連事項

リファレンス:

関連ページ:

Node.jsとNPM

このページは、Node.jsプラグインが有効になっているときに設定ダイアログボックスに表示されます。このプラグインはPyCharmにバンドルされていませんが、プラグインを管理するに従ってJetBrainsプラグインリポジトリからインストールできます。Node インタープリターこのフィールドには、現在...

実行ツール・ウィンドウ

表示 | ツール・ウィンドウ | 実行実行ツールウィンドウには、アプリケーションで生成された出力が表示されます。複数のアプリケーションを実行している場合は、それぞれが実行/デバッグ構成が適用された後に名前が付けられたタブに表示されます。各タブの外観は、実行されているアプリケーションのタイプに依存し、...

デバッグツールウィンドウ

表示 | ツール・ウィンドウ | デバッグこのツールウィンドウは、デバッグを開始すると使用可能になります。アプリケーションのデバッグセッションによって生成された出力が表示されます。複数のアプリケーションをデバッグする場合、各アプリケーションの出力は、対応する実行/デバッグ構成の名前を付けた別のタブに...

プログラムのステップ・スルー

ブレークポイントに達するか、プログラムが一時停止されると、デバッグツールウィンドウがアクティブになり、プログラムの実行を制御できます。このために、実行メニューコマンド、またはデバッグツールウィンドウのステップツールバーのアイコンを使用することができます。各ステップアクションは、選択したアクションに応...

中断されたプログラムの調査

実行がブレークポイントに到達したとき、またはプログラムを手動で中断したときは、フレームを分析してアプリケーションを調べることができます。フレームはアクティブなメソッドまたは関数呼び出しに対応します。フレームには、呼び出されたメソッドまたは関数のローカル変数、その引数、および式評価を可能にするコードコ...

Node.js

この機能はProfessionalエディションでのみサポートされています。このエディションは有償で、優れた機能を提供します。詳細は比較表を参照してください。Node.jsはサーバーサイドでJavaScriptを実行するための軽量のランタイム環境です。PyCharmはNode.jsと統合して、アプリケ...