Sass、SCSS、Less、PostCSS
PhpStorm は、Sass(英語)、Less(英語)、SCSS(英語) コードを CSS(英語) に変換するコンパイラーと統合します。PhpStorm でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、File Watcher としてコンパイラーを構成する必要があります。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定 | プラグインページのインストール済みタブで、CSS、Sass、Less、File Watchers の必須プラグインが有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。
Sass/SCSS のインストール
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install -g sassSass オフィシャル Web サイト(英語)の詳細を参照してください。
Less のインストール
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install --global lessLess オフィシャル Web サイト(英語)の詳細を参照してください。
コードを CSS にコンパイルする
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Sass、Less、SCSS File Watcher を構成する必要があります。
ファイルを開くと、PhpStorm は現在のプロジェクトで適用可能な File Watcher が使用可能かどうかを確認します。そのような File Watcher が構成されているが無効になっている場合、PhpStorm は構成されている File Watcher について通知し、有効にすることを提案するポップアップを表示します。
現在のプロジェクトで該当する File Watcher が構成され有効になっている場合、PhpStorm は新規ウォッチャーダイアログで指定されたイベントが発生すると自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにすると、保存時 (、Ctrl+S) または PhpStorm からフォーカスを移動したとき (フレームの非アクティブ化時) に File Watcher が開始されます。
File Watchers の詳細を参照してください。
PhpStorm は生成された出力で別のファイルを作成します。ファイルの名前は、ソース Sass、Less、SCSS ファイルの名前と拡張子 .css です。生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。しかし、プロジェクトツリーでは、それらは現在ノードとして表示されているソースファイルに表示されます。
File Watcher を作成する
設定ダイアログ（Ctrl+Alt+S）で、ツールの File Watchers をクリックします。開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、Alt+Insert を押します。使用するツールに応じて、リストから Less、Sass、SCSS の事前定義テンプレートを選択します。プログラムフィールドで、選択した事前定義テンプレートに応じてコンパイラーアーカイブへのパスを指定します。
Less 用の lessc。
Sass/SCSS 用の sass。
npm を使用して標準インストール手順を実行した場合、PhpStorm は必要なファイルそのものを特定し、自動的にフィールドに入力します。それ以外の場合は、パスを手動で入力するか、
をクリックして、表示されるダイアログでファイルの場所を選択します。File Watchers に記載されている手順に従います。
サンプル: SCSS を CSS にコンパイルする
プロジェクトが次のように構成されているとします。
ご覧のとおり、_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 を押して設定を開き、 を選択します。必要な File Watcher（この例では SCSS）を選択し、ツールバーの 
をクリックします。File Watcher を編集ダイアログで、拡張オプション領域を展開し、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにします。
デフォルトでは、File Watcher は、そのスコープ内のファイルが PhpStorm の外部から編集された場合でも起動します。この動作を無効にして、内部で編集するときにのみファイルをトランスパイルするには、外部の変更でウォッチャーをトリガーするチェックボックスをオフにします。
スコープを変更する
デフォルトでは、PhpStorm は、プロジェクト全体で .scss 拡張子を持つすべてのファイルの変更を監視します。これは、この例では機能します。ただし、処理するスコープを変更できます。たとえば、コミットされていない変更のみを変更できます。大スコープなプロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。必要な File Watcher（この例では SCSS）を選択し、ツールバーの をクリックします。File Watcher を編集ダイアログで、リストから該当するスコープを選択します。詳しくはスコープとファイルの色を参照してください。
カスタム出力場所
デフォルトでは、生成された .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 フォルダーを作成します。
サンプル: Less を CSS にコンパイルする
プロジェクトが次のように構成されているとします。
以下の例は、プロジェクトを手動または自動で保存するときに my-styles.less が CSS にコンパイルされる方法と、my-styles.less への変更が生成された CSS ファイルにどのように反映されるかを示しています。
Less タイプのファイルウォッチャーを作成します。設定ダイアログ (Ctrl+Alt+S) を開き、 に移動し、ツールバーの
をクリックして、リストから Less を選択します。
または、エディタータブの上部にある File Watcher が LESS を CSS にコンパイルできるようにしますか？ ペインで、.less ファイルを含むはいをクリックします。
開いた新しい File Watcher ダイアログでは、必須フィールドはすべてすでに入力されています。
実際、これらの設定は、コンパイラーを正常に実行するのに十分です。
my-styles.less を変更してみましょう。たとえば、行 1 の
@colorの値を変更します。これにより、File Watcher がトリガーされます。その結果、2 つのファイルが生成され、my-styles.less にネストされて表示されます。コンパイルされた CSS コードを含む my-styles.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた my-styles.css.map。
コンパイラーを正常に実行するにはデフォルト設定で十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、デフォルト設定を詳しく見ていきましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動（または Ctrl+S）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。
通常、フォーカスを PhpStorm から移動すると (フレームの非アクティブ化時に)、コードが自動的に保存されます。File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、 を選択します。必要な File Watcher（この例では Less）を選択し、ツールバーの をクリックします。File Watcher を編集ダイアログで、拡張オプション領域を展開し、編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにします。
スコープを変更する
デフォルトでは、PhpStorm は、プロジェクト全体で .scss 拡張子を持つすべてのファイルの変更を監視します。これは、この例では機能します。ただし、処理するスコープを変更できます。たとえば、コミットされていない変更のみを変更できます。大スコープなプロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。必要な File Watcher（この例では Less）を選択し、ツールバーの をクリックします。File Watcher を編集ダイアログで、リストから該当するスコープを選択します。詳しくはスコープとファイルの色を参照してください。
カスタム出力場所
デフォルトでは、生成された .css および .css.map ファイルは元のファイルと同じフォルダーに保存され、プロジェクトツールウィンドウ (Alt+1) では元のファイルの子ファイルとして表示されます。このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することもできます。
簡単なケースから始めましょう。プロジェクトルートに custom_output.less ファイルがあるとします。
たとえば、custom_output.less を編集して、1 行目の @color の値を変更します。デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、custom_output.less の子として表示されます。
すべての出力を別のフォルダー（たとえば、css）に保存すると便利です。css フォルダーを出力場所として使用してカスタム Less_custom_output ファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。そして、上記の手順に従って Less と File Watcher を作成します。
デフォルト設定を次のように更新します。
引数フィールドに次のように入力します。
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-mapリフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効になっていることを確認します。
ここで、たとえば custom_output.less を編集して 1 行目の @color の値を変更すると、PhpStorm は css フォルダーを作成し、生成された custom_output.css および custom_output.css.map ファイルをそこに格納します。
カスタム出力場所: 元のフォルダー構造を保持する
ここで、.less ファイルがフォルダー構造に格納されている例を考えてみましょう。例:
デフォルトの File Watcher では、生成されたファイルは元の .less ファイルの隣に保存されます。
上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。
PhpStorm でフォルダー構造を保持するには、別のカスタム File Watcher を作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。そして、上記の手順に従って Less と File Watcher を作成します。
デフォルト設定を次のように更新します。
引数フィールドに次のように入力します。
$FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-mapリフレッシュする出力パスフィールドに次のように入力します。
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効になっていることを確認します。
ここで、custom_output_body.less、custom_output_header.less、custom_output_footer.less を編集すると、PhpStorm は、styles_structured の構造を保持するサブフォルダーの構造を持つ css フォルダーを作成します。
構文ハイライトの構成
Less/Sass/SCSS/PostCSS 対応の構文ハイライトは、お好みに合わせて設定できます。
設定ダイアログ（Ctrl+Alt+S）で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。
Sass および SCSS セレクター一式
PhpStorm は、Sass および SCSS セレクタ (ネストされたセレクタ(英語)やアンパサンドで作成されたセレクター (&)(英語) を含む) の補完機能を提供します。
クラウド完成と行全体完成
PhpStorm は、Sass/SCSS、Less、PostCSS コード内でクラウドの完成と Full Line 補完を提供します。
行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを用いて、コード行全体を提案します。PhpStorm ではすぐに利用可能で、追加のライセンスは必要ありません。
行全体コード補完を有効にする
Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。
Full Line の候補を有効にするチェックボックスを選択し、CSS のようなチェックボックスが選択されていることを確認します。
AI Assistant を搭載したクラウド補完では、プロジェクトのコンテキストに基づいて、単一の行、コードブロック、さらには関数全体をリアルタイムで自動補完できます。
Cloud Completion は、コンテキストを考慮して構文的に許容可能なソリューションを提案し、さまざまなコードインスペクションを事前に実行して、エラーの原因となるバリエーションを拒否します。
クラウド補完を有効にする
Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。
クラウド補完候補を有効にするチェックボックスを選択し、HTML チェックボックスが選択されていることを確認します。
検索とナビゲーション
ドキュメントの検索
プロパティと疑似要素については、PhpStorm は対応する MDN 記事からの概要を表示できます。この概要はドキュメントポップアップに表示され、プロパティとその値の簡単な説明と、対応する Web プラットフォームのベースラインステータス(英語)が表示されます。
セレクターの場合、PhpStorm もその特異性(英語)を示します。
プロパティのドキュメントを表示
プロパティにキャレットを置き、Ctrl+Q を押すか、メインメニューからを選択します。
プロパティの上にマウスを移動すると、PhpStorm はすぐにその参照をドキュメントポップアップに表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下のドキュメントポップアップの動作の構成を参照してください。
ドキュメントポップアップの動作を設定する
コードシンボルの上にマウスを移動したときにドキュメントの自動的な表示をオフにするには、ポップアップで
をクリックし、マウス移動時に表示するオプションを無効にします。ドキュメントポップアップを速くまたは遅く表示するには、設定ダイアログ（Ctrl+Alt+S）を開き、に移動してから、ドキュメントのポップアップを表示するチェックボックスを選択して遅延時間を指定します。
ブラウザーで MDN ドキュメントを開く
ドキュメントポップアップ Ctrl+Q で、下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューからを選択します。
フォーマット
PhpStorm の組み込みフォーマッタを使用すると、スタイルシートコードの一部だけでなく、ファイルやフォルダー全体を、言語固有のコードスタイル要件に合わせて再フォーマットできます。また、フォーマッタはコードを生成またはリファクタリングする際に自動的に起動します。
スタイルシート言語のフォーマットを構成するには、設定ダイアログ（Ctrl+Alt+S）を開き、 に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。
設定を変更すると、プレビュー領域に変更が書式にどのように影響するかが表示されます。
CSS、SCSS、Less コンテキストでは、PhpStorm はデフォルトで、
importステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。単一引用符を使用するには、「その他」タブを開き、「引用符」リストから「単一」を選択します。再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの整形時に強制するチェックボックスを選択します。
コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。
ファイルまたはフォルダーを再フォーマットするには、プロジェクトツールウィンドウ（Alt+1）で対象を選択し、Ctrl+Alt+L を押します。詳細については、コードの再フォーマットと再配置を参照してください。
あるいは、Prettier (Ctrl+Alt+Shift+P) を使用することもできます。
リファクタリング
PhpStorm では、スタイルシートの式を変数に変換し、.css ファイルの var(--var-name) 構文、.scss および .sass ファイルの $ 構文を使用してこれらの変数を導入できます。
変数の導入
エディターで、変数に変換する式にキャレットを置き、Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューからを選択します。
選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択してください。
.scss および .sass の場合、変数のグローバルスコープまたはローカルスコープを選択します。
赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。準備ができたら Enter を押します。
PhpStorm を使用すると、CSS、SCSS、Sass、Less ファイル内の既存の宣言から新しいルールセットを作成し、リファクタリングおよびインテンションアクションを使用してルールセット全体をファイル間で移動することさえできます。
ルールセットを導入する
導入する宣言を選択します。宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。
Alt+Enter を押し、リストからルールセットを導入を選択します。
PhpStorm は、同じセレクターを使用して新しいルールセットを作成し、それに選択された宣言を移動します。選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。
ルールセットを他のファイルに移動する
ルールセット内の移動する任意の場所にキャレットを置き、F6 を押します。
表示されたダイアログで、ルールセットを移動するファイルを指定します。指定されたファイルが存在しない場合、PhpStorm はそれを作成することを提案します。
デフォルトでは、PhpStorm はルールセットが移動されるファイルを自動的に開きます。この動作を変更するには、エディターで開くチェックボックスをオフにします。
コピー、移動、名前変更などの一般的なリファクタリングも利用できます。
ブラウザーとの互換性を確認する
ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。
互換性チェックをオンにする
設定ダイアログ（Ctrl+Alt+S）で、に移動します。
CSS ノードを展開してプロパティは選択されたブラウザーと互換性がありませんを選択します。オプションエリアで、ターゲットにするブラウザーとその最小バージョンを選択します。
オプション領域で、プロパティの可用性を確認するブラウザーを選択します。選択したブラウザーのターゲットバージョンを指定します。
色の管理
PhpStorm は、コード補完、クイックドキュメント検索、カラープレビューを含む CSS カラー(英語)管理をサポートします。絶対色、相対色、混合色のコーディング支援も提供されます。
色を指定する
色の変更
ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。
または、キャレットを色のプロパティに置き、Alt+Enter を押して、リストから色の変更を選択し、ポップアップで目的の色を選択します。
カラープレビューを切り替える
PhpStorm は絶対色、相対色、混合色のプレビューを表示します。
デフォルトでは、PhpStorm はカラープレビューをガター内のアイコンとして表示します。背景にカラープレビューを表示するには、設定ダイアログ（Ctrl+Alt+S）を開き、に移動して CSS 色プレビューを背景として表示するチェックボックスをオンにします。
カラープレビューガターアイコンを復元するには、設定ダイアログ (Ctrl+Alt+S) を開き、に移動して、共通領域の色プレビューチェックボックスを選択します。
タグに適用されたスタイルを表示する
HTML および XHTML ファイルでは、PhpStorm は任意のタグに適用されたすべてのスタイルを表示できます。
タグのコンテキストメニューからを選択します。
PhpStorm は 2 つのペインで CSS スタイルツールウィンドウを開きます。左側のペインはタグのスタイルを示し、右側のペインはそれらの定義を示します。タグごとに、PhpStorm は別々のタブを開きます。
ツールウィンドウから、ソースコード内のタグとプロパティの定義に移動できます。
タグに移動するには、左側のペインのツールバーの
をクリックします。プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの
をクリックします。
関連ページ：
File Watchers
File Watcher は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。PhpStorm は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みの File Watcher テンプレートを提供します。カスタム File Watcher を設定して、他のサードパーティツールを実行することもできます。File Watchers には 2 つの専用コードインスペクションがありま...
外部ツール
サードパーティのコマンドラインアプリケーションを外部ツールとして構成し、PhpStorm から実行します。たとえば、ワークフローによっては、特定のスクリプト、コードジェネレーター、アナライザー、プリプロセッサーまたはポストプロセッサー、データベースユーティリティなどを実行する必要がある場合があります。PhpStorm を外部ツールとして設定すると、専用のアクションが提供されます。このアクションは、メインメニューや特定のコンテキストメニューから実行したり、ショートカットを割り当てたり、特定の実行構...
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
新規ウォッチャーダイアログ
File Watchers ページの追加または編集ボタンをクリックすると、ダイアログが開きます。このダイアログを使用して、定義済みの PhpStorm File Watcher テンプレートに基づいてプロジェクト File Watcher を作成したり、既存のプロジェクト File Watcher を編集したりします。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：名前フィールドに、Fil...
スコープとファイルの色
スコープは、プロジェクト内のファイルとフォルダーの名前付きセットです。スコープを使用すると、IDE のさまざまなビューでプロジェクト項目を視覚的に区別し、特定の操作の範囲を制限できます。スコープを使用すると、ファイルを論理的に整理できます。たとえば、テストソースをテストスコープに配置し、本番環境のコードを本番環境スコープに配置することができます。これにより、大スコーププロジェクトでの作業が容易になります。インスペクションをテストのみで実行すると、コードベース全体で実行するよりも高速になります。P...
色とフォント
開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。PhpStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。このビデオを見て、PhpStorm のカスタマイズの...