Stylelint—スタイルガイドのためのコードクオリティツールです。
RubyMine は Stylelint と統合されているため、IDE 内で CSS コードを検査できます。 Stylelint は CSS ファイルを編集すると自動的に起動し、検出された問題をハイライトします。詳細は下記の コードのリント を参照してください。
CSS 以外にも、下記の CSS とは異なるスタイルシートのリント で説明されているように customSyntax を適用して、Stylelint で他のスタイルシートも検証できます。
始める前に
Node.js をダウンロードしてインストールします。
プロジェクトでローカル Node.js ランタイムが設定されていることを確認してください。 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。 ノードランタイム フィールドにはプロジェクトのデフォルト 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 パッケージの場所を指定します。 標準のインストールプロシージャに従った場合、RubyMine はパッケージを自動で検出します。
ファイルに対して実行 フィールドで、リントするファイルのセットを定義するパターンを指定します。 デフォルトでは、StyleLint はプレーン CSS ファイルのみを処理するため、デフォルトのパターンは
**/*.{css}です。他の種類のファイルまたは特定のフォルダーに格納されているファイルをリントするには、 glob パターン(英語)を使用して既定のパターンを更新します。 他のタイプのファイルもリントするには、下記の 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 はリントされません。
オプション:
構成ファイル フィールドで、構成ファイルの場所を指定します。
デフォルトではフィールドは空であり、RubyMine は 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 サイト をご参照ください。
カスタム構成ファイルを使用するには、 構成ファイル フィールドで
をクリックし、開いたダイアログで必要な構成ファイルへのパスを選択します。
保存時に問題を自動的に修正
Stylelint は、変更が Ctrl+S を使用して手動で保存されるたび、あるいは実行/デバッグ構成を起動する、RubyMine を閉じる、またはバージョン管理操作を行うなどして自動的に保存されるたびに、検出された問題を修正できます。詳細については、 自動保存 を参照してください。
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 保存時に stylelint --fix を実行する チェックボックスを選択します。
コードの Lint
Stylelint は、スタイルシートファイルを編集すると自動的に起動し、検出された問題をハイライトします。
ポップアップで問題の説明を確認するには、ハイライトされたコードにポインタを置いてください。
Stylelint は、 Stylelint 自動修正(英語)機能を使用して、現在のファイルで検出された問題を明確なケースで自動的に修正できます。 自動修正を適用するには、ポップアップで Stylelint: 現在のファイルを修正 をクリックします。
または、 Alt+Enter を押して、リストから Stylelint: 現在のファイルを修正 を選択します。
CSS とは異なる Lint スタイルシート
CSS とは異なるスタイルシートを lint するには、 customSyntax (英語) を直接使用するか、コミュニティ共有設定を使用する必要があります。 詳細については、 Stylelint オフィシャル Web サイト(英語)を参照してください。
リントするスタイルシートに応じて、適切な共有構成と一緒に stylelint をインストールしてください。例えば SCSS の場合：
npm install --save-dev stylelint stylelint-config-standard-scssStylelint オフィシャル Web サイト(英語)から利用可能な共有設定の詳細を参照してください。
Stylelint 構成ファイルを開き、次の内容で
extendsフィールドを追加します。{ "extends": "<shared config>" }例：
{ "extends": "stylelint-config-standard-scss" }