Stylelint
IntelliJ IDEA は Stylelint と統合されているため、IDE 内で CSS コードの検査ができます。 Stylelint は、CSS ファイルを編集すると自動で起動し、検出された問題をハイライトします。詳細は、下記の Lint your code を参照してください。
CSS のほかに、以下の CSS 以外のスタイルシートをリントする に記載されているように、 customSyntax を適用することで、Stylelint で他のスタイルシートを検証することもできます。
始める前に
Node.js をダウンロードしてインストールします。
プロジェクトでローカルの Node.js ランタイムが構成されていることを確認してください。 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動します。 Node runtime フィールドには、デフォルトのプロジェクト Node.js ランタイムが表示されます。 Node.js インタープリターの設定の詳細を参照してください。
設定で CSS バンドルプラグインが有効になっていることを確認してください。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに CSS と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。
Stylelint をインストールする
埋め込み ターミナル （Alt+F12 ）を開いて、次のように入力します。
npm install --save-dev stylelint stylelint-config-standard
これにより、Stylelint とその 標準構成(英語)がインストールされます。 Stylelint オフィシャル Web サイト(英語)から詳細を参照してください。
Stylelint をアクティブ化して構成する
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 公式ウェブサイトを参照してください。
カスタム構成ファイルを使用するには、 構成ファイル フィールドで
をクリックし、開いたダイアログで必要な構成ファイルへのパスを選択します。
保存時に問題を自動的に修正
Stylelint は、変更が Ctrl+S を使用して手動で保存されるたび、あるいは実行/デバッグ構成を起動する、IntelliJ IDEA を閉じる、またはバージョン管理操作を行うなどして自動的に保存されるたびに、検出された問題を修正できます。詳細については、 自動保存 を参照してください。
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 保存時に stylelint --fix を実行する チェックボックスを選択します。
コードの Lint
Stylelint は、スタイルシートファイルを編集すると自動的に起動し、検出された問題をハイライトします。
ポップアップで問題の説明を表示するには、ハイライトされたコードの上にマウスを置きます。
Stylelint は、 Stylelint 自動修正(英語)機能を使用して、現在のファイルで検出された問題を明確なケースで自動的に修正できます。 自動修正を適用するには、ポップアップで Stylelint: 現在のファイルを修正 をクリックします。
または、 Alt+Enter を押して、リストから Stylelint: 現在のファイルを修正 を選択します。
CSS とは異なる Lint スタイルシート
CSS とは異なるスタイルシートを lint するには、 customSyntax (英語) を直接使用するか、コミュニティ共有設定を使用する必要があります。 詳細については、 Stylelint オフィシャル Web サイト(英語)を参照してください。
SCSS など、lint するスタイルシートに応じて、適切な共有構成と共に stylelint をインストールします。
npm install --save-dev stylelint stylelint-config-standard-scssStylelint オフィシャル Web サイト(英語)から利用可能な共有設定の詳細を参照してください。
Stylelint 構成ファイルを開き、次の内容で
拡張フィールドを追加します。{ "extends": "<shared config>" }例:
{ "extends": "stylelint-config-standard-scss" }