19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

.stylelintrc

.stylelintrc

.stylelintrcはStylelintの設定ファイルです。

Stylelint

CSS、SCSSのリンターで、一部のルールは自動修正にも対応しています。
プラグインを追加して新しいルールを追加することもできます。

Stylelintのインストール

terminal
npm i -D stylelint

実行

terminal
//lintのみ
npx stylelint src/css/**/**.css
npx stylelint src/scss/**/**.scss

//lint + 自動修正
npx stylelint src/css/**/**.css --fix
npx stylelint src/scss/**/**.scss --fix

記法

形式

ファイル名 ファイル形式
.stylelintrc.json JSON形式
.stylelintrc.yaml YAML形式
.stylelintrc.yml YAML形式
.stylelintrc.js JavaScript形式
.stylelintrc JSON形式、YAML形式

JSONの場合

.stylelintrc.json
{
  "extends": [
    "元にするルールセット名1",
    "元にするルールセット名2"
  ],
  "plugin": [
    "プラグイン名1",
    "プラグイン名2"
  ],
  "rules": {
    "ルール名1": "値",
    "ルール名2": ["値"{
     "オプションのルール名": "値"
    }]
  }
} 

JavaScriptの場合

.stylelintrc.js
module.exports = {
   extends: [
     '元にするルールセット名1',
     '元にするルールセット名2'
   ],
   plugin: [
     'プラグイン名1',
     'プラグイン名2'
   ],
   rules:{
     'ルール名1': '値', 
     'ルール名2': ['値', { 
       'オプションのルール名': '値' 
     }]
   }
};

YAMLの場合

.stylelintrc.js
extends:
 - 元にするルールセット名1
 - 元にするルールセット名2
plugins:
 - プラグイン名1
 - プラグイン名2
rules:
 ルール名1: 値
 ルール名2:
  - 値
  - オプションのルール名:
   - 値

extends

Stylelintで使えるルールは多いので、全部を1から書くのは大変です。
extendで既存のルールのセットを読み込んで、rulesで変えたいルールだけ上書きするのが一般的な使い方です。

一般的なルールセット

ルールセット名 内容
stylelint-config-recommended 最小限のCSSのルールセット
stylelint-config-standard 一般的なCSSのルールセット
config-recommended-scss SCSSのルールセット
stylelint-config-primer GitHubのCSSのルールセット
stylelint-config-wordpress WordPressのルールセット
stylelint-config-twbs-bootstrap Bootstrapのルールセット

stylelint-config-recommended

インストール
terminal
npm i -D stylelint-config-recommended
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-recommended"
}

stylelint-config-standard

インストール
terminal
npm i -D stylelint-config-standard
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-standard"
}

stylelint-config-recommended-scss

インストール
terminal
npm i -D stylelint-config-recommended-scss
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-recommended-scss"
}

stylelint-config-wordpress

インストール
terminal
npm i -D stylelint-config-wordpress
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-wordpress"
}

stylelint-config-twbs-bootstrap

インストール
terminal
npm i -D stylelint-config-twbs-bootstrap
.stylelintrcの設定変更(CSS)
.stylelintrc
{
 "extends": "stylelint-config-twbs-bootstrap/css"
}
.stylelintrcの設定変更(SCSS)
.stylelintrc
{
 "extends": "stylelint-config-twbs-bootstrap/scss"
}

stylelint-config-primer

インストール
terminal
npm install --save --dev stylelint-config-primer
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-primer"
}

Rules

Possible errors

問題のある書き方を検知します。

Color(色)

無効なHEXでの色指定を禁止

.stylelintrc
"color-no-invalid-hex":true
Font family(フォントファミリー)

フォントファミリー名の重複を禁止

.stylelintrc
"font-family-no-duplicate-names": true

//オプション
"ignoreFontFamilyNames": [正規表現, "文字列"]

フォントファミリー名の中に、総称ファミリー(serif、sans-serif、monospaceなど)を書く事を必須にする

.stylelintrc
"font-family-no-missing-generic-family-keyword": true

//オプション
"ignoreFontFamilies": [正規表現, "文字列"]
Function(関数)

calc関数内の無効な式を禁止

.stylelintrc
"function-calc-no-invalid": true

calc関数内でスペースのない演算子を禁止

.stylelintrc
"function-calc-no-unspaced-operator":true

linear-gradient()での無効な方向の値を禁止

.stylelintrc
"function-linear-gradient-no-nonstandard-direction": true
String(文字列)

(エスケープされていない)文字列の改行を禁止

.stylelintrc
"string-no-newline": true
Unit(単位)

不明な単位を禁止

.stylelintrc
"unit-no-unknown": true
 
//オプション
"ignoreUnits": [正規表現, "文字列"]
"ignoreFunctions":  [正規表現, "文字列"]
Property(プロパティ)

不明なプロパティを禁止

.stylelintrc
"property-no-unknown": true
 
//オプション
"ignoreProperties": [正規表現, "文字列"]
"ignoreSelector"s:  [正規表現, "文字列"]
"checkPrefixed": true (デフォルト)
"checkPrefixed": false
Keyframe declaration(キーフレーム宣言)

キーフレーム宣言内で!importantを禁止

.stylelintrc
"keyframe-declaration-no-important": true
Declaration block(宣言ブロック)

宣言ブロック内で重複するプロパティを禁止

.stylelintrc
"declaration-block-no-duplicate-properties": true
 
//オプション
"ignore": ["consecutive-duplicates"]
"ignore": ["consecutive-duplicates-with-different-values"]
"ignoreProperties": [正規表現, "任意の文字列"]

