Stylus
PhpStorm を使用すると、Stylus(英語) コードをすぐに CSS に変換できます。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Stylus プラグインをインストールして有効にします。
設定でファイル監視プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドにファイル監視と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
Stylus のインストール
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install --global stylusStylus オフィシャル Web サイト(英語)の詳細を参照してください。
Stylus コードのコンパイル
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Stylus ファイルウォッチャーを構成する必要があります。
ファイルを開くと、PhpStorm は、該当するファイル監視が現在のプロジェクトで使用可能かどうかを確認します。そのようなファイル監視が構成されているが無効になっている場合、PhpStorm は、構成されたファイル監視について通知し、有効にすることを提案するポップアップを表示します。
現在のプロジェクトで該当するファイル監視が構成されて有効になっている場合、PhpStorm は新規ウォッチャーダイアログで指定されたイベントで自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐにファイル監視が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにすると、ファイルウォッチャーは保存（、Ctrl+S）または PhpStorm からのフォーカス移動時（フレーム非アクティブ化時）に開始されます。
ファイル監視の詳細を参照してください。
PhpStorm は生成された出力で別のファイルを作成します。このファイルは、ソース Stylus ファイルの名前と拡張子 .css を持ちます。生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。しかし、プロジェクトツリーでは、それらは現在ノードとして表示されているソースファイルに表示されます。
ファイルウォッチャーを作成する
設定ダイアログ（Ctrl+Alt+S）で、ツールのファイル監視をクリックします。開くファイルウォッチャーページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、Alt+Insert を押して、リストから Stylus 定義済みテンプレートを選択します。プログラムフィールドで、実行可能ファイルへのパスを指定します。
macOS および Unix 用の stylus。
Windows 用の stylus.bat。
パスを手動で入力するか、
をクリックして、開いたダイアログでファイルの場所を選択します。ファイル監視に記載されている手順に従います。
構文ハイライトの構成
好みや習慣に応じて Stylus 対応の構文ハイライトを設定することができます。
設定ダイアログ（Ctrl+Alt+S）で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。
関連ページ：
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
新規ウォッチャーダイアログ
ファイルウォッチャーページの追加、または編集、ボタンをクリックするとダイアログが開きます。ダイアログを使用して、事前定義済み PhpStorm File Watcher テンプレートに基づいてプロジェクトファイル監視を作成するか、既存のプロジェクトファイル監視を編集します。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：「名前」フィールドに、ファイル監視の名前を入力します。デフォルトでは、...
ファイル監視
ファイル監視は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。PhpStorm は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みのファイルウォッチャーテンプレートを提供するカスタムファイル監視を設定して、他のサードパーティツールを実行することもできます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あら...
色とフォント
開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。PhpStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。このビデオを見て、PhpStorm のカスタマイズの...
Stylelint
PhpStorm は Stylelint と統合されているため、IDE 内から CSS コードをインスペクションできます。Stylelint は、CSS ファイルを編集すると自動的に起動し、検出された問題をハイライトします。以下のコードの Lint を参照してください。CSS のほかに、CSS とは異なる Lint スタイルシートで後述するように customSyntax を適用することで、Stylelint を使用して他のスタイルシートを検証することもできます。始める前に：Node.js をダウンロード...
Tailwind CSS
PhpStorm は Tailwind CSS フレームワークと統合され、HTML ファイルの Tailwind クラスの補完と疑似クラスバリアントの補完提案、HTML および CSS ファイルのクラスにカーソルを合わせたときの結果の CSS のプレビュー、または自動補完が含まれます。PhpStorm は tailwind.config.js ファイルを認識し、それらに加えたカスタマイズに基づいて補完を提供します。始める前に：コンピューターに Node.js があることを確認してください。また、Node....