ファイル監視
ファイル監視は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。PhpStorm は、多数の標準的な一般的なサードパーティツール ( コンパイラー(英語)、コンプレッサー、整形ツールなど) 用に定義済みのファイルウォッチャーテンプレートを提供する
カスタムファイル監視を設定して、他のサードパーティツールを実行することもできます。
ファイルウォッチャーには、2 つの専用コードインスペクションがあります。
ファイル監視使用可能インスペクションは、あらかじめ定義されたファイル監視が適用されるすべてのファイルで実行されます。プロジェクトに関連するファイル監視が設定されていない場合、PhpStorm はファイルウォッチャーを追加することを提案します。
ファイル監視問題インスペクションは、実行中のファイル監視によって呼び出され、それに特有のエラーをハイライトします。
利用可能なテンプレートの 1 つを使用するか、ファイル監視を最初から構成することができます。設定したファイル監視は、プロジェクト設定または IDE 設定に保存して、さまざまなプロジェクトで使用できます。
事前定義されたファイル監視が適用可能なファイルを開くと、PhpStorm はそれをアクティブにするよう提案するペインを表示します。
はいをクリックして、デフォルト構成でファイルウォッチャーをアクティブにします。
いいえをクリックすると、PhpStorm は提案されたファイル監視が抑制されていると見なします。以下のファイル監視の作成の説明に従って、手動で作成して有効にすることができます。
特定のツールのファイルウォッチャーの詳細については、対応するページを参照してください。
PhpStorm でこれらのツールの一部を使用するには、JetBrains マーケットプレイスからプラグインをインストールするに従って、設定 | プラグインページにプラグインをインストールする必要があることに注意してください。
始める前に
設定でファイル監視プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、 を選択します。インストール済みタブをクリックします。検索フィールドにファイル監視と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
ファイル監視の作成
設定ダイアログ(Ctrl+Alt+S)で、ツールのファイル監視をクリックします。ファイルウォッチャーページが開き、このプロジェクトと IDE ですでに構成されているファイルウォッチャーのリストが表示されます。
をクリックして、ファイル監視を作成したい定義済みテンプレートを選択します。選択は使用しようとしているツールに依存します。一覧にないツールを使用するには、カスタムを選択してください。新規ウォッチャーダイアログが開きます。
「名前」フィールドに、ファイル監視の名前を入力します。デフォルトでは、PhpStorm は選択された定義済みテンプレートの名前を提案します。
入力ファイルの予想されるタイプと場所の構成
監視するファイル領域のコントロールを使用して、ファイルウォッチャーを適用するファイルの範囲を定義します。
ファイルタイプリストから、予想されるタイプの入力ファイルを選択します。ファイル監視は、このタイプのファイルのみを分析および処理の対象と見なします。ファイルタイプは、ファイルタイプとファイル拡張子の間の関連付けに基づいて認識されます。
既定では、このフィールドには選択した定義済みのテンプレートに従ってファイルの種類が表示されます。
ファイル監視が適用されるスコープを選択します。
これらのファイルを変更すると、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスの状態に応じて、直ちに、または保存またはフレームの非アクティブ化時にファイル監視が起動されます。
リストから定義済みスコープの 1 つを選択します。プロジェクトレベルのファイル監視の場合は、
をクリックして、表示されるスコープダイアログでカスタムスコープを設定することもできます。
すべての場所 : 下記のすべての範囲
プロジェクトファイル : プロジェクトコンテンツルート内のすべてのファイル ( コンテンツルートを参照)。
プロジェクトのプロダクション用ファイル : テストソースを除くプロジェクトコンテンツルート内のすべてのファイル。
プロジェクトテストファイル : プロジェクト内のすべてのファイルがテストソースのルートになります。
スクラッチとコンソール : プロジェクトツールウィンドウにあるスクラッチとコンソールディレクトリからのすべてのファイル。
開いているファイル : 現在エディターで開かれているすべてのファイル。
現在のファイル : アクティブなエディタータブで開かれたファイル
VCS スコープ : これらのスコープは、プロジェクトがバージョン管理されている場合にのみ使用できます。
すべての変更ファイル : すべての変更されたファイル、つまりすべての既存の変更リストに関連付けられたすべてのファイル。
デフォルト変更リスト : 変更リスト
Default
に関連付けられているすべてのファイル。
または、
をクリックし、開いたスコープダイアログでカスタムスコープを構成します。
オプション : ファイル監視が依存関係を処理する方法を指定します。ルートファイルは、指定されたスコープ内の他のファイルに(
import
などを介して)含まれていないファイルです。ファイルウォッチャーをルートファイルに対してのみ実行するには、ルートファイルのみを追跡するチェックボックスを選択します。
このチェックボックスをオフにすると、呼び出されたファイルと、指定されたスコープ内にこのファイルが再帰的に含まれるすべてのファイルに対してファイル監視が実行されます。
スコープ設定はルートファイルのみを追跡するチェックボックスの設定よりも優先されることに注意してください。依存関係が指定されたスコープの外にある場合、ファイルウォッチャーはそれに適用されません。
外部ツールとの相互作用の構成
変更時に実行するツール領域で、使用するツール、ツールに渡す引数、予想される出力ファイルの種類などを指定します。
プログラムフィールドに、ツールの実行可能ファイルへのパス(.exe、.cmd、.bat、または特定のツールに応じてその他)を指定します。
引数フィールドで、ツールに渡す引数を定義します。
引数は通常、実際のファイル名に置き換えられる
$FileName$
や$FileNameWithoutExtension$
などのマクロを使用して指定されます。マクロを手動で入力するか、
をクリックして、開いたマクロダイアログのリストから関連するパターンを選択します。
リフレッシュする出力パスフィールドで、ツールがその出力を保管するファイル(結果のソースコード、ソースマップ、依存関係)を指定します。これらの設定に基づいて、PhpStorm はコンパイルによって生成されたファイルを認識します。
通常、出力パスはマクロを使用して指定されます。手動で入力するか、
をクリックして、開いたダイアログのリストから関連するものを選択できます。
複数のマクロを指定するには、区切り文字としてコロン
:
を使用します (例:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
)。を展開します
作業ディレクトリと環境変数の隠しエリア。
環境変数を定義します。例: 構成しているツールの開始に必要なツールの
PATH
変数を指定しますが、そのツールへのパスで参照されていません。ほとんどの場合、Node.js または ruby.exe です。このような状況は、Node パッケージマネージャー (npm) または gem manager によるインストールではなく、カスタムの手動インストールが原因である可能性があります。作業ディレクトリフィールドで、ツールを適用するディレクトリを指定します。
ツールは常にファイルのコンテキストで呼び出されるため、デフォルトの作業ディレクトリは現在のファイルのディレクトリです。デフォルトの作業ディレクトリは、
$FileDir$
マクロを使用してすべての定義済みテンプレートで指定されます。カスタム作業ディレクトリを指定するには、そのパスをフィールドに入力するか、をクリックしてパスの選択ダイアログでディレクトリを選択するか、
をクリックしてマクロダイアログのリストから目的のマクロを選択します。
詳細オプションの構成
拡張オプション領域では、ファイル監視のデフォルト動作をカスタマイズします。
ファイルウォッチャーを呼び出すイベントを指定します。
ソースコードに変更が加えられたらすぐにファイルウォッチャーを呼び出すには、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスを選択します。
チェックボックスをオフにすると、ファイルウォッチャーは保存(
)または PhpStorm(フレーム非アクティブ化時)からフォーカスを移動すると開始します。デフォルトでは、ファイルウォッチャーは、たとえばブランチをチェックアウトしたときにバージョン管理システムから受信した更新を含め、保存された変更でウェイクアップします。このような変更を無視し、PhpStorm でコードを更新するときにのみファイルウォッチャーを呼び出すには、外部の変更でウォッチャーをトリガーするチェックボックスをオフにします。
ファイルウォッチャーが PhpStorm 構文解析プログラムと対話するかどうかを指定します。
構文エラーに関係なく監視をトリガーするチェックボックスをオンにすると、ファイル監視はファイルの構文上の正確さに関係なく起動します。ファイルウォッチャーは、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスの状態に応じて、更新、保存、フレームの非アクティブ化時に開始されます。
構文エラーに関係なく監視をトリガーするチェックボックスをオフにすると、ファイル監視は構文上無効なファイル内のすべてのトリガを無視し、エラーのないファイルでのみ起動します。
stdout から出力ファイルを作成するチェックボックスを使用して、出力ファイルの生成方法を指定します。
チェックボックスが選択されると、PhpStorm はネイティブツールの出力
standard output stream (stdout)
を読み込み、そこから結果ファイルを生成します。チェックボックスをオフにすると、ツールはその出力をリフレッシュする出力パスフィールドで指定されたファイルに直接書き込みます。
コンソールの表示リストで、ファイル監視がいつコンソールを開くかを選択します。
常時 : このオプションを使用すると、ツールの実行が完了した後にコンソールが常に開きます。
エラー時 : このオプションを使用すると、
Exit code
が0
と異なる場合にのみツール実行後にコンソールが開きます。なし : コンソールをまったく開かないようにするには、このオプションを選択します。
ファイル監視によって報告された情報をエディターに表示する
ファイル監視で設定されたツールがファイルに関するエラーや警告をファイルや特定の行へのリンクで報告した場合は、この情報をエディターで直接見ることができます。
ファイル監視問題を有効にします。
では、インスペクションウォッチャーの編集ダイアログの出力フィルターフィールドで、照合する出力の形式を記述します。そのためにマクロ
$FILE_PATH$
、$LINE$
、$MESSAGE$
を使用します。\
では、中括弧やドットなどの特別な記号を使用しないようにする必要があります。$MESSAGE$
マクロと一致するテキストがエディターに表示されます。
サンプル
このツールは、次の形式でエラーを報告します。
エディターでハイライトされたエラーを表示するには、次の正規表現を出力フィルターとして使用します。
ファイルウォッチャーの保存、有効化、無効化
新しいファイル監視を保存したら、現在のプロジェクト(レベルリストからプロジェクトを選択)でのみ使用可能にするか、すべてのプロジェクト(グローバルを選択)で使用可能にするかを決定できます。
![グローバルファイルウォッチャー Global File Watcher](https://resources.jetbrains.com/help/img/idea/2024.1/ws_enable_global_watcher.png)
ファイルウォッチャーを有効または無効にするには、設定ダイアログ(Ctrl+Alt+S)を開き、 に移動して、その横にあるチェックボックスをオンまたはオフにします。
ファイルウォッチャーが有効になっている場合、選択したスコープ内の選択したタイプのファイルが変更または保存されるとすぐに自動的に開始されます。詳細オプションの構成を参照してください。
ファイル監視の実行中にエラーが発生した場合、ファイル監視は自動的に無効になります。ステータスを復元するには、ファイル監視を手動で有効にします。
保存時にファイルウォッチャーを自動的に実行する
変更が保存されたときに、変更されたファイルでファイルウォッチャーを自動的に実行するように IDE を構成できます。
Ctrl+Alt+S を押して設定を開き、
を選択します。ファイル監視オプションを有効にして、変更を適用します。
新しいプロジェクトでグローバルファイルウォッチャーを有効にする
グローバルファイルウォッチャーは、将来作成するすべての新しいプロジェクトで自動的に有効にできます。
新規プロジェクトの設定ダイアログ( )を開き、 に移動して、必要なファイル監視の横にあるチェックボックスを選択します。
または、ウェルカム画面で、構成リストから設定を選択します。開いたダイアログで、関連するファイル監視の横にあるチェックボックスを選択します。
ファイルウォッチャーで外部ツールの動作をカスタマイズする例
サードパーティツールに影響を与える唯一の方法は、コマンドラインモードで作業しているかのように引数を渡すことです。これらの引数は、各ツールに固有です。以下は、SCSS コンパイラーのデフォルトの出力場所をカスタマイズする 2 つの例です。
SCSS コンパイラーをカスタマイズする
プロジェクトが次のように構成されているとします。
![SCSS を CSS にコンパイルする: プロジェクト構造 Compiling SCSS into CSS: project structure](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_project_structure.png)
ご覧のとおり、_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 を処理します。その結果、2 つのファイルが生成され、Page.scss にネストされて表示されます。コンパイルされた CSS コードを含む Page.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた Page.css.map。
コンパイラーを正常に実行するにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、デフォルト設定を詳しく見ていきましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動(
または Ctrl+S)または自動で保存されるとすぐに、ファイル監視が起動し、トランスパイラーを起動します。一般に、PhpStorm からフォーカスを移動すると(フレームの非アクティブ化時)、コードは自動的に保存されます。ファイルウォッチャーを使用すると、ファイルウォッチャーのスコープからファイルを編集するときにも自動保存が実行されます。その結果、入力中はトランスパイラーが実行されている可能性があり、パフォーマンスの問題が発生する可能性があります。この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、SCSS) を選択し、ツールバーの をクリックします。ファイルウォッチャーの編集ダイアログで、拡張オプション領域を展開し、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにします。
![編集したファイルを自動保存オフ Auto-save edited files off](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_file_watcher_autosave_on_edit_off.png)
デフォルトでは、ファイルウォッチャーは、そのスコープのファイルが PhpStorm の外部から編集されている場合でもウェイクアップします。この動作をオーバーライドし、内部編集でのみファイルをトランスパイルするには、外部の変更でウォッチャーをトリガーするチェックボックスをオフにします。
![外部の変更でファイルウォッチャーをトリガーするがオフになっている Trigger the File Watcher on external changes is off](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_file_watcher_on_external_changes_off.png)
スコープを変更する
デフォルトでは、PhpStorm は、プロジェクト全体で .scss 拡張子を持つすべてのファイルの変更を監視します。これは、この例では機能します。ただし、処理するスコープを変更できます。たとえば、コミットされていない変更のみを変更できます。大スコープなプロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、SCSS) を選択し、ツールバーの をクリックします。ファイルウォッチャーの編集ダイアログで、リストから該当するスコープを選択します。詳細については、スコープとファイルの色を参照してください。
![SCSS ファイルウォッチャー: デフォルトのスコープを変更する SCSS File Watcher: change default scope](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_file_watcher_settings_change_scope.png)
カスタム出力場所
デフォルトでは、生成された .css ファイルと .css.map ファイルは、元のファイルがあるフォルダーに保存され、プロジェクトツールウィンドウにその子として表示されます。このデフォルトの動作を変更して、生成されたすべての .css ファイルと .css.map ファイルを別のフォルダーに保存できます。
簡単なケースから始めましょう。プロジェクトルートに custom_output.scss ファイルがあるとします。
![プロジェクト構造 Project structure](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_project_structure_plain.png)
custom_output.scss を編集してみましょう。たとえば、6 行目の fill-opacity: abs(50);
を fill-opacity: abs(60);
に置き換えます。デフォルトの FileWatcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、custom_output.scss の子として表示されます。
![デフォルト設定: 出力はプロジェクトルートに保存されます Default settings: the output is stored in the project root](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_result_with_default_settings.png)
すべての出力を別のフォルダー(たとえば、css)に保存すると便利です。css フォルダーを出力場所として使用してカスタム SCSS_custom_output ファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、上記の説明に従って SCSS ファイルウォッチャーを作成します。
を選択します。次に、デフォルト設定を次のように更新します。
引数フィールドに次のように入力します。
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.cssリフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
![カスタム出力パスを備えた新しいファイルウォッチャー New File Watcher with custom output path](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_default_fw_updated.png)
新しいファイルウォッチャーを保存し、有効になっていることを確認します。
![カスタム出力パスが保存され、有効になっている新しいファイルウォッチャー New File Watcher with custom output path saved and enabled](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_fw_saved.png)
ここで、たとえば custom_output.scss を編集する場合、6 行目の fill-opacity: abs(50);
を fill-opacity: abs(60);
に置き換えると、PhpStorm は css フォルダーを作成し、生成された custom_output.css ファイルと custom_output.css.map ファイルをそのフォルダーに保存します。
![カスタム設定: 出力は別のフォルダーに保存されます Custom settings: the output is stored in a separate folder](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_result_with_custom_settings.png)
カスタム出力場所: 元のフォルダー構造を保持する
ここで、.scss ファイルがフォルダー構造に格納されている例を考えてみましょう。例:
![プロジェクト構造 Project structure](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_project_structure_tree.png)
デフォルトのファイルウォッチャーでは、生成されたファイルは元の .scss ファイルの隣に保存されます。上記のようにカスタムファイルウォッチャーを使用すると、生成されたすべてのファイルが 1 つの同じ css フォルダーに保存されます。
![カスタム出力: 生成されたファイルは、プレーンな構造の別のフォルダーに保存されます Custom output: the generated files are stored in a separate folder in a plain structure](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_result_with_custom_fw_plain.png)
PhpStorm にフォルダー構造を保持させるために、別のカスタムファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、上記の説明に従って SCSS ファイルウォッチャーを作成します。
を選択します。次に、デフォルト設定を次のように更新します。
引数フィールドに次のように入力します。
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.cssリフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
![フォルダー構造のカスタム出力: ファイルウォッチャーが更新されました Custom output with folder structure: File Watcher updated](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_structured_fw_updated.png)
新しいファイルウォッチャーを保存し、有効になっていることを確認します。
![フォルダー構造のカスタム出力: ファイルウォッチャーが保存され、有効になっています Custom output with folder structure: File Watcher saved and enabled](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_structured_fw_saved.png)
ここで、custom_output_body.scss、custom_output_header.scss、custom_output_footer.scss を編集すると、PhpStorm は、styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。
![カスタム設定: 出力は別のフォルダーに保存され、構造は保持されます Custom settings: the output is stored in a separate folder, the structure preserved](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_custom_output_result_structured.png)
CoffeeScript コンパイラーをカスタマイズする
次のフォルダー構造のプロジェクトがあるとします。
![ファイルウォッチャーのフォルダー構造の例 File Watchers example of folder structure](https://resources.jetbrains.com/help/img/idea/2024.1/fileWatcherExampleImage1.png)
デフォルトのファイル監視では、生成されたファイルは元のファイルの子として表示されます。
![デフォルトのファイル監視出力 Default File Watcher output](https://resources.jetbrains.com/help/img/idea/2024.1/ws_coffee_example_default_fw_output.png)
このデフォルトの場所を変更して、生成されたファイルを別の JavaScript フォルダーに保存することができます。
生成されたすべてのファイルを出力 JavaScript フォルダーに保存する
CoffeeScript ファイルウォッチャーを作成します。
引数フィールドに次のように入力します。
--map --compile -o $ProjectFileDir$/JavaScript $FileName$リフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
その結果、プロジェクトツリーは次のようになります。
![カスタム出力、フラット構造 Custom output, flat structure](https://resources.jetbrains.com/help/img/idea/2024.1/fileWatcherExampleImage3.png)
生成されたファイルを、app
ノードの元の構造を繰り返すフォルダー構造に格納することもできます。
出力フォルダーに元のフォルダー構造を保持する
CoffeeScript ファイルウォッチャーを作成します。
引数フィールドに次のように入力します。
--map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$リフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
その結果、プロジェクトツリーは次のようになります。
![カスタム出力、フォルダー構造は保持 Custom output, folder structure preserved](https://resources.jetbrains.com/help/img/idea/2024.1/ws_coffee_example_custom_fw_preserve_folder_structure.png)
ファイル監視のトラブルシューティング
のリストのファイルウォッチャーの横に赤いエラーメッセージが表示されることがあります。
![ファイル監視エラーメッセージ File Watcher Error Message](https://resources.jetbrains.com/help/img/idea/2024.1/ws_file_watcher_errors.png)
起こりうるエラーのリストを以下に示します。
報告された問題 | 問題説明 | 回避策 |
---|---|---|
| ファイルウォッチャーは、このプロジェクトで定義されていないスコープを使用します。 | ウォッチャーをダブルクリックして、使用可能なスコープを選択するか、新しいスコープを作成します。 |
| このプロジェクトは、削除されたグローバルファイル監視を使用します。 | 除去ボタン |
PhpStorm は多数の同一のファイル監視タスクを実行します | たとえば、VCS から一括更新した後、PhpStorm は保存されたファイルごとに個別のファイル監視タスクを実行します。 | 引数フィールドにファイル固有のマクロ ( |
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2024.1/ws_js_minification_create_uglifyjs_file_watcher_add_watcher.png)
JavaScript の最小化
縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。ほとんどの場合、圧縮は、webpack などのビルドツールを使用して、ビルドプロセスのステップとして実行されます。ビルドツールを使用していない場合は、UglifyJS などのスタンドアロンツールを使用できます。コードを自動的に縮小するには、縮小ツー...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ws_css_minification_create_csso_file_watcher_add_watcher.png)
CSS の最小化
縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。ほとんどの場合、圧縮は webpack などのツールを使用してビルドプロセスのステップとして実行されます。ビルドツールを使用していない場合は、CSSO や cssnano などのスタンドアロンツールを使用できます。コードを自動的に縮小するには、縮小ツール...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ws_scss_example_project_structure.png)
Sass、SCSS、Less
PhpStorm は、Sass、Less、SCSS コードを CSS に変換するコンパイラーと統合します。PhpStorm でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、ファイル監視としてコンパイラーを構成する必要があります。始める前に:お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインストール済みタブで、CSS、Sass、Less、ファイル監視の必須プラグインが有効になっていることを確認します。詳細につ...
![](https://pleiades.io/icons/phpstorm.png)
Compass アプリケーションの Sass および SCSS
PhpStorm の Compass のサポートを使用すると、Compass アプリケーションの Sass または SCSS スタイルシートが自動的に CSS にコンパイルされます。始める前に:Ruby をダウンロードしてインストールします。JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Compass プラグインをインストールして有効にします。設定でファイル監視プラグインが有効になっていることを確認します。...
![](https://resources.jetbrains.com/help/img/idea/2024.1/fileWatcherExampleImage1.png)
CoffeeScript
PhpStorm では、JavaScript にコンパイルされる CoffeeScript を使用できます。PhpStorm は *.coffee ファイルを認識し、それらにのマークを付けます。CoffeeScript コードにブレークポイントを直接設定でき、PhpStorm はコンパイル中に生成されたソースマップを使用してブレークポイントを認識します。PhpStorm は、キーワード、ラベル、変数、パラメーター、関数の補完を提案することにより、CoffeeScript コードの作成を支援します。シンボ...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ps_plugins_settings.png)
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...