ロングハンドプロパティを上書きするショートハンドプロパティを禁止

.stylelintrc
"declaration-block-no-shorthand-property-overrides": true
Block(ブロック)

空のブロックを禁止

.stylelintrc
"block-no-empty": true

//オプション
"ignore": ["comments"]
Selector(セレクタ)

不明な疑似クラスセレクタを禁止

.stylelintrc
"selector-pseudo-class-no-unknown": true

//オプション
"ignorePseudoClasses": [正規表現, "文字列"]

不明な疑似要素セレクタを禁止

.stylelintrc
"selector-pseudo-element-no-unknown": true

//オプション
"ignorePseudoElements": [正規表現, "文字列"]

不明なタイプセレクタを禁止

.stylelintrc
"selector-type-no-unknown": true

//オプション
"ignore": ["custom-elements", "default-namespace"]
"ignoreNamespaces": [正規表現, "文字列"]
"ignoreTypes": [正規表現, "文字列"]
Media feature(メディア・フィーチャー)

不明なメディア・フィーチャー名を禁止

.stylelintrc
"media-feature-name-no-unknown": true

//オプション
"ignoreMediaFeatureNames": [正規表現, "任意の文字列"]
At-rule(@ルール)

不明な@ルールを禁止

.stylelintrc
"at-rule-no-unknown": true

//オプション
"ignoreAtRules": [正規表現, "任意の文字列"]
Comment(コメント)

空のコメントを禁止

.stylelintrc
"comment-no-empty": true
General / Sheet(一般/シート)]

詳細度が高いセレクタより後に、詳細度が低いセレクタを禁止

.stylelintrc
"no-descending-specificity": true

//オプション
"ignore": ["selectors-within-list"]

スタイルシート内の@importルールの重複を禁止

.stylelintrc
"no-duplicate-at-import-rules": true

スタイルシート内でのセレクタの重複を禁止

.stylelintrc
"no-duplicate-selectors": true

//オプション
"disallowInList": true
"disallowInList": false (デフォルト)

空のソースを禁止

.stylelintrc
"no-empty-source": true

余分なセミコロンを禁止(自動修正可能)

.stylelintrc
"no-extra-semicolons": true

CSSでサポートされていない行頭//でのコメントを禁止(SASSなどは除く)

.stylelintrc
"no-invalid-double-slash-comments": true

Limit language features

書き方に制限をかけます。

Alpha-value(アルファ値)

アルファ値の指定をパーセントか、数値に固定(自動修正可能)

.stylelintrc
//数値の場合
"alpha-value-notation": "number"

//パーセントの場合
"alpha-value-notation": "percentage"

//オプション
"exceptProperties": [正規表現, "任意の文字列"]
Hue(色相)

色相の指定を数値か角度に固定(自動修正可能)

.stylelintrc
//角度の場合
"hue-degree-notation": "angle"

//数値の場合
"hue-degree-notation": "number"
Color(色)

カラー関数の指定方法の指定(自動修正可能)

.stylelintrc
//モダンの場合
"color-function-notation": "modern"

//従来の記法の場合
"color-function-notation": "legacy"

名色での色指定

.stylelintrc
//可能な限り必須の場合
"color-named": "always-where-possible"

//禁止の場合
"color-named": "never"

//オプション
"ignore": ["inside-function"]
"ignoreProperties": [正規表現, "任意の文字列"]

16進数での色指定を禁止

.stylelintrc
"color-no-hex": true
Length(長さ)

長さゼロの単位を禁止(自動修正可能)

.stylelintrc
"length-zero-no-unit": true

//オプション
"ignore": ["custom-properties"]
Font weight(フォント・ウェイト)

数値か、名前付き(可能な場合)のfont-weight値を必須にする
名前付きの値が予想される場合は、有効な名前のみを要求する

.stylelintrc
//数値の場合
"font-weight-notation": "numeric"

//名前つきの値の場合
"font-weight-notation": "named-where-possible"

//オプション
"ignore": ["relative"]
Function(関数)

許可する関数のリストを指定

.stylelintrc
"function-allowed-list": ["関数名1","関数名2","関数名3"]

許可しない関数のリストを指定

.stylelintrc
 "function-disallowed-list": ["関数名1","関数名2","関数名3"] 

「//」で始まるURL指定を禁止

.stylelintrc
"function-url-no-scheme-relative": true

許可するURLスキームのリストを指定

.stylelintrc
"function-url-scheme-allowed-list": ["任意の文字列",正規表現]

許可しないURLスキームのリストを指定

.stylelintrc
"function-url-scheme-disallowed-list": ["任意の文字列",正規表現]
Keyframes(キーフレーム)

キーフレーム名のパターンを指定

.stylelintrc
"keyframes-name-pattern": ["任意の文字列",正規表現]
Number(数値)

数値で使用できる小数点以下の桁数を制限

.stylelintrc
"number-max-precision": 数値

//オプション
"ignoreUnits": [正規表現, "任意の文字列"]
Time(時間)

時間値の最小ミリ秒数を指定

.stylelintrc
"time-min-milliseconds": 数値

//オプション
"ignore": ["delay"]
Unit(単位)

許可する単位のリストを指定

.stylelintrc
"unit-allowed-list": ["単位名1","単位名2","単位名3"]

//オプション
"ignoreProperties": { unit: ["プロパティ名", 正規表現] }

許可しない単位のリストを指定

.stylelintrc
"unit-disallowed-list": ["単位1","単位2","単位3"]

