🤖
stylelintユーザガイドー標準ルール
内容の目的
本内容は、Stylelintユーザガイドー標準ルール を翻訳し、
個人活用のために整理しています。
ルール
✅：stylelintによるルールが有効になっている
🔧：自動修正が対応している
エラーの回避
これらの no 系ルールを使うことでエラーを回避できます。
非推奨な構文や値を禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 1 |
at-rule-no-deprecated非推奨の at-rule を禁止します。 |
✅ | 🔧 |
| 2 |
declaration-property-value-keyword-no-deprecated宣言内のプロパティで非推奨のキーワードを禁止します。 |
✅ | 🔧 |
特異性の低いセレクタが高いセレクタの後ろに書かれることを禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 3 |
no-descending-specificity特異性の高いセレクタの後に特異性の低いセレクタが記述されることを禁止します。 |
✅ | ー |
重複を禁止するルール
| # | # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|---|
| 4 |
declaration-block-no-duplicate-custom-properties宣言ブロック内でのカスタムプロパティの重複を禁止します。 |
✅ | ||
| 5 |
declaration-block-no-duplicate-properties宣言ブロック内でのプロパティの重複を禁止します。 |
✅ | 🔧 | |
| 6 |
font-family-no-duplicate-namesフォントファミリー内での名前の重複を禁止します。 |
✅ | ||
| 7 |
keyframe-block-no-duplicate-selectorsキーフレームブロック内でのセレクタの重複を禁止します。 |
✅ | ||
| 8 |
no-duplicate-at-import-rules@import ルールの重複を禁止します。 |
✅ | ||
| 9 |
no-duplicate-selectorsセレクタの重複を禁止します。 |
✅ |
空要素を禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 10 |
block-no-empty空のブロックを禁止します。 |
✅ | |
| 11 |
comment-no-empty空のコメントを禁止します。 |
✅ | |
| 12 |
no-empty-source空のソースを禁止します。 |
✅ |
無効な構文や値を禁止する（暗黙的な場合もある）ルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 13 |
at-rule-prelude-no-invalidat-rule のプレリュード（前置部）で無効な値を禁止します。 |
✅ | |
| 14 |
color-no-invalid-hex無効な 16 進カラーコードを禁止します。 |
||
| 15 |
function-calc-no-unspaced-operatorcalc 関数内でスペースのない演算子を禁止します。 |
✅ | 🔧 |
| 16 |
keyframe-declaration-no-importantキーフレーム宣言内での !important の使用を禁止します。 |
✅ | |
| 17 |
media-query-no-invalid無効なメディアクエリを禁止します。 |
✅ | |
| 18 |
named-grid-areas-no-invalid無効な名前付きグリッドエリアを禁止します。 |
✅ | |
| 19 |
no-invalid-double-slash-comments無効な二重スラッシュコメントを禁止します。 |
✅ | |
| 20 |
no-invalid-position-at-import-rule@import ルールの無効な位置を禁止します。 |
✅ | |
| 21 |
string-no-newline文字列内での改行を禁止します。 |
✅ | |
| 22 |
syntax-string-no-invalid無効な構文の文字列を禁止します。 |
✅ |
不正な空白文字を禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 23 |
no-irregular-whitespace不正な空白文字を禁止します。 |
✅ |
必要な構文や値の欠落を禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 24 |
custom-property-no-missing-var-functionカスタムプロパティで var 関数の欠落を禁止します。 |
✅ | |
| 25 |
font-family-no-missing-generic-family-keywordフォントファミリーで一般的なファミリーキーワードの省略を禁止します。 |
✅ |
標準外の構文や値を禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 26 |
function-linear-gradient-no-nonstandard-direction線形グラデーション関数で標準外の方向値を禁止します。 |
省略プロパティによる上書きを禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 27 |
declaration-block-no-shorthand-property-overrides省略プロパティが関連する個別プロパティを上書きすることを禁止します。 |
✅ |
マッチしないセレクタを禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 28 |
selector-anb-no-unmatchableマッチしない An+B セレクタを禁止します。 |
✅ |
未定義な構文や値を禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 29 |
annotation-no-unknown未定義のアノテーションを禁止します。 |
✅ | |
| 30 |
at-rule-descriptor-no-unknown未定義の at-rule ディスクリプターを禁止します。 |
✅ | |
| 31 |
at-rule-descriptor-value-no-unknownat-rule 内ディスクリプターの未定義値を禁止します。 |
✅ | |
| 32 |
at-rule-no-unknown未定義の at-rule を禁止します。 |
✅ | |
| 33 |
declaration-property-value-no-unknown宣言内プロパティの未定義値を禁止します。 |
✅ | |
| 34 |
function-no-unknown未定義の関数を禁止します。 |
||
| 35 |
media-feature-name-no-unknown未定義のメディア機能名を禁止します。 |
✅ | |
| 36 |
media-feature-name-value-no-unknownメディア機能の未定義値を禁止します。 |
✅ | |
| 37 |
no-unknown-animations未定義のアニメーション名を禁止します。 |
||
| 38 |
no-unknown-custom-media未定義のカスタムメディアクエリを禁止します。 |
||
| 39 |
no-unknown-custom-properties未定義のカスタムプロパティを禁止します。 |
||
| 40 |
property-no-unknown未定義のプロパティを禁止します。 |
✅ | |
| 41 |
selector-pseudo-class-no-unknown未定義の疑似クラスセレクタを禁止します。 |
✅ | |
| 42 |
selector-pseudo-element-no-unknown未定義の疑似要素セレクタを禁止します。 |
✅ | |
| 43 |
selector-type-no-unknown未定義の型セレクタを禁止します。 |
✅ | |
| 44 |
unit-no-unknown未定義の単位を禁止します。 |
コーディング規約の強制
これらの no と list ルールを使ってコーディング規約を強制できます。
コードの一貫性を保つために強力なルールです。ほとんどのルールはニーズに合わせて設定する必要があります。
許可、禁止、必須ルール
| # | 種別 | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|---|
| 1 | At-rule |
at-rule-allowed-list許可する at-rule の一覧を指定します。 |
||
| 2 | At-rule |
at-rule-disallowed-list禁止する at-rule の一覧を指定します。 |
||
| 3 | At-rule |
at-rule-no-vendor-prefixat-rule に対するベンダープレフィックスの使用を禁止します。 |
✅ | 🔧 |
| 4 | At-rule |
at-rule-property-required-listat-rule に必須のプロパティ（またはディスクリプター）の一覧を指定します。 |
||
| 5 | 色 |
color-hex-alpha16進数カラーのアルファチャンネルの使用を必須または禁止します。 |
||
| 6 | 色 |
color-named可能な場合に名前付きカラーを必須または禁止します。 |
||
| 7 | 色 |
color-no-hex16進数カラーの使用を禁止します。 |
||
| 8 | コメント |
comment-word-disallowed-listコメント内で禁止する単語の一覧を指定します。 |
||
| 9 | 宣言 |
declaration-no-important宣言内での !important の使用を禁止します。 |
||
| 10 | 宣言 |
declaration-property-unit-allowed-list宣言内で許可するプロパティと単位の組み合わせの一覧を指定します。 |
||
| 11 | 宣言 |
declaration-property-unit-disallowed-list宣言内で禁止するプロパティと単位の組み合わせの一覧を指定します。 |
||
| 12 | 宣言 |
declaration-property-value-allowed-list宣言内で許可するプロパティと値の組み合わせの一覧を指定します。 |
||
| 13 | 宣言 |
declaration-property-value-disallowed-list宣言内で禁止するプロパティと値の組み合わせの一覧を指定します。 |
||
| 14 | 関数 |
function-allowed-list許可する関数の一覧を指定します。 |
||
| 15 | 関数 |
function-disallowed-list禁止する関数の一覧を指定します。 |
||
| 16 | 関数 |
function-url-no-scheme-relativeスキーム相対 URL の使用を禁止します。 |
||
| 17 | 関数 |
function-url-scheme-allowed-list許可する URL スキームの一覧を指定します。 |
||
| 18 | 関数 |
function-url-scheme-disallowed-list禁止する URL スキームの一覧を指定します。 |
||
| 19 | 長さ |
length-zero-no-unitゼロの長さに単位を付けることを禁止します。 |
✅ | 🔧 |
| 20 | メディア機能 |
media-feature-name-allowed-list許可するメディア機能名の一覧を指定します。 |
||
| 21 | メディア機能 |
media-feature-name-disallowed-list禁止するメディア機能名の一覧を指定します。 |
||
| 22 | メディア機能 |
media-feature-name-no-vendor-prefixメディア機能名に対するベンダープレフィックスの使用を禁止します。 |
✅ | 🔧 |
| 23 | メディア機能 |
media-feature-name-unit-allowed-listメディア機能内で許可する名前と単位の組み合わせの一覧を指定します。 |
||
| 24 | メディア機能 |
media-feature-name-value-allowed-list許可するメディア機能名と値の組み合わせの一覧を指定します。 |
||
| 25 | プロパティ |
property-allowed-list許可するプロパティの一覧を指定します。 |
||
| 26 | プロパティ |
property-disallowed-list禁止するプロパティの一覧を指定します。 |
||
| 27 | プロパティ |
property-no-vendor-prefixプロパティに対するベンダープレフィックスの使用を禁止します。 |
✅ | 🔧 |
| 28 | ルール |
rule-selector-property-disallowed-listルール内のセレクターに対して禁止するプロパティの一覧を指定します。 |
||
| 29 | セレクター |
selector-attribute-name-disallowed-list禁止する属性名の一覧を指定します。 |
||
| 30 | セレクター |
selector-attribute-operator-allowed-list許可する属性演算子の一覧を指定します。 |
||
| 31 | セレクター |
selector-attribute-operator-disallowed-list禁止する属性演算子の一覧を指定します。 |
||
| 32 | セレクター |
selector-combinator-allowed-list許可するコンビネーターの一覧を指定します。 |
||
| 33 | セレクター |
selector-combinator-disallowed-list禁止するコンビネーターの一覧を指定します。 |
||
| 34 | セレクター |
selector-disallowed-list禁止するセレクターの一覧を指定します。 |
||
| 35 | セレクター |
selector-no-qualifying-typeタイプによるセレクターの修飾を禁止します。 |
||
| 36 | セレクター |
selector-no-vendor-prefixセレクターに対するベンダープレフィックスの使用を禁止します。 |
✅ | 🔧 |
| 37 | セレクター |
selector-pseudo-class-allowed-list許可する疑似クラスセレクターの一覧を指定します。 |
||
| 38 | セレクター |
selector-pseudo-class-disallowed-list禁止する疑似クラスセレクターの一覧を指定します。 |
||
| 39 | セレクター |
selector-pseudo-element-allowed-list許可する疑似要素セレクターの一覧を指定します。 |
||
| 40 | セレクター |
selector-pseudo-element-disallowed-list禁止する疑似要素セレクターの一覧を指定します。 |
||
| 41 | 単位 |
unit-allowed-list許可する単位の一覧を指定します。 |
||
| 42 | 単位 |
unit-disallowed-list禁止する単位の一覧を指定します。 |
||
| 43 | 値（Value） |
value-no-vendor-prefix値に対するベンダープレフィックスの使用を禁止します。 |
✅ | 🔧 |
単語を小文字または大文字で統一するためのルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 44 |
function-name-case関数名を小文字または大文字で統一します。 |
✅ | 🔧 |
| 45 |
selector-type-case型セレクタを小文字または大文字で統一します。 |
✅ | 🔧 |
| 46 |
value-keyword-caseキーワードの値を小文字または大文字で統一します。 |
✅ | 🔧 |
各構文の前に空行を入れるかどうかを制御するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 47 |
at-rule-empty-line-beforeat-rule の前に空行を必須または禁止します。 |
✅ | 🔧 |
| 48 |
comment-empty-line-beforeコメントの前に空行を必須または禁止します。 |
✅ | 🔧 |
| 49 |
custom-property-empty-line-beforeカスタムプロパティの前に空行を必須または禁止します。 |
✅ | 🔧 |
| 50 |
declaration-empty-line-before宣言の前に空行を必須または禁止します。 |
✅ | 🔧 |
| 51 |
rule-empty-line-beforeルールの前に空行を必須または禁止します。 |
✅ | 🔧 |
各構成要素の最大数や最小値を制限するためのルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 52 |
declaration-block-single-line-max-declarations単一行の宣言ブロック内の宣言数を制限します。 |
✅ | |
| 53 |
declaration-property-max-values宣言内のプロパティに対する値の数を制限します。 |
||
| 54 |
max-nesting-depthネストの深さを制限します。 |
||
| 55 |
number-max-precision数値で使用できる小数点以下の桁数を制限します。 |
✅ | |
| 56 |
selector-max-attributeセレクター内の属性セレクターの数を制限します。 |
||
| 57 |
selector-max-classセレクター内のクラスの数を制限します。 |
||
| 58 |
selector-max-combinatorsセレクター内のコンビネーターの数を制限します。 |
||
| 59 |
selector-max-compound-selectorsセレクター内の複合セレクターの数を制限します。 |
||
| 60 |
selector-max-idセレクター内の ID セレクターの数を制限します。 |
||
| 61 |
selector-max-pseudo-classセレクター内の疑似クラスの数を制限します。 |
||
| 62 |
selector-max-specificityセレクターの詳細度（specificity）を制限します。 |
||
| 63 |
selector-max-typeセレクター内の型セレクターの数を制限します。 |
||
| 64 |
selector-max-universalセレクター内のユニバーサルセレクターの数を制限します。 |
||
| 65 |
time-min-milliseconds時間の値に対して指定可能な最小ミリ秒数を制限します。 |
複数の表記が存在する要素に対して統一を強制するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 66 |
alpha-value-notationアルファ値の表記をパーセンテージまたは数値に統一します。 |
✅ | 🔧 |
| 67 |
color-function-alias-notationカラー関数の別名表記を指定します。 |
✅ | 🔧 |
| 68 |
color-function-notationカラー関数の表記をモダン形式またはレガシー形式に統一します。 |
✅ | 🔧 |
| 69 |
color-hex-length16進数カラーの表記を短縮形式または通常形式に統一します。 |
✅ | 🔧 |
| 70 |
font-weight-notationフォントウェイトの表記を数値形式または名前形式に統一します。 |
🔧 | |
| 71 |
hue-degree-notation色相の角度の表記を数値または角度で統一します。 |
✅ | 🔧 |
| 72 |
import-notation@import における指定方法を文字列形式または URL 形式に統一します。 |
✅ | 🔧 |
| 73 |
keyframe-selector-notationキーフレームセレクターの表記をキーワードまたはパーセンテージに統一します。 |
✅ | 🔧 |
| 74 |
lightness-notation明度の表記を数値またはパーセンテージで統一します。 |
✅ | 🔧 |
| 75 |
media-feature-range-notationメディア機能の範囲の表記をコンテキスト形式またはプレフィックス形式に統一します。 |
✅ | 🔧 |
| 76 |
selector-not-notation:not() 疑似クラスセレクターの表記を単純または複雑に統一します。 |
✅ | 🔧 |
| 77 |
selector-pseudo-element-colon-notation疑似要素セレクターのコロン表記を単一または二重に統一します。 |
✅ | 🔧 |
命名にパターン（正規表現）を適用することで一貫性を強制するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 78 |
comment-patternコメントに使用するパターンを指定します。 |
||
| 89 |
container-name-patternコンテナ名に使用するパターンを指定します。 |
✅ | |
| 80 |
custom-media-patternカスタムメディアクエリ名に使用するパターンを指定します。 |
✅ | |
| 81 |
custom-property-patternカスタムプロパティに使用するパターンを指定します。 |
✅ | |
| 82 |
keyframes-name-patternキーフレーム名に使用するパターンを指定します。 |
✅ | |
| 83 |
layer-name-patternレイヤー名に使用するパターンを指定します。 |
✅ | |
| 84 |
selector-class-patternクラスセレクターに使用するパターンを指定します。 |
✅ | |
| 85 |
selector-id-patternID セレクターに使用するパターンを指定します。 |
✅ | |
| 86 |
selector-nested-pattern入れ子になったルールのセレクターに使用するパターンを指定します。 |
クォートの有無を制御するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 87 |
font-family-name-quotesフォントファミリー名にクォートを付けるかどうかを制御します。 |
✅ | 🔧 |
| 88 |
function-url-quotesURL にクォートを付けるかどうかを制御します。 |
✅ | 🔧 |
| 89 |
selector-attribute-quotes属性値にクォートを付けるかどうかを制御します。 |
✅ | 🔧 |
不要な冗長表現を禁止するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 90 |
declaration-block-no-redundant-longhand-properties宣言ブロック内の冗長なロングハンドプロパティを禁止します。 |
✅ | 🔧 |
| 91 |
shorthand-property-no-redundant-valuesショートハンドプロパティ内の冗長な値を禁止します。 |
✅ | 🔧 |
コメントの中に空白を入れるかどうかを制御するルール
| # | ルール名 | 標準構成 | 自動修正 |
|---|---|---|---|
| 92 |
comment-whitespace-insideコメント記号の内側に空白を入れるかどうかを制御します。 |
✅ | 🔧 |
Discussion