[前端项目规范]通晓stylelint的使用

村上小树
3,810 阅读5分钟

前言

关于stylelint，就是个规范css的插件。点进来的人应该都只是想看怎么使用，简介就不写详细了。

1.配置使用

（1）先通过npm安装好stylelint及其用到的插件

npm i stylelint stylelint-config-standard stylelint-order stylelint-config-rational-order stylelint-scss -D

这里用到的插件有：

  1. stylelint

  2. stylelint-config-standard：stylelint官方共享的标准规则集成。里面包括了 Google's CSS Style Guide、Airbnb's Styleguide、The Idiomatic CSS Principles以及@mdo's Code Guide。想看里面定义的源码可点击此。

  3. stylelint-order：用于规范样式属性写作顺序的插件。

  4. stylelint-config-rational-order：本人目前正在使用的css属性顺序的规则。配合stylelint-order使用。

  5. stylelint-scss：用于支持校验scss语法的插件，例如@extend等。

关于上述插件更详细补充会在下文叙述。

（2）在根目录中创建stylelint配置文件

配置文件可以是.stylelintrc.json、stylelint.config.js的其中一种。或者可以写在package.json的stylelint变量中。这里就直接以.stylelintrc.json为例，配置文件如下所示：

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-rational-order"
  ],
  "rules": {
    "indentation": 2,
    "no-missing-end-of-source-newline": null,
    "max-nesting-depth": 3,
    "selector-max-compound-selectors": 3,
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  },
  "plugins": [
    "stylelint-scss"
  ]
}

关于上述的extend，rules和plugins的更详细补充会在下文叙述。

（3）在vscode中安装stylelint

在vscode中下载如下图插件，且启用：

在vscode中打开setting.json（文件->首选项->设置）添加以下内容：

// eslint
"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
},
// stylelint配置
"stylelint.enable": true,
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"[scss]": {
    "editor.formatOnSave": false
}

上述内容的配置，可使文件按下ctrl+s时，自动修复部分在违反在.stylelintrc.json中定义的规则的css或scss等样式写法，例如缩进，和属性写作顺序。自动修复效果如下：

（3）.stylelintignore

如果想让部分文件免于被检测，可在根目录新建.stylelintignore文件。例如：

**/*.js
vendor/**/*.css

或者直接用注释/* stylelint-disable */让stylelint免于对该文件的检测，更多可看：

Ignoring code

2.stylelintrc.json的分析

（1）extends

extends主要用于收纳各种规则集合，例如stylelint-config-standard。

"extends": [  "stylelint-config-standard",  "stylelint-config-rational-order"]

这个跟eslint的配置文件.eslint.js中的extends属性用途一样。

**题外话：**部分文章会向把stylelint-config-recommended放到extends里面，如下面的写法：

"extends": [  
  "stylelint-config-recommended" //该插件没必要
  "stylelint-config-standard",  
  "stylelint-config-rational-order"
]

因为最新（20.0.0）的stylelint-config-standard已经把stylelint-config-recommended包含进去了，可看下面的stylelint-config-standard/index.js源码截图：

extends中的优先级是从右到左，跟eslint的一样。

（2）stylelint-config-rational-order

一个用于规范css属性写作顺序的规则集成。配合stylelint-order插件使用。其提倡的写作顺序如下：

.declaration-order {
  /* 1.Positioning 位置属性 */ 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;

  /* 2.Box Model 盒子属性 */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* 3.Typography 文字属性 */
  color: #888;
  font: normal 16px Helvetica, sans-serif;
  line-height: 1.3;
  text-align: center;

  /* 4.Visual 视觉属性 */
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 4px;
  opacity: 1;

  /* 5.Animation Misc 其他 */
  transition: all 1s;
  user-select: none;
}

良好的css写作顺序不仅可以提高可读性，而且还可以加快浏览器的构建渲染树的速度。

众所周知，浏览器的渲染流程为：

  1. 解析html文件构建dom树，解析css文件构建cssom
  2. 结合dom树和cssom生成渲染树
  3. 根据渲染树进行layout（布局）和paint（渲染）

在步骤3，生成渲染树的过程中，浏览器会从根节点（html节点）开始遍历每个树节点的css样式进行解析。在解析过程中，如果某个元素的定位变化影响了布局。则要倒回去重新渲染。

例如：

.box{
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: absolute; 
    /*当浏览器解析到position为absolute时，发现需要脱离文档流而不是在文档流中渲染时，
      会倒回去重新渲染*/
}

（3）rules

rules就是用来定义css的规则，因为优先级比extends高，所以可以用来覆盖extends中包含在集合里的规则。

"rules": {
    "indentation": 2,
    "no-missing-end-of-source-newline": null,
    "max-nesting-depth": 3,
    "selector-max-compound-selectors": 3,
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
}

下面说一下上面自己定义的部分rules

1.indentation

用来定义缩进的单位。

2.no-missing-end-of-source-newline

为true的时候，每一段css或者scss在最后必须要以新的空行为结尾。因为没必要，而且项目之前很多样式没用这种写法，所以我直接设为null关闭掉了。

3.max-nesting-depth和selector-max-compound-selectors

都是用来限制深度，不过一个是限制scss中&字符嵌套深度，一个是限制选择器深度。具体可点击下面链接看stylelint文档：

max-nesting-depth

selector-max-compound-selectors

由于css选择器的匹配规则是从右到左开始的。因此，过深的css选择器也会导致渲染树构建的时间长。且可读性也差，所以自己设置了深度阈值。

4.at-rule-no-unknown和scss/at-rule-no-unknown

at-rule-no-unknown为true时，由于自己大量的样式都是用sass语言编写，里面用到的部分语法例如@extend会报错，因为不是css中的语法。所以我把at-rule-no-unknown设置为null。

而scss/at-rule-no-unknown是stylelint-scss插件里面的规则，如果@extend错写成@exend，则stylelint会因为此规则而报错。

avatar
文章
阅读
粉丝