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