//オプション
"ignoreProperties": { unit: ["プロパティ名", 正規表現]  }
"ignoreMediaFeatureNames": { unit: ["プロパティ名", 正規表現]  }
Shorthand property(ショートハンド・プロパティ)

省略形のプロパティで冗長な値を禁止(自動修正可能)

.stylelintrc
"shorthand-property-no-redundant-values": true
Value(値)

値のベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"value-no-vendor-prefix": true

//オプション
"ignoreValues": ["任意の文字列"]
Custom property(カスタム・プロパティ)

カスタムプロパティのパターンを指定

.stylelintrc
"custom-property-pattern": ["任意の文字列",正規表現]
Property(プロパティ)

許可するプロパティのリストを指定

.stylelintrc
"property-allowed-list": ["任意の文字列1","任意の文字列1","正規表現1","正規表現2"]

許可しないプロパティのリストを指定

.stylelintrc
"property-disallowed-list": ["任意の文字列1","任意の文字列1","正規表現1","正規表現2"]

プロパティのベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"property-no-vendor-prefix": true

//オプション
"ignoreProperties": [正規表現, "任意の文字列"]
Declaration(宣言)

1つの省略形プロパティに結合できる長い形式のプロパティを禁止

.stylelintrc
"declaration-block-no-redundant-longhand-properties": true

//オプション
"ignoreShorthands": [正規表現, "任意の文字列"]

宣言内で!importantを禁止

.stylelintrc
"declaration-no-important": true

宣言内で許可するプロパティと単位のペアのリストを指定

.stylelintrc
"declaration-property-unit-allowed-list": 
{
  "プロパティ1": ["単位1", "単位2"],
  "プロパティ2": ["単位1"],
  "プロパティ3": []
}

宣言内で許可しないプロパティと単位のペアのリストを指定

.stylelintrc
"declaration-property-unit-disallowed-list": 
{
  "プロパティ1": ["単位1", "単位2"],
  "プロパティ2": ["単位1"],
  "プロパティ3": []
}

宣言内で許可するプロパティと値のペアのリストを指定

.stylelintrc
"declaration-property-value-allowed-list": 
{
  "任意の文字列1": ["値1"],
  "任意の文字列2": [正規表現],
  "正規表現": [正規表現]
}

宣言内で許可しないプロパティと値のペアのリストを指定

.stylelintrc
"declaration-property-value-disallowed-list": 
{
  "任意の文字列1": ["値1"],
  "任意の文字列2": [正規表現],
  "正規表現": [正規表現]
}
Declaration block(宣言ブロック)

単一行の宣言ブロック内の宣言の数を制限

.stylelintrc
"declaration-block-single-line-max-declarations": 数値
Selector(セレクタ)

許可する属性演算子のリストを指定
(属性演算子は"=", "|="など)

.stylelintrc
"selector-attribute-operator-allowed-list": ["属性演算子1","属性演算子2","属性演算子3"]

許可しない属性演算子のリストを指定
(属性演算子は"=", "|="など)

.stylelintrc
"selector-attribute-operator-disallowed-list":  ["属性演算子1","属性演算子2","属性演算子3"]

クラスセレクタのパターンを指定

.stylelintrc
"selector-class-pattern": ["任意の文字列",正規表現]

許可するコンビネーターのリストを指定
(コンビネーターは、>、+、~、半角スペース)

.stylelintrc
"selector-combinator-allowed-list": ["コンビネーター1"、"コンビネーター2"、"コンビネーター3"]

許可しないコンビネーターのリストを指定
(コンビネーターは、>、+、~、半角スペース)

.stylelintrc
"selector-combinator-disallowed-list": ["コンビネーター1"、"コンビネーター2"、"コンビネーター3"]

IDセレクタのパターンを指定

.stylelintrc
"selector-id-pattern": ["任意の文字列",正規表現]

セレクタ内の属性セレクタの数を制限

.stylelintrc
"selector-max-attribute": 数値

//オプション
"ignoreAttributes": [正規表現, "任意の文字列"]

セレクタ内のクラスの数を制限

.stylelintrc
"selector-max-class": 数値

セレクタのコンビネーターの数を制限

.stylelintrc
"selector-max-combinators": 数値

セレクタ内の複合セレクタの数を制限

.stylelintrc
"selector-max-compound-selectors": 数値

セレクタ内の隣接する空行の数を制限(自動修正可能)

.stylelintrc
"selector-max-empty-lines": 数値

セレクタ内のIDセレクタの数を制限

.stylelintrc
"selector-max-id": 数値

//オプション
"ignoreContextFunctionalPseudoClasses": [正規表現, "任意の文字列"]

セレクタ内の疑似クラスの数を制限

.stylelintrc
"selector-max-pseudo-class": 数値

セレクタの詳細度を制限

.stylelintrc
"selector-max-specificity": "IDの詳細度,classの詳細度,typeの詳細度"

セレクタ内のタイプの数を制限

.stylelintrc
"selector-max-type": 数値

//オプション
"ignore": ["child", "compounded", "descendant", "next-sibling"]
"ignoreTypes": [正規表現, "任意の文字列"]

セレクタ内のユニバーサルセレクタの数を制限

.stylelintrc
"selector-max-universal": 数値

ルール内にネストされたルールのセレクタのパターンを指定

.stylelintrc
"selector-nested-pattern": ["任意の文字列",正規表現]

タイプによるセレクタの修飾を禁止

.stylelintrc
"selector-no-qualifying-type": true

//オプション
ignore: ["属性名", "クラス名", "ID名"]

セレクタのベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"selector-no-vendor-prefix": true

//オプション
"ignoreSelectors": [正規表現, "任意の文字列"]

許可する疑似クラスセレクタのリストを指定

.stylelintrc
"selector-pseudo-class-allowed-list": ["任意の文字列",正規表現]

許可しない疑似クラスセレクタのリストを指定

.stylelintrc
"selector-pseudo-class-disallowed-list": ["任意の文字列",正規表現]

許可する疑似要素セレクタのリストを指定

.stylelintrc
"selector-pseudo-element-allowed-list":  ["任意の文字列",正規表現]

疑似要素にのコロンを「1つ」か「2つ」に統一(自動修正可能)

.stylelintrc
//コロン1つ
"selector-pseudo-element-colon-notation": "single"

//コロン2つ
"selector-pseudo-element-colon-notation": "double"

許可しない疑似要素セレクタのリストを指定

.stylelintrc
"selector-pseudo-element-disallowed-list":  ["任意の文字列",正規表現]
Media feature(メディア・フィーチャー)

カスタムメディアクエリ名のパターンを指定

.stylelintrc
"media-feature-name-allowed-list": ["任意の文字列",正規表現]

許可しないメディア・フィーチャー名のリストを指定

.stylelintrc
"media-feature-name-disallowed-list": ["任意の文字列",正規表現] 

メディア・フィーチャー名のベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"media-feature-name-no-vendor-prefix": true

許可するメディア・フィーチャー名と値のペアのリストを指定

.stylelintrc
"media-feature-name-value-allowed-list": ["任意の文字列",正規表現]
Custom media(カスタムメディア)

カスタムメディアクエリ名のパターンを指定

.stylelintrc
"custom-media-pattern": ["任意の文字列",正規表現]
At-rule(@ルール)

許可する@ルールのリストを指定

.stylelintrc
"at-rule-allowed-list": ["@ルール名1","@ルール名2","@ルール名3"]

許可しない@ルールのリストを指定

.stylelintrc
"at-rule-disallowed-list": ["@ルール名1","@ルール名2","@ルール名3"]

@ルールのベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"at-rule-no-vendor-prefix": true

@ルールに必須のプロパティのリストを指定

.stylelintrc
"at-rule-property-required-list": 
{
  "@ルール名": ["プロパティ1", "プロパティ2", "プロパティ3"]
}
Comment(コメント)

コメント内の許可しない単語のリストを指定

.stylelintrc
"comment-word-disallowed-list": ["任意の文字列1","任意の文字列2","正規表現1","正規表現2"]
General / Sheet(一般/シート)]

ネストの深さを制限

.stylelintrc
"max-nesting-depth": 数値

//オプション
"ignore": ["blockless-at-rules"]
"ignore": ["pseudo-classes"]
"ignoreAtRules": ["/regex/", /regex/, "string"]

不明なアニメーションを禁止

.stylelintrc
"no-unknown-animations": true

Stylistic issues

CSSとしては影響は無いものの、大文字や小文字の統一や改行など、個人での書き方が違ってきやすい部分を統一するのに使います。

Color(色)

16進数での色指定を「小文字」か「大文字」のどちらかに統一(自動修正可能)

.stylelintrc
//小文字の場合
"color-hex-case": "lower"

//大文字の場合
"color-hex-case": "upper"

16進数での色指定を「短い表記」か「長い表記」のどちらかに統一(自動修正可能)

.stylelintrc
//短い表記の場合
"color-hex-length": "short"

//長い表記の場合
"color-hex-length": "long"
Font family(フォント・ファミリー)

フォントファミリ名を引用符で囲むかどうかを指定

.stylelintrc
//引用符が必要な場合にのみ引用符を使用し、それ以外の場合は引用符を使用しない
"font-family-name-quotes": "always-where-required"

//引用符が推奨されている場合にのみ引用符を使用し、その他の場合は引用を禁止
"font-family-name-quotes": "always-where-recommended"
 
//キーワードではないすべてのフォントファミリ名は引用符で囲む
"font-family-name-quotes": "always-unless-keyword"
Function(関数)

関数のカンマの後に改行を「必須」か、スペースを「禁止」(自動修正可能)

.stylelintrc
//必須
"function-comma-newline-after": "always"
 
//複数行の時必須
"function-comma-newline-after": "always-multi-line"
 
//複数行の時禁止
"function-comma-newline-after": "never-multi-line"

関数のカンマの前に改行「必須」か、スペース「禁止」を(自動修正可能)

.stylelintrc
//必須
"function-comma-newline-before": "always"

//複数行の時必須
"function-comma-newline-before": "always-multi-line"

//複数行の時禁止
"function-comma-newline-before": "never-multi-line"

関数のカンマの後に1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"function-comma-space-after": "always"

//禁止
"function-comma-space-after": "never"

//単一行の時必須
"function-comma-space-after": "always-single-line"

//単一行の時禁止
"function-comma-space-after": "never-single-line"

関数のカンマの前に1つのスペース「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"function-comma-space-before": "always"

//禁止
"function-comma-space-before": "never"

//単一行の時必須
"function-comma-space-before": "always-single-line"

//単一行の時禁止
"function-comma-space-before": "never-single-line"

関数内の連続する空行の数を制限(自動修正可能)

.stylelintrc
"function-max-empty-lines": 数値

関数名を「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"function-name-case": "lower"

//大文字
"function-name-case":"upper"

関数の括弧の内側に改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"function-parentheses-newline-inside": "always"

