Meteor

1. Node.js をダウンロードしてインストールします。

2. 設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。

3. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 Meteor および Handlebars/Mustache プラグインを 設定 | プラグイン ページの Marketplace タブにインストールします。

定型テンプレートから Meteor プロジェクトを作成する

1. ウェルカム 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 プロジェクト ダイアログが開きます。

2. 左側のペインで、 Meteor を選択します。

3. 右側のペインで：

   1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

   2. Meteor 実行可能ファイルの場所を指定します (Meteor のインストールを参照)。

   3. テンプレート リストから、生成するサンプルを選択します。 基本的なプロジェクト構造を生成するには、 デフォルト オプションを選択します。

   4. ファイル名 フィールドに、生成される相互に関連する .js 、 .html 、 .css ファイルの名前を入力します。 このフィールドは、 デフォルトサンプルタイプが テンプレート ドロップダウリストから選択されている場合にのみ使用できます。

空の PhpStorm プロジェクトを作成する

1. ウェルカム 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 プロジェクト ダイアログが開きます。

2. 左側のペインで、 PHP 空プロジェクト を選択します。 右側のウィンドウで、アプリケーションフォルダーを指定し、 作成 をクリックします。

すでにマシン上にあるアプリケーションソースを開く

• ウェルカム 画面で Open をクリックするか、メインメニューから ファイル | ディレクトリを開く を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

1. ウェルカム 画面で リポジトリのクローン をクリックします。

   あるいは、メインメニューから ファイル | 新規 | バージョン管理からプロジェクト…、 Git | クローン…、 VCS | バージョン管理から取得 を選択します。

   メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例： Mercurial または Perforce​​。

2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする (クローン)を参照してください。

既存のプロジェクトで Meteor サポートを構成する

1. 設定 ダイアログ（Ctrl+Alt+S ）で 言語 & フレームワーク | JavaScript | Meteor に移動します。 Meteor ページが開きます。

2. Meteor 実行ファイルへのパスを指定します。 標準インストールプロシージャに従った場合、PhpStorm はファイルを自動的に検出します。

3. .meteor/local フォルダーとその内容をプロジェクト分析に含めるには、 オープンプロジェクトの ".meteor/local" ディレクトリを自動的に除外 チェックボックスをオフにしてください。 詳細については、下記の 除外されたファイルを隠すを参照してください。

4. Meteor パッケージを外部ライブラリとして自動的にインポートする チェックボックスが選択されていることを確認します。

   • チェックボックスが選択されている場合、PhpStorm は meteor/packages ファイルから外部パッケージを自動的にインポートします。 その結果、PhpStorm はコーディング支援をフルで提供します。 例えば、 Meteor の組み込み関数や check(true) 、サードパーティーパッケージの関数への参照解決、適切な構文・エラーハイライト、ソースマップによるデバッグなどが行えます。

   • このチェックボックスをオフにすると、PhpStorm は meteor/packages ファイルから外部パッケージを自動的にインポートしません。 その結果、コーディング支援は提供されません。 状況を改善するには、エディターで meteor/packages ファイルを開き、 パッケージをライブラリとしてインポートする リンクをクリックするか、 meteor --update コマンドを実行します。

5. PhpStorm が Meteor ライブラリをプロジェクトにアタッチしていることを確認してください。

   1. 設定 ダイアログ（Ctrl+Alt+S ）で 言語 & フレームワーク | JavaScript | ライブラリ に移動します。

   2. 表示される 設定: JavaScript ライブラリ ページで、 ライブラリ リストの Meteor プロジェクトライブラリの横にあるチェックボックスが選択されていることを確認します。

追加の Meteor パッケージをダウンロードする

1. エディターで .meteor/local/packages ファイルを開きます。

2. 画面の右上隅にある Meteor パッケージのインポート リンクをクリックします。

3. 開いたダイアログで、プロジェクトで開発しようとしているアプリケーションの種類に応じてダウンロードするパッケージを指定します。

   • クライアント

   • サーバー

   • Cordova: このオプションを選択すると、iOS や Android 用の Meteor アプリケーション開発をサポートするパッケージがインポートされます。詳細は Meteor Cordova Phonegap Integration を参照してください。

.meteor/local フォルダーを非表示にする

• プロジェクト ツールウィンドウ（Alt+1 ）のツールバーにある ボタンをクリックし、 除外ファイルの表示 オプションの横にあるチェックマークを外します。

Meteor 実行構成を作成する

1. ツールバーの 実行 / デバッグ構成 ウィジェットから 実行構成の編集 を選択し、 新規構成の追加​ ボタン () をクリックして、リストから Meteor を選択して 構成設定を開きます。

   

2. 「構成 」タブで、インストールに従って Meteor 実行可能ファイルへのパスを指定します (「Meteor のインストール 」を参照)。

3. 実行するアプリケーションファイルが保存されているフォルダーを指定します。 このフォルダーはルートに .meteor サブフォルダーが必要で、そうすることで PhpStorm がアプリケーションを Meteor プロジェクトとして認識します。

   デフォルトでは、作業ディレクトリはプロジェクトのルートフォルダーです。

オプションで設定できます。

1. 必要に応じて、 プログラムの引数 フィールドで、起動時に実行可能ファイルに渡されるコマンドラインの追加パラメーターを指定します。 これらは、たとえば、 --dev、 --テスト、 --prod であり、アプリケーションが実行されている環境（開発、 テスト 、または 実稼働環境）を示し、起動時にさまざまなリソースがロードされます。

2. デフォルトで、PhpStorm は 実行 ツールウィンドウにアプリケーション出力を表示します。 クライアント側のコード実行の結果を表示するには、 ブラウザー / Live Edit タブで 起動後 チェックボックスを選択し、リストから開くブラウザーを選択します。 下のフィールドに、アプリケーションを開くための URL アドレスを指定します。 デフォルト値は http://localhost:3000 です。

Meteor アプリケーションを実行する

1. 上で説明したように実行 / デバッグ構成を作成するを選択するか、既存のものを変更してダイアログで 実行 をクリックします。

   あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、 をクリックします。

2. 実行 ツールウィンドウや、 上記のようにアプリケーション起動時にブラウザーを開くよう構成している場合はブラウザーでも出力を確認できます。

1. 必要に応じて、コード内に ブレークポイントを設定してください。

2. Meteor 実行 / デバッグ構成を 上記の説明に従って作成します。 「ブラウズ / ライブ編集 」タブで、「起動後 」チェックボックスを選択し、リストから「Chrome 」を選択して、 JavaScript デバッガー付き チェックボックスを選択します。

3. デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある をクリックするか、メインメニューから 実行 | デバッグ <構成名> を選択します。

   デバッグ ツールウィンドウが開き、2 つのタブが表示されます。1 つは でマークされたサーバーサイドコードのデバッグ用、もう 1 つは でマークされたクライアントサイドコードのデバッグ用です。

4. サスペンド中のプログラムを調査や プログラムのステップ実行ができます。

5. 必要に応じて、 以下で説明するように、その場でアプリケーションへの変更をプレビューします。