File Watchers
File Watcher は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。PhpStorm は、多数の標準的な一般的なサードパーティツール ( コンパイラー(英語)、コンプレッサー、整形ツールなど) 用に定義済みの File Watcher テンプレートを提供します。
カスタム File Watcher を設定して、他のサードパーティツールを実行することもできます。
File Watchers には 2 つの専用コードインスペクションがあります。
ファイル監視使用可能インスペクションは、定義済みの File Watcher が適用可能なすべてのファイルで実行されます。プロジェクトに関連する File Watcher が設定されていない場合、PhpStorm は追加することを提案します。
ファイル監視問題インスペクションは実行中の File Watcher によって呼び出され、それに固有のエラーをハイライトします。
利用可能なテンプレートの 1 つを使用するか、File Watcher を最初から構成することができます。設定したファイル監視は、プロジェクト設定または IDE 設定に保存して、さまざまなプロジェクトで使用できます。
定義済みの File Watcher が適用可能なファイルを開くと、PhpStorm はそれをアクティブ化することを提案するペインを表示します。
はいをクリックして、デフォルト構成でファイルウォッチャーをアクティブにします。
いいえをクリックすると、PhpStorm は推奨された File Watcher を抑制したものとみなします。以下の File Watcher の作成に従って、手動で作成して有効にすることもできます。
特定のツールのファイルウォッチャーの詳細については、対応するページを参照してください。
PhpStorm でこれらのツールの一部を使用するには、JetBrains マーケットプレイスからプラグインをインストールするに従って、設定 | プラグインページにプラグインをインストールする必要があることに注意してください。
始める前に
設定で File Watchers プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、 を選択します。インストール済みタブをクリックします。検索フィールドに File Watchers と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
File Watcher の作成
設定ダイアログ(Ctrl+Alt+S)で、ツールの File Watchers をクリックします。File Watchers ページが開き、このプロジェクトと IDE ですでに構成されているファイルウォッチャーのリストが表示されます。
をクリックして、ファイル監視を作成したい定義済みテンプレートを選択します。選択は使用しようとしているツールに依存します。一覧にないツールを使用するには、カスタムを選択してください。新規ウォッチャーダイアログが開きます。
名前フィールドに、File Watcher の名前を入力します。デフォルトでは、PhpStorm は選択された定義済みテンプレートの名前を提案します。
入力ファイルの予想されるタイプと場所の構成
監視するファイル領域のコントロールを使用して、ファイルウォッチャーを適用するファイルの範囲を定義します。
ファイルタイプリストから、予想される入力ファイルの種類を選択します。File Watcher は、この種類のファイルのみを分析および処理の対象と見なします。ファイルの種類は、ファイルの種類とファイル拡張子の関連付けに基づいて認識されます。
既定では、このフィールドには選択した定義済みのテンプレートに従ってファイルの種類が表示されます。
ファイル監視が適用されるスコープを選択します。
これらのファイルを変更すると、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスの状態に応じて、直ちに、または保存またはフレームの非アクティブ化時にファイル監視が起動されます。
リストから定義済みスコープの 1 つを選択します。プロジェクトレベルのファイル監視の場合は、 をクリックして、表示されるスコープダイアログでカスタムスコープを設定することもできます。
すべての場所 : 下記のすべての範囲
プロジェクトファイル : プロジェクトコンテンツルート内のすべてのファイル ( ディレクトリ構造を参照)。
プロジェクトのプロダクション用ファイル : テストソースを除くプロジェクトコンテンツルート内のすべてのファイル。
プロジェクトテストファイル : プロジェクト内のすべてのファイルがテストソースのルートになります。
スクラッチとコンソール : プロジェクトツールウィンドウにあるスクラッチとコンソールディレクトリからのすべてのファイル。
開いているファイル : 現在エディターで開かれているすべてのファイル。
現在のファイル : アクティブなエディタータブで開かれたファイル
VCS スコープ : これらのスコープは、プロジェクトがバージョン管理されている場合にのみ使用できます。
すべての変更ファイル : すべての変更されたファイル、つまりすべての既存の変更リストに関連付けられたすべてのファイル。
デフォルト変更リスト : 変更リスト
Default
に関連付けられているすべてのファイル。
または、 をクリックし、開いたスコープダイアログでカスタムスコープを構成します。
オプション : 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 が起動します。デフォルトでは、File Watcher は、たとえばブランチをチェックアウトしたときにバージョンコントロールシステムから受信した更新など、保存された変更があると起動します。このような変更を無視し、PhpStorm でコードを更新したときにのみ File Watcher を呼び出すには、外部の変更でウォッチャーをトリガーするチェックボックスをオフにします。
File Watcher が 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)を開き、 に移動して、その横にあるチェックボックスをオンまたはオフにします。
ファイルウォッチャーが有効になっている場合、選択したスコープ内の選択したタイプのファイルが変更または保存されるとすぐに自動的に開始されます。詳細オプションの構成を参照してください。
ファイル監視の実行中にエラーが発生した場合、ファイル監視は自動的に無効になります。ステータスを復元するには、ファイル監視を手動で有効にします。
保存時にファイルウォッチャーを自動的に実行する
変更が保存されたときに、変更されたファイルでファイルウォッチャーを自動的に実行するように IDE を構成できます。
Ctrl+Alt+S を押して設定を開き、
を選択します。File Watcher オプションを有効にして、変更を適用します。
新しいプロジェクトでグローバルファイルウォッチャーを有効にする
グローバル File Watchers は、今後作成するすべての新しいプロジェクトで自動的に有効にすることができます。
新規プロジェクトの設定ダイアログ( )を開き、 に移動して、必要な File Watchers の横にあるチェックボックスを選択します。
または、ウェルカム画面で、構成リストから設定を選択します。開いたダイアログで、関連する File Watcher の横にあるチェックボックスを選択します。
ファイルウォッチャーで外部ツールの動作をカスタマイズする例
サードパーティツールに影響を与える唯一の方法は、コマンドラインモードで作業しているかのように引数を渡すことです。これらの引数は、各ツールに固有です。以下は、SCSS コンパイラーのデフォルトの出力場所をカスタマイズする 2 つの例です。
SCSS コンパイラーをカスタマイズする
プロジェクトが次のように構成されているとします。
ご覧のとおり、_grid.scss は Page.scss にインポートされます。以下の例は、プロジェクトを手動または自動で保存するときに Page.scss が CSS にコンパイルされる方法と、_grid.scss への変更が生成された CSS ファイルにどのように反映されるかを示しています。
SCSS タイプのファイルウォッチャーを作成します。設定ダイアログ (Ctrl+Alt+S) を開き、 に移動し、ツールバーの をクリックして、リストから SCSS を選択します。
開いた新しい File Watcher ダイアログでは、すべての必須フィールドがすでに入力されています。
実際、これらの設定は、コンパイラーを正常に実行するのに十分です。
grid.scss を変更してみましょう。たとえば、31 行目の
margin-left: 0;
をmargin-left: 12px;
に置き換えます。これにより、ファイルウォッチャーがトリガーされ、コンパイラーが Page.scss を処理します。その結果、2 つのファイルが生成され、Page.scss にネストされて表示されます。コンパイルされた CSS コードを含む Page.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた Page.css.map。
コンパイラーを正常に実行するにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、デフォルト設定を詳しく見ていきましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動(
または Ctrl+S)または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。通常、フォーカスを PhpStorm から移動すると (フレームの非アクティブ化時に)、コードが自動的に保存されます。File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、SCSS) を選択し、ツールバーの をクリックします。ファイルウォッチャーの編集ダイアログで、拡張オプション領域を展開し、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにします。
を選択します。必要なファイルウォッチャー (この例ではデフォルトでは、File Watcher は、そのスコープ内のファイルが PhpStorm の外部から編集された場合でも起動します。この動作を無効にして、内部で編集するときにのみファイルをトランスパイルするには、外部の変更でウォッチャーをトリガーするチェックボックスをオフにします。
スコープを変更する
デフォルトでは、PhpStorm は、プロジェクト全体で .scss 拡張子を持つすべてのファイルの変更を監視します。これは、この例では機能します。ただし、処理するスコープを変更できます。たとえば、コミットされていない変更のみを変更できます。大スコープなプロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、SCSS) を選択し、ツールバーの をクリックします。ファイルウォッチャーの編集ダイアログで、リストから該当するスコープを選択します。詳細については、スコープとファイルの色を参照してください。
を選択します。必要なファイルウォッチャー (この例ではカスタム出力場所
デフォルトでは、生成された .css および .css.map ファイルは元のファイルがあるフォルダーに保存され、プロジェクトツールウィンドウ Alt+1 にその子として表示されます。このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することができます。
簡単なケースから始めましょう。プロジェクトルートに custom_output.scss ファイルがあるとします。
custom_output.scss を編集してみましょう。たとえば、6 行目の fill-opacity: abs(50);
を fill-opacity: abs(60);
に置き換えます。デフォルトの FileWatcher 構成では、生成されたファイル 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 でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。
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 Watcher では、生成されたファイルは元のファイルの子として表示されます。
このデフォルトの場所を変更して、生成されたファイルを別の 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 を使用します。 | 除去ボタン を使用してウォッチャーをリストから削除するか、編集して同じ名前の新しいグローバルウォッチャーを作成します。 |
PhpStorm は多数の同一の File Watcher タスクを実行する | たとえば、VCS からの一括更新の後、PhpStorm は保存されたファイルごとに個別の File Watcher タスクを実行します。 | 引数フィールドにファイル固有のマクロ ( |
関連ページ:
JavaScript の最小化
縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。ほとんどの場合、圧縮は、webpack などのビルドツールを使用して、ビルドプロセスのステップとして実行されます。ビルドツールを使用していない場合は、UglifyJS などのスタンドアロンツールを使用できます。コードを自動的に縮小するには、縮小ツー...
CSS の最小化
縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。ほとんどの場合、圧縮は webpack などのツールを使用してビルドプロセスのステップとして実行されます。ビルドツールを使用していない場合は、CSSO や cssnano などのスタンドアロンツールを使用できます。コードを自動的に縮小するには、縮小ツール...
Sass、SCSS、Less
PhpStorm は、Sass、Less、SCSS コードを CSS に変換するコンパイラーと統合します。PhpStorm でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、File Watcher としてコンパイラーを構成する必要があります。始める前に:お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインストール済みタブで、CSS、Sass、Less、File Watchers の必須プラグインが有効になっている...
Compass アプリケーションの Sass および SCSS
PhpStorm の Compass のサポートを使用すると、Compass アプリケーションの Sass または SCSS スタイルシートが自動的に CSS にコンパイルされます。始める前に:Ruby をダウンロードしてインストールします。JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Compass プラグインをインストールして有効にします。設定で File Watchers プラグインが有効になっていることを...
CoffeeScript
PhpStorm では、JavaScript にコンパイルされる CoffeeScript を使用できます。PhpStorm は *.coffee ファイルを認識し、それらにのマークを付けます。CoffeeScript コードにブレークポイントを直接設定でき、PhpStorm はコンパイル中に生成されたソースマップを使用してブレークポイントを認識します。PhpStorm は、キーワード、ラベル、変数、パラメーター、関数の補完を提案することにより、CoffeeScript コードの作成を支援します。シンボ...
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...