Stylelint

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

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

設定で CSS バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに CSS と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。

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

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

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

他の種類のファイルまたは特定のフォルダーに格納されているファイルをリントするには、 glob パターン(英語)を使用して既定のパターンを更新します。 他の種類のファイルもリントするには、下記の Lint stylesheets different from CSS で説明されているようにカスタム設定も使用してください。

• 例えば、HTML、Vue、SCSS、Styled Components、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 はリントされません。

オプション：

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

デフォルトではフィールドは空であり、PhpStorm は 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 公式ウェブサイト をご覧ください。

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

stylelint を、リントしたいスタイルシートに合わせた適切な共有構成と一緒にインストールします（例：SCSS）：

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

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

例：