stylelint-config-vusion v1.1.2
CSS Code Style
配置
安装 stylelint
npm install --save-dev stylelint stylelint-config-vusion
然后创建.stylelintrc
文件:
{
"extends": "stylelint-config-vusion"
}
编辑器配置
VSCode
使用插件 vscode-stylelint
/* stylelint配置 */
"stylelint.enable": true,
"css.validate": false,
"scss.validate": false,
目录
说明:
- 语气:强制 > 要求 == !禁止 > 尽量 > 推荐 == !不推荐;
- 🔧表示 StyleLint 可以使用自动修复。
空白
要求使用4个空格作为缩进,禁止使用 Tab 🔧
/* ✗ bad */
a {
color:white;
display: none;
}
/* ✓ good */
a {
color: white;
}
禁止空文件
/* ✗ bad */
\t\t
/* ✓ good */
a {}
要求文件末尾有且只有一个空行 🔧
no-missing-end-of-source-newline
禁止连续出现多个空行 🔧
/* ✗ bad */
a {
color: pink;
}
/* ✓ good */
a {
color: pink;
}
禁止出现空行
custom-property-empty-line-before, function-max-empty-lines, value-list-max-empty-lines, declaration-empty-line-before 🔧, TODO:规则没开 rule-empty-line-before, at-rule-empty-line-before🔧
/* ✗ bad */
a {} @media {}
/* ✓ good */
a {}
禁止行尾出现空格
要求分号、逗号、冒号之前没有空格,之后必须有一个空格。@规则分号后另起一行
declaration-block-semicolon-newline-before, declaration-block-semicolon-space-after, declaration-block-semicolon-space-before 🔧, at-rule-semicolon-newline-after🔧, at-rule-semicolon-space-before, selector-list-comma-newline-after, selector-list-comma-newline-before, selector-list-comma-space-after, selector-list-comma-space-before🔧, value-list-comma-newline-after, value-list-comma-newline-before, value-list-comma-space-after, value-list-comma-space-before, function-comma-newline-after, function-comma-newline-before, function-comma-space-after, function-comma-space-before, media-query-list-comma-newline-after, media-query-list-comma-newline-before, declaration-colon-newline-after, media-query-list-comma-space-after, media-query-list-comma-space-before, declaration-colon-newline-after, declaration-colon-space-after, declaration-colon-space-before, media-feature-colon-space-after, media-feature-colon-space-before
/* ✗ bad */
a ,b
,
span {
transform: translate(1
,1)
;top: 0;left: 0;
color :pink
}
@media (max-width :600px) {}
@import url("x.css") ; a {}
/* ✓ good */
a, b, span {
transform: translate(1,1);
top: 0;
left: 0;
color: pink;
}
@media (max-width: 600px) {}
@import url("x.css");
a {}
禁止在小括号(伪类选择器、函数、媒体查询)和中括号(属性选择器)内加空格,要求在大括号(块)内边缘加一个空格,括号之间加一个空格
selector-attribute-brackets-space-inside, selector-pseudo-class-parentheses-space-inside, function-parentheses-space-inside, media-feature-parentheses-space-inside, function-whitespace-after
/* ✗ bad */
input:not( [ type= "submit"] ) {}
[ target ] {}
@media ( max-width:600px) {}
/* ✓ good */
input:not([type="submit"]) {}
[target] {}
@media (max-width: 600px) {}
要求块在独立的行,大括号前不能有空行,必须要有空格
block-closing-brace-empty-line-before, block-closing-brace-newline-after,
block-closing-brace-space-before, block-opening-brace-newline-after, block-opening-brace-newline-before, block-opening-brace-space-after, block-opening-brace-space-before🔧
/* ✗ bad */
a{color: pink;
top: 0;
}b
{color: pink;}
/* ✓ good */
a {
color: pink;
top: 0;
}
b { color: pink; }
不允许出现空块
/* ✓ bad */
a { }
/* ✓ good */
a { color: pink; }
属性操作符周围不加空格,计算函数、媒体查询等其它操作符要加空格
selector-attribute-operator-space-after, selector-attribute-operator-space-before, media-feature-range-operator-space-after, media-feature-range-operator-space-before, function-calc-no-unspaced-operator
/* ✗ bad */
[ target ="_blank"] {}
a { top: calc(1px+2px); }
@media (width >=600px) {}
/* ✓ good */
[target="_blank"] {}
a { top: calc(1px + 2px); }
@media (width >= 600px) {}
要求选择器之间必须有空格,但不能有多余的空格
selector-combinator-space-after🔧, selector-combinator-space-before🔧, selector-descendant-combinator-no-non-space
/* ✗ bad */
a +b { color: pink; }
a>b { color: pink; }
.foo .bar {}
/* ✓ good */
a + b { color: pink; }
a> b { color: pink; }
.foo .bar {}
要求!
前必须加一个空格,后面不加
declaration-bang-space-after, declaration-bang-space-before,
大小写
要求@规则,选择器的标签、伪类、伪元素,属性、关键值、单位、函数名、颜色值、媒体查询均小写
at-rule-name-case🔧, selector-type-case, selector-pseudo-element-case, selector-pseudo-class-case, property-case, value-keyword-case, unit-case, function-name-case, color-hex-case, media-feature-name-case
/* ✗ bad */
@Charset 'UTF-8';
A {
Display: BLOCK;
Width: 1PX;
height: Calc(5% - 10em);
color: #DEF;
}
A:HOVER {}
LI::BEFORE {}
:ROOT {}
@media (MIN-WIDTH: 700px) {}
/* ✓ good */
@charset 'utf-8';
a {
display: block;
width: 1px;
height: calc(5% - 10em);
color: #def;
}
a:hover {}
li::before {}
:root {}
@media (min-width: 700px) and (orientation: landscape) {}
分号
块结尾也使用分号,禁止多余的分号
declaration-block-trailing-semicolon🔧, no-extra-semicolons
/* ✗ bad */
.case { font-size: 16px; color: red }
@import "x.css";;
/* ✓ good */
.case { font-size: 16px; color: red; }
@import "x.css";
引号
统一使用双引号
要求属性选择器中的值必须添加引号
/* ✗ bad */
[title=flower] {}
/* ✓ good */
[target="_blank"] {}
要求url必须添加引号
字体为多个单词时必须使用引号
/* ✗ bad */
a { font-family: Times New Roman, Times, serif; }
/* ✓ good */
a { font-family: 'Times New Roman', Times, serif; }
选择器
要求伪元素使用两个冒号
selector-pseudo-element-colon-notation🔧
/* ✗ bad */
a:before { color: pink; }
/* ✓ good */
a::before { color: pink; }
要求规则之间没有降级特性
/* ✗ bad */
#wrapper a { color: pink; }
a { color: gray; }
/* ✓ good */
a { color: gray; }
#wrapper a { color: pink; }
属性
每行最多定义2个属性
declaration-block-single-line-max-declarations
/* ✗ bad */
a { color: pink; top: 3px; background: url('./test.png'); }
/* ✓ good */
a { color: pink; top: 3px; }
a {
color: pink;
top: 3px;
background: url('./test.png');
}
尽量简写属性
declaration-block-no-redundant-longhand-properties, shorthand-property-no-redundant-values🔧
/* ✗ bad */
a {
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
a { margin: 1px 1px; }
/* ✓ good */
a {
padding: 1px 2px 3px 4px;
}
a {
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
}
a { margin: 1px; }
禁止简写属性覆盖展开写法的属性
declaration-block-no-shorthand-property-overrides
/* ✗ bad */
a {
padding-left: 10px;
padding: 20px;
}
/* ✓ good */
a {
padding: 20px;
padding-left: 10px;
}
值
要求有前导0,禁止有尾随0
number-leading-zero, number-no-trailing-zeros
为0数字不带单位
数字最多保留6位小数
/* ✓ bad */
a { top: 3.2450908px; }
/* ✓ good */
a { top: 3.245px; }
颜色尽可能使用名称,尽可能使用缩写的十六进制
/* ✗ bad */
a { color: #000; }
a { color: #ffffffaa; }
/* ✓ good */
a { color: black; }
a { color: #fffa; }
linear-gradient()
中的方向属性值必须符合标准语法
function-linear-gradient-no-nonstandard-direction
/* ✗ bad */
.foo { background: linear-gradient(top,white,black); }
.foo { background: linear-gradient(45,white,black); }
.foo { background: linear-gradient(to top top,white,black); }
/* ✓ good */
.foo { background: linear-gradient(to top,white,black); }
.foo { background: linear-gradient(45deg,white,black); }
.foo { background: linear-gradient(1.57rad,white,black); }
注释
要求注释必须有内容,且符号和内容之间有一个空格或空行
comment-whitespace-inside comment-no-empty
/* ✗ bad */
/**/
/*
*/
/*comment*/
/* ✓ good */
/* comment */
/*
* Multi-line Comment
**/
禁止双斜线的注释
no-invalid-double-slash-comments
/* ✗ bad */
a {
// color: pink;
}
/* ✓ good */
a {
/* color: pink; */
}
低级错误
禁止出现重复的属性、选择器、@import、字体名
declaration-block-no-duplicate-properties, no-duplicate-selectors, no-duplicate-at-import-rules, font-family-no-duplicate-names
/* ✗ bad */
a {
color: pink;
color: orange;
font-family: 'Times', Times, serif;
}
p {
font-size: 16px;
font-weight: 400;
font-size: 1rem;
}
@import 'a.css';
@import 'a.css';
/* ✓ good */
a {
color: pink;
font-family: Times, serif;
}
p {
font-size: 16px;
font-size: 1rem;
font-weight: 400;
}
@import 'a.css';
禁止出现未知的@规则,选择器标签、伪类、伪元素,属性、单位、颜色值,媒体查询,动画
at-rule-no-unknown, selector-pseudo-class-no-unknown, selector-pseudo-element-no-unknown, selector-type-no-unknown, property-no-unknown, unit-no-unknown, color-no-invalid-hex, media-feature-name-no-unknown, no-unknown-animations
/* ✗ bad */
@unknow {}
@media screen and (unknown) {}
a:unknown {
colr: blue;
background: #y3;
width: 10pixels;
}
a::element {}
tag {}
a {
width: 10pixels;
}
a {
color: #00;
}
a { animation-name: fancy-slide; }
/* ✓ good */
@charset "utf-8";
@media (min-width: 700px) {}
a:hover {
color: blue;
background: white;
width: 10px;
}
a::before {}
input {}
a {
width: 10px;
}
a {
color: #00;
}
a { animation-name: fancy-slide; }
@keyframes fancy-slide {}
禁止字符串换行
/* ✗ bad */
a {
content: "first
second";
}
/* ✓ good */
a {
content: "first\\nsecond";
}
要求字体结尾必须添加通用词
font-family-no-missing-generic-family-keyword
/* ✗ bad */
a {
font-family: Helvetica, Arial, Verdana, Tahoma;
}
/* ✓ good */
a {
font-family: Helvetica, Arial, Verdana, Tahoma, serif;
}
keyframe 中禁止添加 important
keyframe-declaration-no-important
/* ✗ bad */
@keyframes important1 {
from {
margin-top: 50px;
}
to {
margin-top: 100px !important;
}
}
/* ✓ good */
@keyframes important1 {
from {
margin-top: 50px;
}
to {
margin-top: 100px;
}
}