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