前言
说到代码格式化前端同学们一般都知道使用eslint和prettier格式化js代码,但css大部分同学平时工作中不太重视导致团队css代码较乱。一套好的css代码不仅可以提高代码可维护性还能提高页面的渲染性能。下面介绍下stylelint校验并自动格式化css代码。
功能
stylelint主要包含以下功能
- 支持最新css语法-包含自定义属性和一些Level 4的css属性
- 支持css预处理-包含scss、sass、less、sugarss
- 包含170中内置规则-包含错误检测和代码风格校验
- 插件机制-可以自定义自己的规则
- 自动修复
使用
安装
npm install --save-dev stylelint stylelint-config-standard
配置
项目跟目录下新建.stylelintrc.json文件,配置如下
{
"extends": "stylelint-config-standard",
"rules": {
"color-hex-case": "lower",
"color-hex-length": "short",
}
}
}
属性顺序
以上就能检测基本的css格式化问题。除了格式化方面的检测css属性顺序编写也很重要,正确的样式顺序利于维护者查看同时还对渲染性能有一定提升。一般建议css顺序如下:
(1)定位属性:position display float left top right bottom overflow clear z-index
(2)自身属性:width height padding border margin background
(3)文字样式:font-family font-size font-style font-weight font-varient color
(4)文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
(5)css3中新增属性:content box-shadow border-radius transform
css顺序校验需要添加stylelint-order插件同时使用stylelint-config-recess-order预设。通过以下配置我们就不需要记这么多css属性书写顺序了。
{
"extends": [
"stylelint-config-standard",
"stylelint-config-recess-order"
],
"plugins": [
"stylelint-scss",
"stylelint-order"
],
"ignoreFiles": [
"**/*.js",
"**/*.ts"
],
"rules": {
"color-hex-case": "lower",
"color-hex-length": "short",
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true
}
}
自动格式化
上面介绍了stylelint发现有问题的代码,但是如果是老项目引入stylelint手动修改的话要是比较耗费时间的,此时自动格式化就尤为重要了。自动格式化一般需要配合编辑器使用。以vscode为例。安装vscode插件stylelint-plus,然后再扩展设置-settings.json中配置以下两项就可以自动化修改了。
"stylelint.autoFixOnSave": true,
"stylelint.configOverrides": {},