Stylelint

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

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

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

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

ファイルに対して実行フィールドで、リントするファイルのセットを定義するパターンを指定します。デフォルトでは、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>/**/* に置き換えます。

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

  

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

  styles/*.{css,scss}

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

オプション:

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

デフォルトでは、フィールドは空であり、IntelliJ IDEA は 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 サイト(英語)の詳細を参照してください。

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

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

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

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

例: