Stylus
IntelliJ IDEA を使用すると、 Stylus(英語) コードをすぐに CSS に変換できます。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains Marketplace からプラグインをインストールする説明に従って、 Stylus および File Watchers プラグインを 設定 | プラグイン ページの Marketplace タブにインストールします。 プラグインは Ultimate サブスクリプション付きの IntelliJ IDEA でのみ利用できます。
Stylus をインストールする
コマンドライン シェルまたは組み込みの ターミナル (Alt+F12) で、次を入力してください：
npm install --global stylusStylus オフィシャル Web サイト(英語)の詳細を参照してください。
Stylus コードをコンパイルする
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Stylus File Watcher を構成する必要があります。
ファイルを開くと、IntelliJ IDEA は現在のプロジェクトで適用可能な File Watcher が使用可能かどうかを確認します。 そのような File Watcher が構成されているが無効になっている場合、IntelliJ IDEA は構成されている File Watcher について通知し、有効にすることを提案するポップアップを表示します。
該当するファイルウォッチャーが現在のプロジェクトで構成され有効化されている場合、IntelliJ IDEA は New Watcher ダイアログで指定されたイベント発生時に自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにすると、保存時 (、 Ctrl+S) または IntelliJ IDEA からフォーカスを移動したとき (フレームの非アクティブ化時) に File Watcher が開始されます。
File Watchers の詳細を参照してください。
IntelliJ IDEA は生成された出力で別のファイルを作成します。 このファイルは、ソース 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 ファイルのコードスタイルを構成します。