At-rule
-
@debugを使わない
at-rule-blacklist - 不明なat-ruleを許可（scssで使う）
at-rule-no-unknown - ベンダープレフィックスを使わない
at-rule-no-vendor-prefix
Block
- 空のブロックを許可しない
block-no-empty - 開始中括弧の前に空白が必要
block-opening-brace-space-before
Color
- 16進数の色は小文字で
color-hex-case - 16進数の色を短縮
color-hex-length - 色の名前は使わない
color-named - 不正な16進数の色を許可しない
color-no-invalid-hex
Declaration
- !importantの後ろの空白を許可しない
declaration-bang-space-after - !importantの前に1つの空白が必要
declaration-bang-space-before - コロンの後ろに空白が必要
declaration-colon-space-after - コロンの前の空白は許可しない
declaration-colon-space-before
Declaration block
- セミコロンの後ろは改行
declaration-block-semicolon-newline-after - セミコロンの前の空白は許可しない
declaration-block-semicolon-space-before - 1行に1宣言
declaration-block-single-line-max-declarations - 末尾のセミコロンを省略しない
declaration-block-trailing-semicolon
Declaration Property
- borderにnoneを許可しない。0を使う
declaration-property-value-blacklist
Function
- コンマの後ろにスペースを入れる
function-comma-space-after - 括弧の前後内側スペースを許可しない
function-parentheses-space-inside - URLは引用符で囲む
function-url-quotes
General
- インデントは空白2つ
indentation - 0に単位は付けない
length-zero-no-unit -
@each, @media, @supports, @include以外のネストは1階層まで
max-nesting-depth - ファイルの最後に改行
no-missing-end-of-source-newline
Media Feature
-
@mediaにベンダープレフィックスを許可しない
media-feature-name-no-vendor-prefix -
@mediaの括弧前後内側の空白は許可しない
media-feature-parentheses-space-inside
Number
- 1未満の小数の0を省略しない
number-leading-zero - 小数点以下の末尾0を許可しない
number-no-trailing-zeros
Property
- 不明のプロパティを使用しない
property-no-unknown - プロパティにベンダープレフィックスを許可しない
property-no-vendor-prefix - ショートハンドでまとめられる時は警告
shorthand-property-no-redundant-values
Rule
- ルールの前に空行が必要
rule-empty-line-before
SCSS
- 不明なat-ruleを使用しない
scss/at-rule-no-unknown -
@extendは%を使う
scss/at-extend-no-missing-placeholder - SCSS関数は小文字で
scss/at-function-pattern -
@importするファイル名先頭の_を許可しない
scss/at-import-no-partial-leading-underscore - .scssを@importする時拡張子を書かない
scss/at-import-partial-extension-blacklist -
@mixinは小文字で
scss/at-mixin-pattern - 変数のコロンの後ろに空白
scss/dollar-variable-colon-space-after - 変数のコロンの前の空白を許可しない
scss/dollar-variable-colon-space-before - 変数は小文字で
scss/dollar-variable-pattern - SCSSプレースホルダーは小文字で
scss/percent-placeholder-pattern - ネストする時無駄な&は許可しない
scss/selector-no-redundant-nesting-selector
Selector
- セレクタは小文字で
selector-class-pattern - セレクタ指定のコンマの後は改行
selector-list-comma-newline-after - ネストしないで書けるセレクタの数は3つまで
selector-max-compound-selectors - セレクタにidを許可しない
selector-max-id - class, id, 属性に要素名を付けない？
selector-no-qualifying-type - セレクタにベンダープレフィックスを許可しない
selector-no-vendor-prefix - 擬似要素は二重コロン
selector-pseudo-element-colon-notation - 未知の擬似要素セレクタを許可しない
selector-pseudo-element-no-unknown
String
- 文字列は一重引用符で
string-quotes
Value
- 値にベンダープレフィックスを許可しない
value-no-vendor-prefix
order
- いい感じに並んでいるか
order/order - プロパティがabc順に並んでいるか
order/properties-alphabetical-order
ソース
{
"plugins": ["stylelint-order", "stylelint-scss"],
"rules": {
"at-rule-blacklist": ["debug"],
"at-rule-no-unknown": null,
"at-rule-no-vendor-prefix": true,
"block-no-empty": true,
"block-opening-brace-space-before": "always",
"color-hex-case": "lower",
"color-hex-length": "short",
"color-named": "never",
"color-no-invalid-hex": true,
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-block-semicolon-newline-after": "always",
"declaration-block-semicolon-space-before": "never",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-trailing-semicolon": "always",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"declaration-property-value-blacklist": {
"border": ["none"],
"border-top": ["none"],
"border-right": ["none"],
"border-bottom": ["none"],
"border-left": ["none"]
},
"function-comma-space-after": "always-single-line",
"function-parentheses-space-inside": "never",
"function-url-quotes": "always",
"indentation": 2,
"length-zero-no-unit": true,
"max-nesting-depth": [
1,
{
"ignoreAtRules": [
"each",
"media",
"supports",
"include"
]
}
],
"media-feature-name-no-vendor-prefix": true,
"media-feature-parentheses-space-inside": "never",
"no-missing-end-of-source-newline": true,
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"order/order": [
[
"custom-properties",
"dollar-variables",
{
"type": "at-rule",
"name": "extend"
},
{
"type": "at-rule",
"name": "include",
"hasBlock": false
},
"declarations",
{
"type": "at-rule",
"name": "include",
"hasBlock": true
},
"rules"
]
],
"order/properties-alphabetical-order": true,
"property-no-unknown": true,
"property-no-vendor-prefix": true,
"rule-empty-line-before": [
"always-multi-line",
{
"except": ["first-nested"],
"ignore": ["after-comment"]
}
],
"scss/at-extend-no-missing-placeholder": true,
"scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/at-import-no-partial-leading-underscore": true,
"scss/at-import-partial-extension-blacklist": ["scss"],
"scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/at-rule-no-unknown": true,
"scss/dollar-variable-colon-space-after": "always",
"scss/dollar-variable-colon-space-before": "never",
"scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
"scss/selector-no-redundant-nesting-selector": true,
"selector-class-pattern": [
"^[a-z0-9\\-]+$",
{
"message":
"Selector should be written in lowercase with hyphens (selector-class-pattern)"
}
],
"selector-list-comma-newline-after": "always",
"selector-max-compound-selectors": 3,
"selector-max-id": 0,
"selector-no-qualifying-type": true,
"selector-no-vendor-prefix": true,
"selector-pseudo-element-colon-notation": "double",
"selector-pseudo-element-no-unknown": true,
"shorthand-property-no-redundant-values": true,
"string-quotes": "single",
"value-no-vendor-prefix": true
}
}