//複数行の時必須
"function-parentheses-newline-inside": "always-multi-line"

//複数行の時禁止
"function-parentheses-newline-inside": "never-multi-line"

関数の括弧の内側に1つのスペースを「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"function-parentheses-space-inside": "always"

//禁止
"function-parentheses-space-inside": "never"

//単一行の時必須
"function-parentheses-space-inside": "always-single-line"

//単一行の時禁止
"function-parentheses-space-inside": "never-single-line"

URLの引用符の「必須」か「禁止」の統一

.stylelintrc
//必須
"function-url-quotes": "always"

//禁止
"function-url-quotes": "never"

//オプション
"except": ["empty"]

関数の後のスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"function-whitespace-after": "always"

//禁止
"function-whitespace-after": "never"
Number(数値)

1未満の小数の、先頭のゼロの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"number-leading-zero": "always"

//禁止
"number-leading-zero": "never"

数字の後続ゼロを禁止(自動修正可能)

.stylelintrc
"number-no-trailing-zeros": true 
String(文字列)

文字列を囲む場合「シングルクォーテーション」か「ダブルクォーテーション」に統一(自動修正可能)

.stylelintrc
//シングルクォーテーション
"string-quotes": "single"

//ダブルクォーテーション
"string-quotes": "double"

//オプション
"avoidEscape": true (デフォルト)
"avoidEscape": false
Unit(単位)

単位を「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"unit-case": "lower"

//大文字
"unit-case": "upper"
Value(値)

キーワード値を「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"value-keyword-case": "lower"

//大文字
"value-keyword-case": "upper"

//オプション
"ignoreKeywords": [正規表現, "任意の文字列"]
"ignoreProperties": [正規表現, "任意の文字列"]
"ignoreFunctions": [正規表現, "任意の文字列"]
Value list(値リスト)

値リストのカンマの後の改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"value-list-comma-newline-after": "always"

//複数行の時必須
"value-list-comma-newline-after": "always-multi-line"

//複数行の時禁止
"value-list-comma-newline-after": "never-multi-line"

値リストのカンマの前の改行を「必須」か、空白を「禁止」

.stylelintrc
//必須
"value-list-comma-newline-before: "always"

//複数行の時必須
"value-list-comma-newline-before: "always-multi-line"

//複数行の時禁止
"value-list-comma-newline-before": "never-multi-line"

値リストのカンマの後に1つのスペースを「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"value-list-comma-space-after": "always"

//禁止
"value-list-comma-space-after": "never"

//複数行の時必須
"value-list-comma-space-after": "always-single-line"

//複数行の時禁止
"value-list-comma-space-after": "never-single-line"

値リストのカンマの前に1つのスペースが「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"value-list-comma-space-before": "always"

//禁止
"value-list-comma-space-before": "never"

//複数行の時必須
"value-list-comma-space-before": "always-single-line"

//複数行の時禁止
"value-list-comma-space-before": "never-single-line"

値リスト内の連続する空行の数を制限(自動修正可能)

.stylelintrc
"value-list-max-empty-lines": 数値
Custom property(カスタム・プロパティ)

カスタムプロパティの前の空行を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"custom-property-empty-line-before": "always"

//禁止
"custom-property-empty-line-before": "never"

//オプション
"except": ["after-comment", "after-custom-property", "first-nested"]
"ignore": ["after-comment", "first-nested", "inside-single-line-block"]
Property(プロパティ)

プロパティを「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"property-case": "lower"

//大文字
"property-case": "upper"
Declaration(宣言)

宣言の先頭の後に1つのスペースを「必須」か「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-bang-space-after": "always"

//禁止
"declaration-bang-space-after": "never"

宣言の前に1つのスペースを「必須」か「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-bang-space-before": "always"

//禁止
"declaration-bang-space-before": "never"

宣言のコロンの後の改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-colon-newline-after": "always"

//複数行の時必須
"declaration-colon-newline-after": "always-multi-line"

宣言のコロンの後に1つのスペースを「必須」か「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-colon-space-after": "always"

//禁止
"declaration-colon-space-after": "never"

//単数行の時必須
"declaration-colon-space-after": "always-single-line"

宣言のコロンの前の1つのスペースを「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"declaration-colon-space-before": "always"

//禁止
"declaration-colon-space-before": "never"

宣言の前の空行を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"declaration-empty-line-before": "always"

//禁止
"declaration-empty-line-before": "never"
 
//オプション
"except": ["after-comment", "after-declaration", "first-nested"]
"ignore": ["after-comment", "after-declaration", "first-nested", "inside-single-line-block"]
Declaration block(宣言ブロック)

宣言ブロックのセミコロンの後の改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-block-semicolon-newline-after": "always"

//複数行の時必須
"declaration-block-semicolon-newline-after": "always-multi-line"

//複数行の時禁止
"declaration-block-semicolon-newline-after": "never-multi-line"

宣言ブロックのセミコロンの前の改行を「必須」か、空白を「禁止」

.stylelintrc
//必須
"declaration-block-semicolon-newline-before": "always"

//複数行の時必須
"declaration-block-semicolon-newline-before": "always-multi-line"

//複数行の時禁止
"declaration-block-semicolon-newline-before": "never-multi-line"

宣言ブロックのセミコロンの後に1つのスペースを「必須」か「禁止」に統一(自動修正可能)。

.stylelintrc
//必須
"declaration-block-semicolon-space-after": "always"

//禁止
"declaration-block-semicolon-space-after": "never"

//単一行の時必須
"declaration-block-semicolon-space-after": "always-single-line"

//単一行の時禁止
"declaration-block-semicolon-space-after": "never-single-line"

宣言ブロックのセミコロンの前の1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"declaration-block-semicolon-space-before": "always"

//禁止
"declaration-block-semicolon-space-before": "never"

//単一行の時必須
"declaration-block-semicolon-space-before": "always-single-line"

//単一行の時禁止
"declaration-block-semicolon-space-before": "never-single-line"

宣言ブロック内の末尾のセミコロンの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"declaration-block-trailing-semicolon": "always"

//禁止
"declaration-block-trailing-semicolon": "never"
Block(ブロック)

ブロックの閉じ括弧の前の空行の「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//複数行の時必須
"block-closing-brace-empty-line-before": "always-multi-line"

//禁止
"block-closing-brace-empty-line-before": "never"

//オプション
"except": ["after-closing-brace"]

ブロックの閉じ括弧の後に改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"block-closing-brace-newline-after": "always"

//単数行の時必須
"block-closing-brace-newline-after": "always-single-line"

//単数行の時禁止
"block-closing-brace-newline-after": "never-single-line"
 
//複数行の時必須
"block-closing-brace-newline-after": "always-multi-line"

//複数行の時禁止
"block-closing-brace-newline-after": "never-multi-line"

//オプション
"ignoreAtRules": [正規表現, "任意の文字列"

ブロックの閉じ括弧の前に改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"block-closing-brace-newline-before": "always"
 
//複数行の時必須
"block-closing-brace-newline-before": "always-multi-line"

//複数行の時禁止
"block-closing-brace-newline-before": "never-multi-line"

ブロックの閉じ括弧の後の1つのスペースを「必須」か「禁止」の統一

.stylelintrc
//必須
"block-closing-brace-space-after": "always"

//禁止
"block-closing-brace-space-after": "never"

//単数行の時必須
"block-closing-brace-space-after": "always-single-line"

//単数行の時禁止
"block-closing-brace-space-after": "never-single-line"

//複数行の時必須
"block-closing-brace-space-after": "always-multi-line"

//複数行の時禁止
"block-closing-brace-space-after": "never-multi-line"

ブロックの閉じ括弧の前の1つのスペースを「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"block-closing-brace-space-before": "always"

//禁止
"block-closing-brace-space-before": "never"

//単数行の時必須
"block-closing-brace-space-before": "always-single-line"

//単数行の時禁止
"block-closing-brace-space-before": "never-single-line"

//複数行の時必須
"block-closing-brace-space-before": "always-multi-line"

//複数行の時禁止
"block-closing-brace-space-before": "never-multi-line"

ブロックの開き括弧の後の改行を必須(自動修正可能)

.stylelintrc
//必須
"block-opening-brace-newline-after": "always"

//複数行の時必須
"block-opening-brace-newline-after": "always-multi-line"
 
//複数行の時禁止
"block-opening-brace-newline-after": "never-multi-line"

ブロックの開き括弧の前の改行を「必須」か、スペースを「禁止」(自動修正可能)

.stylelintrc
//必須
"block-opening-brace-newline-before": "always"

//単数行の時必須
"block-opening-brace-newline-before": "always-single-line"

//単数行の時禁止
"block-opening-brace-newline-before": "never-single-line"

//複数行の時必須
"block-opening-brace-newline-before": "always-multi-line"

//複数行の時禁止
"block-opening-brace-newline-before": "never-multi-line"

ブロックの開き括弧の後の1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"block-opening-brace-space-after": "always"

//禁止
"block-opening-brace-space-after": "never"

//単数行の時必須
"block-opening-brace-space-after": "always-single-line"

//単数行の時禁止
"block-opening-brace-space-after": "never-single-line"

//複数行の時必須
"block-opening-brace-space-after": "always-multi-line"

//複数行の時禁止
"block-opening-brace-space-after": "never-multi-line"

ブロックの開き括弧の前に1つのスペースが「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"block-opening-brace-space-before": "always"
 
//禁止
"block-opening-brace-space-before": "never"

//単数行の時必須
"block-opening-brace-space-before": "always-single-line"

//単数行の時禁止
"block-opening-brace-space-before": "never-single-line"
 
//複数行の時必須
"block-opening-brace-space-before": "always-multi-line"
 
//複数行の時禁止
"block-opening-brace-space-before": "never-multi-line"
Selector(セレクタ)

属性セレクタ内のブラケットの内側に1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"selector-attribute-brackets-space-inside": "always"

//禁止
"selector-attribute-brackets-space-inside": "never"

属性セレクタ内の演算子の後の1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"selector-attribute-operator-space-after": "always"

//禁止
"selector-attribute-operator-space-after": "never"

属性セレクタ内の演算子の前に1つのスペースを「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"selector-attribute-operator-space-before": "always"

//禁止
"selector-attribute-operator-space-before": "never"

属性値の引用符を「必須」か「禁止」の統一

.stylelintrc
//必須
"selector-attribute-quotes": "always"

//禁止
"selector-attribute-quotes": "never"

セレクタのコンビネーターの後に1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"selector-combinator-space-after": "always"

//禁止
"selector-combinator-space-after": "never"

セレクタのコンビネーターの前に1つのスペースを「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"selector-combinator-space-before": "always"

//禁止
"selector-combinator-space-before": "never"

セレクタの子孫コンビネーターに非スペース文字を禁止(自動修正可能)

.stylelintrc
"selector-descendant-combinator-no-non-space": true

疑似クラスセレクタを「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"selector-pseudo-class-case": "lower"

//大文字
"selector-pseudo-class-case":"upper"

疑似クラスセレクタ内の括弧の内側に1つのスペースを「必須」か「禁止」の統一(Autofixable)

.stylelintrc
//必須
"selector-pseudo-class-parentheses-space-inside": "always"

//禁止
"selector-pseudo-class-parentheses-space-inside": "never"

疑似要素セレクタを「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"selector-pseudo-element-case": "lower"

//大文字
"selector-pseudo-element-case": "upper"

タイプセレクタを「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"selector-type-case": "lower"

//大文字
"selector-type-case": "upper"
Selector list(セレクタ・リスト)

セレクタ・リストのカンマの後の改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"selector-list-comma-newline-after": "always"

//複数行の時必須
"selector-list-comma-newline-after": "always-multi-line"

//複数行の時禁止
"selector-list-comma-newline-after": "never-multi-line"

セレクタ・リストのカンマの前の改行を「必須」か、スペースを「禁止」(自動修正可能)

.stylelintrc
//必須
"selector-list-comma-newline-before": "always"

//複数行の時必須
"selector-list-comma-newline-before": "always-multi-line"

//複数行の時禁止
"selector-list-comma-newline-before": "never-multi-line"

セレクタ・リストのカンマの後に1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"selector-list-comma-space-after": "always"

//禁止
"selector-list-comma-space-after": "never"

//単一行の時必須
"selector-list-comma-space-after": "always-single-line"

//単一行の時禁止
"selector-list-comma-space-after": "never-single-line"

セレクタ・リストのカンマの前に1つのスペースの「必須」か「禁止」の統一(自動修正可能)。

.stylelintrc
//必須
"selector-list-comma-space-before": "always"

//禁止
"selector-list-comma-space-before": "never"

//単一行の時必須
"selector-list-comma-space-before": "always-single-line"

//単一行の時禁止
"selector-list-comma-space-before": "never-single-line"
Rule(ルール)

ルールの前の空行を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"rule-empty-line-before": "always"

//禁止
"rule-empty-line-before": "never"

//複数行のルールの前には空行必須
"rule-empty-line-before": "always-multi-line"

//複数行のルールの前には空行禁止
"rule-empty-line-before": "never-multi-line"
Media feature(メディア・フィーチャー)

メディア・フィーチャーのコロンの後の1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-feature-colon-space-after": "always"

//禁止
"media-feature-colon-space-after": "never"

メディアフィーチャーのコロンの前に1つのスペースが「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-feature-colon-space-before": "always"

//禁止
"media-feature-colon-space-before": "never"

メディアフィーチャー名を「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"media-feature-name-case": "lower"

//大文字
"media-feature-name-case": "upper"

メディアフィーチャー内の括弧の内側に1つのスペースを「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"media-feature-parentheses-space-inside": "always"

//禁止
"media-feature-parentheses-space-inside": "never"

メディア・フィーチャーの範囲演算子の後に1つのスペースの「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"media-feature-range-operator-space-after": "always"

//禁止
"media-feature-range-operator-space-after": "never

メディア・フィーチャーの範囲演算子の前に1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-feature-range-operator-space-before": "always"

//禁止
"media-feature-range-operator-space-before": "never"
Media query list(メディア・クエリ・リスト)

メディアクエリリストのカンマの後の改行を「必須」にするか、スペースの「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-query-list-comma-newline-after": "always"

//複数行のとき必須
"media-query-list-comma-newline-after": "always-multi-line"

//複数行のとき禁止
"media-query-list-comma-newline-after": "never-multi-line"

メディアクエリリストのカンマの前に改行の「必須」か「禁止」の統一

.stylelintrc
//必須
"media-query-list-comma-newline-before": "always"

//複数行のとき必須
"media-query-list-comma-newline-before": "always-multi-line"

//複数行のとき禁止
"media-query-list-comma-newline-before": "never-multi-line"

メディアクエリリストのカンマの後に1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-query-list-comma-space-after": "always"

//禁止
"media-query-list-comma-space-after": "never"

//複数行のとき必須
"media-query-list-comma-space-after": "always-single-line"

//複数行のとき禁止
"media-query-list-comma-space-after": "never-single-line"

メディアクエリリストのカンマの前のスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-query-list-comma-space-before": "always"

//禁止
"media-query-list-comma-space-before": "never"

//複数行のとき必須
"media-query-list-comma-space-before": "always-single-line"

//複数行のとき禁止
"media-query-list-comma-space-before": "never-single-line"
At-rule(@ルール)

@ルールの前の空行の「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"at-rule-empty-line-before": "always"

//禁止
"at-rule-empty-line-before": "never"

@ルール名の「小文字」か「大文字」を統一(自動修正可能)

.stylelintrc
//小文字
"at-rule-name-case": "lower"

//大文字
"at-rule-name-case": "upper"

@ルール名の後の改行を「必須」にする

.stylelintrc
//必須
"at-rule-name-newline-after": "always"

//複数行の時必須
"at-rule-name-newline-after": "always-multi-line"

@ルール名の後に1つのスペースを「必須」にする(自動修正可能)

.stylelintrc
//必須
"at-rule-name-space-after": "always"

//単一行の時必須
"at-rule-name-space-after": "always-single-line"

@ルールのセミコロンの後の改行を「必須」にする(自動修正可能)

.stylelintrc
"at-rule-semicolon-newline-after": "always"

@ルールのセミコロンの前に1つのスペースの「必須」か「禁止」の統一

.stylelintrc
//必須
"at-rule-semicolon-space-before": "always"

//禁止
"at-rule-semicolon-space-before": "never"
Comment(コメント)

コメントの前の空行を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"comment-empty-line-before": "always"

//禁止
"comment-empty-line-before": "never"

//オプション
"ignoreComments": [正規表現, "任意の文字列"]

コメントマーカーの内側の空白を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"comment-whitespace-inside": "always"

//禁止
"comment-whitespace-inside": "never"
General / Sheet(一般/シート)]

