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