File Watchers
ファイルウォッチャー は、ファイルの変更を監視し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。 PhpStorm は、多くの標準的かつ一般的なサードパーティツール（コンパイラー 、コンプレッサー、整形ツールなど）用にあらかじめ定義されたファイルウォッチャーテンプレートを提供します。
カスタムファイルウォッチャーを設定して、他のサードパーティツールを実行できます。
File Watchers には 2 つの専用 コードインスペクションがあります。
ファイル監視使用可能インスペクションは、定義済みの File Watcher が適用可能なすべてのファイルで実行されます。 プロジェクトに関連するファイルウォッチャーが設定されていない場合、PhpStorm は追加を提案します。
ファイル監視問題インスペクションは実行中の File Watcher によって呼び出され、それに固有のエラーをハイライトします。
利用可能なテンプレートの 1 つを使用するか、File Watcher を最初から構成することができます。 設定したファイル監視は、プロジェクト設定または IDE 設定に保存して、さまざまなプロジェクトで使用できます。
特定のツール用の File Watchers の詳細については、対応するページをご覧ください：
PhpStorm でこれらのツールの一部を使用するには、 設定 | プラグイン ページで JetBrains Marketplace からプラグインをインストールするの説明どおりにプラグインをインストールする必要があることに注意してください。
始める前に
設定で File Watchers プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに File Watchers と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
File Watcher の作成
設定 ダイアログ（Ctrl+Alt+S ）で、 ツール の File Watchers をクリックします。 File Watchers ページが開き、このプロジェクトと IDE ですでに構成されているファイルウォッチャーのリストが表示されます。
をクリックし、File Watcher を作成するための定義済みテンプレートを選択します。 選択するテンプレートは、使用するツールによって異なります。 リストにないツールを使用する場合は、 カスタム を選択してください。
新規ウォッチャーダイアログが開きます。
命名 フィールドに、File Watcher の名前を入力します。 デフォルトでは、PhpStorm は選択した定義済みテンプレートの名前を提案します。
入力ファイルの予想されるタイプと場所の構成
ウォッチするファイルを選択 領域のコントロールを使用して、ファイルウォッチャーを適用するファイルの範囲を定義します。
ファイルタイプ リストから、予想される入力ファイルの種類を選択します。 File Watcher は、この種類のファイルのみを分析および処理の対象と見なします。 ファイルタイプは、 ファイルタイプとファイル拡張機能の関連付けに基づいて認識されます。
デフォルトでは、このフィールドには選択した定義済みテンプレートに従ってファイルタイプが表示されます。
ファイル監視が適用される スコープ を選択します。
これらのファイルを変更すると、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスの状態に応じて、直ちに、または保存またはフレームの非アクティブ化時にファイル監視が起動されます。
リストから定義済みスコープの 1 つを選択します。 プロジェクトレベルのファイル監視の場合は、
をクリックして、表示される スコープ ダイアログでカスタムスコープを設定することもできます。すべての場所：: 下記のすべての範囲
プロジェクトファイル：: プロジェクトコンテンツルート内のすべてのファイル (ディレクトリ構造 を参照)。
プロジェクトのプロダクション用ファイル：: テストソースを除くプロジェクトコンテンツルート内のすべてのファイル。
プロジェクトテストファイル：: プロジェクト内のすべてのファイルがテストソースのルートになります。
スクラッチとコンソール：: プロジェクト ツールウィンドウにある スクラッチとコンソール ディレクトリからのすべてのファイル。
開いているファイル：: 現在エディターで開かれているすべてのファイル。
現在のファイル：: アクティブなエディタータブで開かれたファイル
VCS スコープ：: これらのスコープは、 プロジェクトがバージョン管理されている場合にのみ使用できます。
すべての変更ファイル：: すべての変更されたファイル、つまりすべての既存の変更リストに関連付けられたすべてのファイル。
デフォルト変更リスト：: 変更リスト  
デフォルトに関連付けられているすべてのファイル。
または、
をクリックし、開いた スコープダイアログで カスタムスコープを構成します。オプション: File Watcher が依存関係を処理する方法を指定します。 ルートファイルとは、 指定したスコープ内の他のファイルに（例えば
import経由で）含まれていないファイルです。ファイルウォッチャーをルートファイルに対してのみ実行するには、 ルートファイルのみをトラックする チェックボックスを選択します。
このチェックボックスをオフにすると、File Watcher を呼び出したファイルと、指定したスコープ内でこのファイルが再帰的に含まれているすべてのファイルに対してウォッチャーが実行されます。
スコープ 設定は ルートファイルのみをトラックする チェックボックスの設定よりも優先されることに注意してください。依存関係が指定された範囲の外にある場合、ファイルウォッチャーはそれに適用されません。
外部ツールとの相互作用の構成
変更時に実行するツール 領域で、使用するツール、ツールに渡す引数、予想される出力ファイルの種類などを指定します。
プログラム フィールドに、ツールの実行可能ファイルへのパス（ .exe 、 .cmd 、 .bat 、または特定のツールに応じてその他）を指定します。
引数 フィールドで、ツールに渡す引数を定義します。
引数は通常、実際のファイル名に置き換えられる
$FileName$や$FileNameWithoutExtension$などの マクロを使用して指定されます。マクロを手動で入力するか、
をクリックして、開いた マクロ ダイアログのリストから関連するパターンを選択します。リフレッシュする出力パス フィールドで、ツールがその出力を保管するファイル（結果のソースコード、ソースマップ、依存関係）を指定します。 これらの設定に基づいて、PhpStorm はコンパイルで生成されたファイルを認識します。
通常、出力パスは マクロを使用して指定されます。 手動で入力するか、
をクリックして、開いたダイアログのリストから関連するものを選択できます。複数のマクロを指定するには、区切り文字としてコロン
:を使用します (例:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map)。作業ディレクトリと環境変数 隠し領域を展開します。
環境変数を定義します。 例: 構成しているツールの開始に必要なツールの
PATH変数を指定しますが、そのツールへのパスで参照されていません。 ほとんどの場合、 Node.js または ruby.exe です。 このような状況は、Node パッケージマネージャー (npm) または gem manager によるインストールではなく、カスタムの手動インストールが原因である可能性があります。作業ディレクトリ フィールドに、ツールを適用するディレクトリを指定します。
ツールは常にファイルのコンテキストで呼び出されるため、デフォルトの作業ディレクトリは現在のファイルのディレクトリです。 デフォルトの作業ディレクトリは、
$FileDir$マクロを使用してすべての定義済みテンプレートで指定されます。 カスタム作業ディレクトリを指定するには、そのパスをフィールドに入力するか、
をクリックして パスの選択 ダイアログでディレクトリを選択するか、 をクリックして マクロ ダイアログのリストから希望の マクロを選択します。
詳細オプションの構成
拡張オプション 領域では、File Watcher のデフォルト動作をカスタマイズします。
ファイルウォッチャーを呼び出すイベントを指定します：
ソースコードに変更が加えられたらすぐにファイルウォッチャーを呼び出すには、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスを選択します。
チェックボックスをオフにすると、保存時（ ）または PhpStorm からフォーカスを移動したとき（フレームの非アクティブ化時）にウォッチャーが起動します。
デフォルトでは、File Watcher は、たとえばブランチをチェックアウトしたときにバージョンコントロールシステムから受信した更新など、保存された変更があると起動します。 このような変更を無視し、PhpStorm でコードを更新したときにのみファイルウォッチャーを呼び出すには、 外部の変更でウォッチャーをトリガーする チェックボックスをオフにします。
ファイルウォッチャーを PhpStorm の構文パーサーと連携させるかどうかを指定します：
構文エラーに関係なくウォッチャーをトリガーする チェックボックスをオンにすると、File Watcher はファイルの構文上の正確さに関係なく起動します。 ファイルウォッチャーは、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスのステータスに応じて、更新、保存、またはフレームの非アクティブ化時に開始されます。
構文エラーに関係なくウォッチャーをトリガーする チェックボックスをオフにすると、File Watcher は構文上無効なファイル内のすべてのトリガを無視し、エラーのないファイルでのみ起動します。
stdout から出力ファイルを作成する チェックボックスを使用して、出力ファイルの生成方法を指定します。
チェックボックスが選択されると、PhpStorm はネイティブツールの出力
standard output stream (stdout)を読み取り、そこから結果ファイルを生成します。チェックボックスをオフにすると、ツールはその出力を リフレッシュする出力パス フィールドで指定されたファイルに直接書き込みます。
コンソールの表示 リストで、File Watcher がいつコンソールを開くかを選択します。
常時：: このオプションを使用すると、ツールの実行が完了した後にコンソールが常に開きます。
エラー時：: このオプションを使用すると、
Exit codeが0と異なる場合にのみツール実行後にコンソールが開きます。なし：: コンソールをまったく開かないようにするには、このオプションを選択します。
File Watcher によって報告された情報をエディターに表示する
File Watcher で設定されたツールが、ファイルや特定の行へのリンク付きでコードのエラーや警告を報告する場合は、この情報をエディターで確認できます：
では、インスペクション ファイルウォッチャーの問題 を有効にします。
ウォッチャーの編集ダイアログの 出力フィルター フィールドで、照合したい出力のフォーマットを記述します。 そのためにマクロ
$FILE_PATH$、$LINE$、$MESSAGE$を使用します。\では、中括弧やドットなどの特別なシンボルを使用しないようにする必要があります。$MESSAGE$マクロと一致するテキストがエディターに表示されます。
サンプル
このツールは次のフォーマットでエラーを報告します：
エディターでエラーをハイライト表示するには、次の正規表現を出力フィルターとして使用してください：
ファイルウォッチャーの保存、有効化、無効化
新しい File Watcher を保存したら、現在のプロジェクト（レベル リストから プロジェクト を選択）でのみ使用可能にするか、すべてのプロジェクト（グローバル を選択）で使用可能にするかを決定できます。
ファイルウォッチャーを有効または無効にするには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、その横にあるチェックボックスをオンまたはオフにします。
定義済みのファイルウォッチャーが適用されるファイルを開くと、PhpStorm はウォッチャーの有効化を提案します：
ファイルウォッチャーが有効化されていると、選択したスコープ内の選択したタイプのファイルが変更または保存された際に自動的に開始されます。 詳細オプションの構成を参照してください。
ファイル監視の実行中にエラーが発生した場合、ファイル監視は自動的に無効になります。 ステータスを復元するには、ファイル監視を手動で有効にします。
保存時に File Watchers を自動的に実行する
変更を 保存すると、変更されたファイルで File Watchers が自動的に実行されるように IDE を設定できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
File Watcher オプションを有効にして、変更を適用します。
新しいプロジェクトでグローバル File Watchers を有効にする
グローバルFile Watchers は、今後作成するすべての新しいプロジェクトで自動的に有効にすることができます。
新規プロジェクトの設定 ダイアログ（ ）を開き、 に移動して、必要な File Watchers の横にあるチェックボックスを選択します。
または、 ようこそ画面で、 構成 リストから 設定 を選択します。 開いたダイアログで、関連する File Watcher の横にあるチェックボックスを選択します。
File Watcher における外部ツールの動作をカスタマイズする例
サードパーティツールに影響を与える唯一の方法は、コマンドラインモードで作業しているかのように引数を渡すことです。 これらの引数は、各ツールに固有です。 以下は、 SCSS コンパイラーのデフォルトの出力場所をカスタマイズする 2 つの例です。
SCSS コンパイラーをカスタマイズする
プロジェクトの構造は次のようになっています：
ご覧のとおり、 _grid.scss は Page.scss にインポートされます。 以下の例は、プロジェクトを手動または自動で保存するときに Page.scss が CSS にコンパイルされ、 _grid.scss の変更が生成する CSS ファイルにどのように反映されるかを示しています。
SCSS タイプのファイルウォッチャーを作成します。 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動し、ツールバーの
をクリックして、リストから SCSS を選択します。開いた 新しいファイルウォッチャー ダイアログでは、必須フィールドはすべてすでに入力されています。
実際、これらの設定だけでコンパイラーを正常に実行するのに十分です。
grid.scss を変更しましょう。例えば、31 行目の
margin-left: 0;をmargin-left: 12px;に置き換えます。 これによってファイルウォッチャーがトリガーされ、コンパイラーが Page.scss を処理します。 その結果、生成されるファイルが Page.scss の下にネストして表示されます：コンパイルされた CSS コードを含む Page.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた Page.css.map 。
コンパイラーを正常に実行するためにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をどのようにカスタマイズできるか確認するために、設定内容を詳しく見ていきましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動（ または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。
通常、PhpStorm からフォーカスを移すと (フレームが非アクティブ化されると)、コードは自動的に保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの 
をクリックします。 ファイルウォッチャーを編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。
デフォルトでは、ファイルウォッチャーはそのスコープ内のファイルが PhpStorm の外部で編集された場合でも起動します。 この動作を無効にして、内部で編集するときにのみファイルをトランスパイルするには、 外部の変更でウォッチャーをトリガーする チェックボックスをオフにします。
スコープを変更する
デフォルトで、PhpStorm はプロジェクト全体の .scss 拡張機能が付いたすべてのファイルの変更を監視します。 この設定は今回の例でも問題ありません。 ただし、スコープを変更して、未コミットの変更のみに処理を適用することもできます。 大規模なプロジェクトでは、これによって時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーを編集 ダイアログで、リストから該当するスコープを選択します。 詳しくは スコープとファイルの色 を参照してください。
カスタム出力場所
デフォルトでは、生成された .css および .css.map ファイルは元のファイルと同じフォルダーに保存され、 プロジェクト ツールウィンドウ (Alt+1) では元のファイルの子ファイルとして表示されます。 このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することもできます。
簡単なケースから始めましょう。 プロジェクトルートに custom_output.scss ファイルがあるとします。
custom_output.scss を編集してみましょう。例えば、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えます。 デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、 custom_output.scss の子として表示されます。
すべての出力を別のフォルダー（たとえば、 css ）に保存すると便利です。 css フォルダーを出力場所として使用してカスタム SCSS_custom_output ファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに次を入力します：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.cssリフレッシュする出力パス フィールドに次を入力します：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効化されていることを確認します。
ここで、たとえば custom_output.scss を編集し、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えると、PhpStorm は css フォルダーを作成し、生成する custom_output.css と custom_output.css.map ファイルをその中へ保存します。
カスタム出力場所: 元のフォルダー構造を保持する
次に、 .scss ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：
デフォルトの File Watcher では、生成されたファイルは元の .scss ファイルの隣に保存されます。
上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。
PhpStorm でフォルダー構造を維持するには、もう一つカスタムファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに次を入力します：
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.cssリフレッシュする出力パス フィールドに次を入力します：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効化されていることを確認します。
ここで、 custom_output_body.scss 、 custom_output_header.scss 、 custom_output_footer.scss を編集すると、PhpStorm は styles_structured の構造を保持したサブフォルダー構造を持つ css フォルダーを作成します。
CoffeeScript コンパイラーをカスタマイズする
次のフォルダー構造のプロジェクトがあるとします：
デフォルトの File ウォッチャーでは、生成されたファイルは元のファイルの子として表示されます。
このデフォルトの場所を変更して、生成されたファイルを別の JavaScript フォルダーに保存することができます。
生成されたすべてのファイルを出力 JavaScript フォルダーに保存する
CoffeeScript ファイルウォッチャーを作成します。
引数 フィールドに次を入力します：
--map --compile -o $ProjectFileDir$/JavaScript $FileName$リフレッシュする出力パス フィールドに次を入力します：
$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
その結果、プロジェクトツリーは次のようになります：
生成されたファイルを、 app ノードの元の構造を繰り返すフォルダー構造に格納することもできます。
出力フォルダーに元のフォルダー構造を保持する
CoffeeScript ファイルウォッチャーを作成します。
引数 フィールドに次を入力します：
--map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$リフレッシュする出力パス フィールドに次を入力します：
$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
その結果、プロジェクトツリーは次のようになります：
File Watcher のトラブルシューティング
File Watcher が無効になっていることを通知するエラーメッセージを含むポップアップが表示される場合があります
起こりうるエラーのリストは次のとおりです：
報告された問題 | 問題説明 | 回避策 |
|---|---|---|
| ファイルウォッチャーは、このプロジェクトで定義されていないスコープを使用します。 | ウォッチャーをダブルクリックして、使用可能なスコープを選択するか、新しいスコープを作成します。 |
| このプロジェクトは、削除されたグローバル File Watcher を使用します。 | 削除 ボタン |
PhpStorm は多数の同一ファイルウォッチャータスクを実行します | 例えば VCS から一括更新した後、PhpStorm は保存されたファイルごとに個別のファイルウォッチャータスクを実行します。 | ファイル固有のマクロ（たとえば |
を使用してウォッチャーをリストから削除するか、編集して同じ名前の新しいグローバルウォッチャーを作成します。