インデントの指定(自動修正可能)

.stylelintrc
"indentation": 数値

//オプション
"baseIndentLevel": 数
"baseIndentLevel": "auto"
"indentInsideParens": "twice"
"indentInsideParens": "once-at-root-twice-in-block"
"indentClosingBrace": true
"indentClosingBrace": false
"except": ["block", "param", "value"]
"ignore": ["inside-parens", "param", "value"]

「UNIX」か「Windows」の改行を指定(自動修正可能)

.stylelintrc
//UNIXの場合
"linebreaks": "unix"

//Windowsの場合
"linebreaks": "windows"

連続する空行の数を制限(自動修正可能)

.stylelintrc
"max-empty-lines": 数値 

//オプション
"ignore": ["comments"]

行の長さの制限

.stylelintrc
"max-line-length": 数値

//オプション
"ignore": ["non-comments"]
"ignore": ["comments"]
"ignorePattern": 正規表現

行末の空白を禁止(自動修正可能)

.stylelintrc
"no-eol-whitespace": true

//オプション
"ignore": ["empty-lines"]

ソースの終わりの改行無しを禁止(自動修正可能)

.stylelintrc
"no-missing-end-of-source-newline": true

最初の行を空にするのを禁止(自動修正可能)

.stylelintrc
"no-empty-first-line": true

