使用stylelint格式css代码

前言

说到代码格式化前端同学们一般都知道使用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": {},