IntelliJ IDEA 2020.3 ヘルプ

Stylus

IntelliJ IDEA を使用すると、Stylus(英語) コードをすぐに CSS に変換できます。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページでファイル監視プラグインをインストールして有効にします。

Stylus のインストール

npm、pnpm、Yarn に従って、Node.js と NPM ページスタイラスパッケージをインストールすることもできます。

Stylus コードのコンパイル

コードを自動的にコンパイルするには、ファイルへの変更を追跡してコンパイラーを実行する Stylus ファイルウォッチャーを構成する必要があります。

ファイルを開くと、IntelliJ IDEA は、該当するファイル監視が現在のプロジェクトで使用可能かどうかを確認します。そのようなファイル監視が構成されているが無効になっている場合、IntelliJ IDEA は、構成されたファイル監視について通知し、有効にすることを提案するポップアップを表示します。

現在のプロジェクトで該当するファイル監視が構成されて有効になっている場合、IntelliJ IDEA は新規ウォッチャーダイアログで指定されたイベントで自動的にコンパイラーを起動します。

  • 編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐにファイル監視が呼び出されます。

  • 編集したファイルを自動保存してウォッチャーをトリガーするチェックボックスをオフにすると、ファイルウォッチャーは保存(ファイル | すべて保存Ctrl+S)または IntelliJ IDEA からのフォーカス移動時(フレーム非アクティブ化時)に開始されます。

ファイル監視の詳細を参照してください。

IntelliJ IDEA は生成された出力で別のファイルを作成します。このファイルは、ソース Stylus ファイルの名前と拡張子 .css を持ちます。生成されたファイルの場所は、新規ウォッチャーダイアログリフレッシュする出力パスフィールドで定義されています。しかし、プロジェクトツリーでは、それらは現在ノードとして表示されているソースファイルに表示されます。

ファイルウォッチャーを作成する

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、ツールファイル監視をクリックします。開くファイルウォッチャーページには、すでに構成されているファイル監視のリストが表示されます。

  2. Add button をクリックするか、Alt+Insert を押して、リストから Stylus 定義済みテンプレートを選択します。

  3. プログラムフィールドで、実行可能ファイルへのパスを指定します。

    • macOS および Unix 用の stylus

    • Windows 用の stylus.bat

    パスを手動で入力するか、the Browse button をクリックして、開いたダイアログでファイルの場所を選択します。

  4. ファイル監視に記載されている手順に従います。

構文ハイライトの構成

好みや習慣に応じて Stylus 対応の構文ハイライトを設定することができます。

  1. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディター | カラースキーム | Stylus に移動します。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、または色とフォントの構成の説明に従ってカスタマイズします。

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

npm、pnpm、Yarn

IntelliJ IDEA は npm、Yarn、Yarn 2、pnpm と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。IntelliJ IDEA では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。IntelliJ IDEA は、package.jso...

Node.js および NPM

このページは、プラグインの管理に従って、設定 / 環境設定 | プラグインページのインストール済みタブで Node.js バンドルプラグインが有効になっている場合にのみ表示されます。Node.js の操作方法については、Node.js アプリケーションの開発セクションを参照してください。次の Node.js バージョンが IntelliJ IDEA 2020.3 でサポートされています。Node.js 10、Node.js 12、Node.js 14、Node.js 15、サポートされている Node...

ファイル監視

ファイル監視は IntelliJ IDEA ツールであり、IDE でファイルを変更または保存するときに、コンパイラー、フォーマッタ、リンターなどのコマンドラインツールを自動的に実行できます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用可能インスペクションは、あらかじめ定義されたファイル監視が適用されるすべてのファイルで実行されます。プロジェクトに関連するファイル監視が設定されていない場合、IntelliJ IDEA はファイルウォッチャーを追加すること...

色とフォントの構成

開発者として、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストのフォーマットに使用され、一目で理解しやすくなります。IntelliJ IDEA は、好適な色とフォントを定義するカラースキームを使用しています。配色は、ウィンドウ、ダイアログ、コントロールの外観を定義するインターフェーステーマとは異なります。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキーム...

Tailwind CSS

IntelliJ IDEA は Tailwind CSS フレームワークと統合され、HTML ファイルの Tailwind クラスの補完と疑似クラスバリアントの補完提案、HTML および CSS ファイルのクラスにカーソルを合わせたときの結果の CSS のプレビュー、または自動補完が含まれます。IntelliJ IDEA は tailwind.config.js ファイルを認識し、それらに加えたカスタマイズに基づいて補完を提供します。始める前に:お使いのコンピューターに Node.js がインストールされ...