Unicode BOMを「必須」か「禁止」に統一

.stylelintrc
//必須の場合
"unicode-bom": "always"

//禁止の場合
"unicode-bom": "never"

Plugin

stylelint-declaration-block-no-ignored-properties

displayの値によって無視されてしまうプロパティを検知します。
例:display: inline の要素ではwidthを指定しても無効です。

インストール
terminal
npm i -D stylelint-declaration-block-no-ignored-properties
.stylelintrcの設定変更
.stylelintrc
{
 "plugins": [
   "stylelint-declaration-block-no-ignored-properties"
  ],
  "rules": {
    "plugin/declaration-block-no-ignored-properties": true,
  }
}
stylelint-no-unsupported-browser-features

ブラウザ非対応のプロパティがないかを検知
browserslistで対応ブラウザのバージョンを指定し、サポートされていないプロパティを検知

インストール
terminal
npm i -D stylelint-no-unsupported-browser-features
.stylelintrcの設定変更
.stylelintrc
{
 "plugins": [
   "stylelint-no-unsupported-browser-features"
 ],
 "rules": {
   "plugin/no-unsupported-browser-features": [true, {
     "ignore": ["除外"]
   }]
 }
}

.browserslistrcで対象ブラウザを指定する

Order(プロパティの順番)

Prettierではプロパティの並び順は変更できません。

stylelint-order

自動修正でプロパティをアルファベット順に並べ替えます。

インストール
terminal
npm i -D stylelint-order
.stylelintrcの設定変更
stylelintrc
{
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

stylelint-config-rational-order

関連するプロパティごとに並び替えます。

インストール
terminal
npm i --D stylelint-config-rational-order
.stylelintrcの設定変更
.stylelintrc
{
  "extends": [
    "stylelint-config-rational-order"
  ]
}

stylelint-config-recess-order

機能単位での並び替えを行います。

インストール
terminal
npm i -D stylelint stylelint-config-recess-order
.stylelintrcの設定変更
.stylelintrc
{
  "extends": [
    "stylelint-config-recess-order"
  ]
}

StylelintとPrettierを連携させる

stylelint-prettierを使ってStylelintからPrettierを呼び出します。

インストール

prettierと.prettierrcはすでに用意している前提です。

.prettierrc記事書きました。

terminal
npm i -D stylelint-prettier stylelint-config-prettier
パッケージ 内容
stylelint-prettier StylelintとPrettierと連携させる
stylelint-config-prettier Stylelintのルールで、Prettierと重複するものを無効化(extendsの最後に記述)

.stylelintrcの設定変更

.stylelintrc.js
"extends": [
  "stylelint-prettier/recommended",
  "stylelint-config-prettier"
],

prettierの設定を上書きする場合はrulesに書きます。

.stylelintrc
{
"extends": [
  "stylelint-prettier/recommended",
  "stylelint-config-prettier"
],
"rules":{
  "prettier/prettier": [true, {
    "singleQuote": false
    }],
  }
}

SCSS用のルールを追加する

stylelint-scss

stylelintはSCSSに対応していますが、stylelint-scssプラグインでSCSS用のルールをさらに追加できます。

インストール

terminal
npm i -D stylelint-scss

.stylelintrcの設定変更

.stylelintrc
{
  "plugins": ["stylelint-scss"], 
  "extends": [
    "stylelint-prettier/recommended",
    "stylelint-config-prettier"
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
  }
}

stylelint-scssで使えるルール

Stylelintから除外するファイルの指定

プロジェクトルートに.stylelintignoreを作成します。

.stylelintignore
/src/css/**/*.css
/src/scss/**/*.scss

.stylelintrcのジェネレータ

Stylelint Config Generator

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
19
Help us understand the problem. What are the problem?