stylelint-config-plus

• stylelint-config-recommended
• stylelint-config-standard
• @stylistic/stylelint-plugin
• stylelint-order with stylelint-semantic-groups
• stylelint-config-html (*.html, *.vue and so on)

Install

npm i stylelint-config-plus -D

Usage

// stylelint.config.js
export default {
    extends: ["stylelint-config-plus"]
};

Rules

Base on stylelint@16.5.0 (2024/5/7)

	Rules	Count
	All rules	193
✔️	Defined in plus	137	71.0%
❌	Undefined	56	29.0%
✅	Recommended + Standard	70	36.3%
🔧	Fixable	97	50.3%
🎨	Stylistic	64	33.2%

Details

	Rules	Type	Enabled	Value
1	alpha-value-notation	✅🔧	✔️	Details ["percentage",{"exceptProperties":["opacity","fill-opacity","flood-opacity","stop-opacity","stroke-opacity"]}]
2	annotation-no-unknown	✅	✔️	true
3	at-rule-allowed-list		❌
4	at-rule-disallowed-list		❌
5	at-rule-empty-line-before	✅🔧	✔️	Details ["always",{"except":["blockless-after-same-name-blockless","first-nested"],"ignore":["after-comment"]}]
6	at-rule-no-unknown	✅	✔️	true
7	at-rule-no-vendor-prefix	✅🔧	✔️	true
8	at-rule-property-required-list		❌
9	block-no-empty	✅	✔️	true
10	color-function-notation	✅🔧	✔️	"modern"
11	color-hex-alpha		❌
12	color-hex-length	✅🔧	✔️	"short"
13	color-named		❌
14	color-no-hex		❌
15	color-no-invalid-hex	✅	✔️	true
16	comment-empty-line-before	✅🔧	✔️	Details ["always",{"except":["first-nested"],"ignore":["stylelint-commands"]}]
17	comment-no-empty	✅	✔️	true
18	comment-pattern		❌
19	comment-whitespace-inside	✅🔧	✔️	"always"
20	comment-word-disallowed-list		❌
21	custom-media-pattern	✅	✔️	Details ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(name) => \"Expected custom media query name \"${name}\" to be kebab-case\""}]
22	custom-property-empty-line-before	✅🔧	✔️	Details ["always",{"except":["after-custom-property","first-nested"],"ignore":["after-comment","inside-single-line-block"]}]
23	custom-property-no-missing-var-function	✅	✔️	true
24	custom-property-pattern	✅	✔️	Details ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(name) => \"Expected custom property name \"${name}\" to be kebab-case\""}]
25	declaration-block-no-duplicate-custom-properties	✅	✔️	true
26	declaration-block-no-duplicate-properties	✅🔧	✔️	Details [true,{"ignore":["consecutive-duplicates-with-different-syntaxes"]}]
27	declaration-block-no-redundant-longhand-properties	✅🔧	✔️	true
28	declaration-block-no-shorthand-property-overrides	✅	✔️	true
29	declaration-block-single-line-max-declarations	✅	✔️	1
30	declaration-empty-line-before	✅🔧	✔️	Details ["always",{"except":["after-declaration","first-nested"],"ignore":["after-comment","inside-single-line-block"]}]
31	declaration-no-important		❌
32	declaration-property-max-values		❌
33	declaration-property-unit-allowed-list		❌
34	declaration-property-unit-disallowed-list		❌
35	declaration-property-value-allowed-list		❌
36	declaration-property-value-disallowed-list		❌
37	declaration-property-value-no-unknown		❌
38	font-family-name-quotes	✅🔧	✔️	"always-where-recommended"
39	font-family-no-duplicate-names	✅	✔️	true
40	font-family-no-missing-generic-family-keyword	✅	✔️	true
41	font-weight-notation	🔧	✔️	undefined
42	function-allowed-list		❌
43	function-calc-no-unspaced-operator	✅🔧	✔️	true
44	function-disallowed-list		❌
45	function-linear-gradient-no-nonstandard-direction	✅	✔️	true
46	function-name-case	✅🔧	✔️	"lower"
47	function-no-unknown	✅	✔️	true
48	function-url-no-scheme-relative		❌
49	function-url-quotes	✅🔧	✔️	"always"
50	function-url-scheme-allowed-list		❌
51	function-url-scheme-disallowed-list		❌
52	hue-degree-notation	✅🔧	✔️	"angle"
53	import-notation	✅🔧	✔️	"url"
54	keyframe-block-no-duplicate-selectors	✅	✔️	true
55	keyframe-declaration-no-important	✅	✔️	true
56	keyframe-selector-notation	✅🔧	✔️	Details "percentage-unless-within-keyword-only-block"
57	keyframes-name-pattern	✅	✔️	Details ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(name) => \"Expected keyframe name \"${name}\" to be kebab-case\""}]
58	length-zero-no-unit	✅🔧	✔️	Details [true,{"ignore":["custom-properties"]}]
59	lightness-notation	✅🔧	✔️	"percentage"
60	max-nesting-depth		❌
61	media-feature-name-allowed-list		❌
62	media-feature-name-disallowed-list		❌
63	media-feature-name-no-unknown	✅	✔️	true
64	media-feature-name-no-vendor-prefix	✅🔧	✔️	true
65	media-feature-name-unit-allowed-list		❌
66	media-feature-name-value-allowed-list		❌
67	media-feature-name-value-no-unknown		❌
68	media-feature-range-notation	✅🔧	✔️	"context"
69	media-query-no-invalid	✅	✔️	true
70	named-grid-areas-no-invalid	✅	✔️	true
71	no-descending-specificity	✅	✔️	true
72	no-duplicate-at-import-rules	✅	✔️	true
73	no-duplicate-selectors	✅	✔️	true
74	no-empty-source	✅	✔️	true
75	no-invalid-double-slash-comments	✅	✔️	true
76	no-invalid-position-at-import-rule	✅	✔️	true
77	no-irregular-whitespace	✅	✔️	true
78	no-unknown-animations		❌
79	no-unknown-custom-media		❌
80	no-unknown-custom-properties		❌
81	number-max-precision	✅	✔️	4
82	property-allowed-list		❌
83	property-disallowed-list		❌
84	property-no-unknown	✅	✔️	true
85	property-no-vendor-prefix	✅🔧	✔️	true
86	rule-empty-line-before	✅🔧	✔️	Details ["always-multi-line",{"except":["first-nested"],"ignore":["after-comment"]}]
87	rule-selector-property-disallowed-list		❌
88	selector-anb-no-unmatchable	✅	✔️	true
89	selector-attribute-name-disallowed-list		❌
90	selector-attribute-operator-allowed-list		❌
91	selector-attribute-operator-disallowed-list		❌
92	selector-attribute-quotes	✅🔧	✔️	"always"
93	selector-class-pattern	✅	✔️	Details ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(selector) => \"Expected class selector \"${selector}\" to be kebab-case\""}]
94	selector-combinator-allowed-list		❌
95	selector-combinator-disallowed-list		❌
96	selector-disallowed-list		❌
97	selector-id-pattern	✅	✔️	Details ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message":"(selector) => \"Expected id selector \"${selector}\" to be kebab-case\""}]
98	selector-max-attribute		❌
99	selector-max-class		❌
100	selector-max-combinators		❌
101	selector-max-compound-selectors		❌
102	selector-max-id		❌
103	selector-max-pseudo-class		❌
104	selector-max-specificity		❌
105	selector-max-type		❌
106	selector-max-universal		❌
107	selector-nested-pattern		❌
108	selector-no-qualifying-type		❌
109	selector-no-vendor-prefix	✅🔧	✔️	true
110	selector-not-notation	✅🔧	✔️	"complex"
111	selector-pseudo-class-allowed-list		❌
112	selector-pseudo-class-disallowed-list		❌
113	selector-pseudo-class-no-unknown	✅	✔️	true
114	selector-pseudo-element-allowed-list		❌
115	selector-pseudo-element-colon-notation	✅🔧	✔️	"double"
116	selector-pseudo-element-disallowed-list		❌
117	selector-pseudo-element-no-unknown	✅	✔️	true
118	selector-type-case	✅🔧	✔️	"lower"
119	selector-type-no-unknown	✅	✔️	Details [true,{"ignore":["custom-elements"]}]
120	shorthand-property-no-redundant-values	✅🔧	✔️	true
121	string-no-newline	✅	✔️	true
122	time-min-milliseconds		❌
123	unit-allowed-list		❌
124	unit-disallowed-list		❌
125	unit-no-unknown	✅	✔️	true
126	value-keyword-case	✅🔧	✔️	"lower"
127	value-no-vendor-prefix	✅🔧	✔️	Details [true,{"ignoreValues":["box","inline-box"]}]
128	@stylistic/at-rule-name-case	🔧🎨	✔️	"lower"
129	@stylistic/at-rule-name-space-after	🔧🎨	✔️	"always-single-line"
130	@stylistic/at-rule-semicolon-newline-after	🔧🎨	✔️	"always"
131	@stylistic/block-closing-brace-empty-line-before	🔧🎨	✔️	"never"
132	@stylistic/block-closing-brace-newline-after	🔧🎨	✔️	"always"
133	@stylistic/block-closing-brace-newline-before	🔧🎨	✔️	"always-multi-line"
134	@stylistic/block-closing-brace-space-before	🔧🎨	✔️	"always-single-line"
135	@stylistic/block-opening-brace-newline-after	🔧🎨	✔️	"always-multi-line"
136	@stylistic/block-opening-brace-space-after	🔧🎨	✔️	"always-single-line"
137	@stylistic/block-opening-brace-space-before	🔧🎨	✔️	"always"
138	@stylistic/color-hex-case	🔧🎨	✔️	"lower"
139	@stylistic/declaration-bang-space-after	🔧🎨	✔️	"never"
140	@stylistic/declaration-bang-space-before	🔧🎨	✔️	"always"
141	@stylistic/declaration-block-semicolon-newline-after	🔧🎨	✔️	"always-multi-line"
142	@stylistic/declaration-block-semicolon-space-after	🔧🎨	✔️	"always-single-line"
143	@stylistic/declaration-block-semicolon-space-before	🔧🎨	✔️	"never"
144	@stylistic/declaration-block-trailing-semicolon	🔧🎨	✔️	"always"
145	@stylistic/declaration-colon-newline-after	🔧🎨	✔️	"always-multi-line"
146	@stylistic/declaration-colon-space-after	🔧🎨	✔️	"always-single-line"
147	@stylistic/declaration-colon-space-before	🔧🎨	✔️	"never"
148	@stylistic/function-comma-newline-after	🔧🎨	✔️	"always-multi-line"
149	@stylistic/function-comma-space-after	🔧🎨	✔️	"always-single-line"
150	@stylistic/function-comma-space-before	🔧🎨	✔️	"never"
151	@stylistic/function-max-empty-lines	🔧🎨	✔️	0
152	@stylistic/function-parentheses-newline-inside	🔧🎨	✔️	"always-multi-line"
153	@stylistic/function-parentheses-space-inside	🔧🎨	✔️	"never-single-line"
154	@stylistic/function-whitespace-after	🔧🎨	✔️	"always"
155	@stylistic/indentation	🔧🎨	✔️	2
156	@stylistic/max-empty-lines	🔧🎨	✔️	1
157	@stylistic/max-line-length	🎨	✔️	120
158	@stylistic/media-feature-colon-space-after	🔧🎨	✔️	"always"
159	@stylistic/media-feature-colon-space-before	🔧🎨	✔️	"never"
160	@stylistic/media-feature-name-case	🔧🎨	✔️	"lower"
161	@stylistic/media-feature-parentheses-space-inside	🔧🎨	✔️	"never"
162	@stylistic/media-feature-range-operator-space-after	🔧🎨	✔️	"always"
163	@stylistic/media-feature-range-operator-space-before	🔧🎨	✔️	"always"
164	@stylistic/media-query-list-comma-newline-after	🔧🎨	✔️	"always-multi-line"
165	@stylistic/media-query-list-comma-space-after	🔧🎨	✔️	"always-single-line"
166	@stylistic/media-query-list-comma-space-before	🔧🎨	✔️	"never"
167	@stylistic/no-empty-first-line	🎨	✔️	true
168	@stylistic/no-eol-whitespace	🔧🎨	✔️	true
169	@stylistic/no-extra-semicolons	🔧🎨	✔️	true
170	@stylistic/no-missing-end-of-source-newline	🔧🎨	✔️	true
171	@stylistic/number-leading-zero	🔧🎨	✔️	"always"
172	@stylistic/number-no-trailing-zeros	🔧🎨	✔️	true
173	@stylistic/property-case	🔧🎨	✔️	"lower"
174	@stylistic/selector-attribute-brackets-space-inside	🔧🎨	✔️	"never"
175	@stylistic/selector-attribute-operator-space-after	🔧🎨	✔️	"never"
176	@stylistic/selector-attribute-operator-space-before	🔧🎨	✔️	"never"
177	@stylistic/selector-combinator-space-after	🔧🎨	✔️	"always"
178	@stylistic/selector-combinator-space-before	🔧🎨	✔️	"always"
179	@stylistic/selector-descendant-combinator-no-non-space	🔧🎨	✔️	true
180	@stylistic/selector-list-comma-newline-after	🔧🎨	✔️	"always"
181	@stylistic/selector-list-comma-space-before	🔧🎨	✔️	"never"
182	@stylistic/selector-max-empty-lines	🔧🎨	✔️	0
183	@stylistic/selector-pseudo-class-case	🔧🎨	✔️	"lower"
184	@stylistic/selector-pseudo-class-parentheses-space-inside	🔧🎨	✔️	"never"
185	@stylistic/selector-pseudo-element-case	🔧🎨	✔️	"lower"
186	@stylistic/string-quotes	🔧🎨	✔️	"double"
187	@stylistic/unit-case	🔧🎨	✔️	"lower"
188	@stylistic/value-list-comma-newline-after	🔧🎨	✔️	"always-multi-line"
189	@stylistic/value-list-comma-space-after	🔧🎨	✔️	"always-single-line"
190	@stylistic/value-list-comma-space-before	🔧🎨	✔️	"never"
191	@stylistic/value-list-max-empty-lines	🔧🎨	✔️	0
192	order/order	🔧	✔️	see order
193	order/properties-order	🔧	✔️	see properties-order

Changelog

CHANGELOG.md