JetBrains Rider 2024.1 ヘルプ

Stylelint

JetBrains Rider は Stylelint(英語) と統合されているため、IDE 内から CSS コードをインスペクションできます。Stylelint は、CSS ファイルを編集すると自動的に起動し、検出された問題をハイライトします。以下のコードの Lint を参照してください。

CSS のほかに、CSS とは異なる Lint スタイルシートで後述するように customSyntax(英語) を適用することで、Stylelint を使用して他のスタイルシートを検証することもできます。

始める前に

  1. Node.js をダウンロードしてインストールします。

  2. プロジェクトでローカル Node.js インタープリターが構成されていることを確認します。設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | Node.js に移動します。Node インタープリターフィールドには、デフォルトのプロジェクト Node.js インタープリターが表示されます。

    ローカル Node.js インタープリターの構成の詳細を参照してください。

Stylelint をインストールする

  • 埋め込みターミナル（Alt+F12）を開いて、次のように入力します。

    npm install --save-dev stylelint stylelint-config-standard

これにより、Stylelint とその標準構成(英語)がインストールされます。Stylelint オフィシャル Web サイト(英語)から詳細を参照してください。

Stylelint をアクティブ化して構成する

  1. Stylelint をアクティブにするには、設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | スタイルシート | Stylelint に移動して、有効にするチェックボックスを選択します。その後、ダイアログのコントロールが使用可能になります。

  2. Stylelint パッケージフィールドで、グローバルまたは現在のプロジェクトにインストールされている stylelint パッケージの場所を指定します。標準のインストール手順に従っている場合、JetBrains Rider はパッケージを自動的に検出します。

  3. ファイルに対して実行フィールドで、リントするファイルのセットを定義するパターンを指定します。デフォルトでは、StyleLint はプレーン CSS ファイルのみを処理するため、デフォルトのパターンは **/*.{css} です。

    他の種類のファイルまたは特定のフォルダーに格納されているファイルをリントするには、glob パターン(英語)を使用して既定のパターンを更新します。他のタイプのファイルをリントするには、以下の CSS とは異なる Lint スタイルシートに従ってカスタム構成も使用します。

    • 例: HTML、Vue、SCSS、スタイル付きコンポーネント、JavaScript、TypeScript、JSX、TSX もリントするには、デフォルトのパターンを次のように更新します。

      **/*.{html,vue,css,scss,js,ts,jsx,tsx}

    • サブフォルダーを含む特定のフォルダーからファイルを lint する場合は、**/* を <path to the folder>/**/* に置き換えます。

      次のような構造のプロジェクトがあるとします。

      Stylelint: custom patterns. Example project structure

      styles フォルダー内の CSS ファイルと SCSS ファイルのみをリントするには、次のようにパターンを更新します。

      styles/*.{css,scss}

      その結果、ファイル styles.css および lint_scss.scss はリントされますが、no_lint_scss.scss はリントされません。

  4. オプション:

    構成ファイルフィールドで、構成ファイルの場所を指定します。

    デフォルトでは、フィールドは空であり、JetBrains Rider は Stylelint ネイティブメカニズムを使用して構成を自動的に検出します。この自動検出モードでは、Stylelint はフォルダー構造を上に移動し、次のいずれかの方法で定義された構成を探します。

    • package.json ファイルの stylelint プロパティ経由。

    • .stylelintrc.json、.stylelintrc.yaml、.stylelintrc.yml、または .stylelintrc.js ファイル内。

    • JavaScript オブジェクトをエクスポートする stylelint.config.js ファイル内。

    • JavaScript オブジェクトをエクスポートする stylelint.config.cjs ファイル内。JavaScript で Stylelint を実行する場合、package.json に "type":"module" プロパティを持つパッケージ。

    Stylelint オフィシャル Web サイト(英語)の詳細を参照してください。

    カスタム構成ファイルを使用するには、構成ファイルフィールドで the Browse button をクリックし、開いたダイアログで必要な構成ファイルへのパスを選択します。

保存時に問題を自動的に修正

Stylelint は、変更が Ctrl+S を使用して手動で保存されるたびに、または実行 / デバッグ構成を起動したとき、JetBrains Rider を閉じたとき、またはバージョン管理アクションを実行したときに自動的に保存されるたびに、検出された問題を修正できます。詳細については、自動保存を参照してください。

  • 設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | スタイルシート | Stylelint に移動して、保存時に stylelint --fix を実行するチェックボックスを選択します。

コードの Lint

Stylelint は、スタイルシートファイルを編集すると自動的に起動し、検出された問題をハイライトします。

  • ポップアップで問題の説明を表示するには、ハイライトされたコードの上にマウスを置きます。

    Stylelint popup

  • Stylelint は、Stylelint 自動修正(英語)機能を使用して、現在のファイルで検出された問題を明確なケースで自動的に修正できます。自動修正を適用するには、ポップアップで Stylelint: 現在のファイルを修正をクリックします。

    または、Alt+Enter を押して、リストから Stylelint: 現在のファイルを修正を選択します。

    Stylelint quick-fix

CSS とは異なる Lint スタイルシート

CSS とは異なるスタイルシートを lint するには、customSyntax (英語) を直接使用するか、コミュニティ共有設定を使用する必要があります。詳細については、Stylelint オフィシャル Web サイト(英語)を参照してください。

  1. SCSS など、lint するスタイルシートに応じて、適切な共有構成と共に stylelint をインストールします。

    npm install --save-dev stylelint stylelint-config-standard-scss

    Stylelint オフィシャル Web サイト(英語)から利用可能な共有設定の詳細を参照してください。

  2. Stylelint 構成ファイルを開き、次の内容で extends フィールドを追加します。

    { "extends": "<shared config>" }

    例:

    { "extends": "stylelint-config-standard-scss" }
Compass アプリケーションの Sass および SCSS Stylus