stylelint初体验

当初在用sublime的时候用过csslint来检查css语法。
现在用vscode替代sublime,而vscode插件市场上那款csslint插件目前不支持配置文件,有些不爽,于是研究了下其它相关插件。就在这个期间发现stylelint,粗粗看了看,甚合我意。主要有如下几点:

  1. 支持配置文件

  2. 对less的支持程度比csslint好(粗粗看下来是比较好的)

  3. 可作为eslint插件使用

  4. 使用和eslint很像,定制化更高

资源

看了看github上的文档,很快就安装好。

配置项说明

《stylelint初体验》
提示:请使用花括号来包围声明。

规则

at-rule- 支持自定义黑白名单

代码块

block-opening-brace-block-closing-brace- 大括号格式。
block-no- 两个不允许

  • 代码块内声明不能为空

  • 代码块内代码不能写在一行

颜色值

color- 颜色值,主要检查十六进制

注释

comment- 支持黑名单(感觉不太会用,还需要慢慢熟悉)

声明

declaration-bang-space- 一条完整的声明前后的空白格式
declaration-block-no- 三个不允许

  • 不允许在一个代码块中重复申明

  • 不允许出现忽略的属性

  • 不允许缩写属性,比如#333

declaration-block-properties-order 属性出现的顺序(视使用者的个人情况来决定要不要启用)
declaration-block-semicolon-newline- 声明后分号格式
declaration-block-single-line-max-declarations 一行中出现的申明最大条数
declaration-block-trailing-semicolon 每个代码块内最后一条申明必须带上分号
declaration-colon- 声明中冒号的格式
declaration-empty-line-before 每条申明前 必须 | 禁止 有空白行(不能有空格或tab等)
declaration-no-important 禁用!important
declaration-property-unit- 属性单位黑白名单
declaration-property-value-属性值黑白名单

字体

font-family-name-quotes 字体系列中命名时带引号
font-weight-notation 字重的值使用命名还是数值

函数

function- 没怎么用过css的函数,有待研究

通用配置

indentation 代码缩进
keyframe-declaration-no-important keyframe申明中禁用!important
length-zero-no-unit 值为0时不使用单位
max-empty-lines 最大连续空行数
max-line-length 一行字符最大长度
max-nesting-depth 嵌套深度

待续

    原文作者:siwuxie
    原文地址: https://segmentfault.com/a/1190000006237659
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