Zenn
🤖

stylelintユーザガイドーエラーと警告

に公開
CSS
Sass
Scss
tech

内容の目的

本内容は、Stylelintユーザガイドーエラーと警告 を翻訳し、個人活用のために整理しています。

エラーと警告

ルールの問題に加えて、Stylelint は以下のエラーや警告を表示します。

CSS構文エラー

Stylelintに組み込まれているCSSパーサー、または選択されたカスタム構文がコードを解析できませんでした。

ブロックの閉じ忘れ

波かっこ（通常は_宣言ブロック_）の対応を取る必要があります。

例えば：

- a { color: red;
+ a { color: red; }

角かっこの閉じ忘れ

角かっこ（通常は_属性セレクター_や_グリッド名_）の対応を取る必要があります。

例えば：

- a[foo { grid: [bar; }
+ a[foo] { grid: [bar]; }

文字列の閉じ忘れ

_引用符_の対応を取る必要があります。

例えば：

- a { content: " }
+ a { content: "" }

不明な単語

以下を確認してください：

  • _プロパティ名_はハイフンでつなぐこと
  • _プロパティと値のペア_はコロンで区切ること
  • _宣言_はセミコロンで区切ること
  • _セレクター_は_宣言ブロック_とペアにすること

例えば：

a {
- margin top: 1px
- color red
+ margin-top: 1px;
+ color: red
}

解析エラー

Stylelintに組み込まれているCSSパーサー（または選択されたカスタム構文）はコードを正常に解析しましたが、メディアクエリ、セレクター、または値のいずれかを解析するための構文固有のパーサーが失敗しました。

構文固有のパーサーは以下の通りです：

  • @csstools/media-query-list-parser
  • postcss-selector-parser
  • postcss-value-parser

括弧が対応しているかなど、構文が正しく形成されているかを確認してください。

不明なルールのエラー

設定オブジェクトに不明なルールが含まれています。

以下を確認してください：

  • ルールが最近追加されている可能性があるため、Stylelintの最新バージョンをインストールする（npm i --save-dev stylelint）
  • ルール一覧を検索して、ルールが存在し正しく名前付けされているかを確認する

廃止予定の警告

設定オブジェクトに廃止予定のルールが含まれています。

以下を確認してください：

  • どのリリースでルールが廃止されたかをCHANGELOGで特定する
  • そこで提案されている対応を行う

無効なオプションの警告

設定オブジェクトに誤った設定のルールがあります。

以下を確認してください：

  • オプションが最近追加されている可能性があるため、Stylelintの最新バージョンをインストールする（npm i --save-dev stylelint）
  • ルールのREADMEを読んでオプションが存在し正しく名前付けされているかを確認する
  • 設定オブジェクトのrulesプロパティを正しく設定する

目次に戻る

Discussion