Stylus
WebStorm を使うと、 Stylus コードをその場で CSS に変換できます。
始める前に
コンピューターに Node.js(英語) があることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブに Stylus プラグインをインストールして有効にします。
設定で File Watchers プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに File Watchers と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。
Stylus をインストールする
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --global stylusStylus オフィシャル Web サイト(英語)の詳細を参照してください。
Stylus コードをコンパイルする
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Stylus File Watcher を構成する必要があります。
ファイルを開くと、WebStorm は現在のプロジェクトで適用可能な File Watcher が存在するかを確認します。 そのような File Watcher が構成されていて無効な場合、WebStorm は設定済みの File Watcher について通知し、有効化を提案するポップアップを表示します。
現在のプロジェクトで該当する File Watcher が構成されていて有効な場合、WebStorm は 新しいウォッチャーダイアログで指定されたイベント発生時に自動的にコンパイラーを開始します。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスがオフの場合、保存時（、 Ctrl+S ）または WebStorm からフォーカスを移動したとき（フレーム非アクティブ化時）に File Watcher が開始されます。
詳細は File Watchers をご覧ください。
WebStorm は生成した出力を別ファイルとして作成します。 このファイルは、ソース Stylus ファイルの名前と拡張子 .css を持ちます。 生成されたファイルの場所は、 リフレッシュする出力パス フィールドの 新規ウォッチャーダイアログ で定義されます。 しかし、 プロジェクトツリー では、それらは現在ノードとして表示されているソースファイルに表示されます。
File Watcher を作成する
設定 ダイアログ (Ctrl+Alt+S) で、 ツール の File Watchers をクリックします。 開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、 Alt+Insert を押して、リストから Stylus 定義済みテンプレートを選択します。プログラム フィールドで、実行可能ファイルへのパスを指定します。
macOS および Unix 用の stylus 。
Windows 用の stylus.bat 。
パスを手動で入力するか、
をクリックして、開いたダイアログでファイルの場所を選択します。File Watchers に記載されている手順に従って進めてください。
構文ハイライトを構成する
好みや習慣に合わせて Stylus 対応の構文ハイライトを設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択し、デフォルトから継承されたハイライト設定をそのまま使用するか、 カラースキーム：エディターのフォントと色彩 の説明に従ってカスタマイズしてください。
コードスタイルを設定する
Ctrl+Alt+S を押して設定を開き、 を選択します。
コードスタイル | Stylus のコントロールを使用して、Stylus ファイルのコードスタイルを構成します。