本文最后更新于：19 小时前

Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。本文记录Stylelint的入门使用

StyleLint入门

有之前学习ESlint的经验，再来学习StyleLint的使用就显得容易很多，因为很多概念是相同的，甚至连很多配置属性名字都是相同的

一、最简单的用法

按照官方提示，只需要输入npm init stylelint一步命令即可，它会调用官方的init tool去初始化，但是这需要首先使用npm init在项目中创建出一个package.json文件。

这里我不想使用npm init，因为它还需要输入其它一些信息，可以采用下面的方式

第一步，安装依赖模块和官方的standard配置文件

1 2	`npm install --save-dev stylelint style-config-standard # 这里同时安装了 standard`

第二步，创建.stylelint.json配置文件，然后输入

1
2
3

{
  "extends": "stylelint-config-standard"
}

第三步，在命令行中输入以下命令，即可检查所有css文件

1 2	`# 需要在项目目录中输入命令，根目录或者根目录下的子目录都可以 npx stylelint "*/.css"`

如果想要再检查的同时，根据配置规则对代码进行修复，加上--fix参数即可（并不是所有规则都能修改，不能自动修改的部分，会输出到命令行）

1	`npx stylelint .\common.css --fix`

第四步，安装VSCode插件Stylelint，这样在编辑过程中即可实时看到检查结果，方便及时修改。

二、进一步的用法

1. 约束css规则的顺序

这里使用的是：stylelint-config-recess-order - npm (npmjs.com)

A Stylelint config that sorts CSS properties the way Recess did and Bootstrap did/does.

根据介绍，它使用的是Bootstrap团队使用的css规则顺序规范。（值得一提，规范css规则的顺序，可以大大提高css代码的可读性，因为读者可以知道所寻到规则大概处于哪个部分）

第一步，安装stylelint-config-recess-order

1	`npm install -D stylelint-config-recess-order`

第二步，在.stylelintrc.json声明扩展配置文件

{
    "extends": [
        "stylelint-config-recess-order",
        ...
    ],
    "rules": {}
}

在rules可以对扩展配置文件中的rule进行修改，rules中rule的优先级比extends配置文件中的高

2. 与Prettier结合使用

项目中如果同时存在 Stylelint 和 Prettier ，可能会存在rule冲突。为了解决这个问题，需要在Stylelint中安装一个扩展

1	`npm install -D stylelint-config-prettier`

但是，在安装过程中，报错了，错误原因部分截图如下：

大意是：Stylelint的版本超前了，styelint-config-prettier的版本更新没有跟上，导致版本冲突了，这里的解决思路是：降低Stylelint的版本。首先查看一下可用版本

1	`npm view stylelint versions --json`

不需要卸载，直接重装覆盖

1	`npm install -D stylelint@14.16.1`

但是，这又引发了新的问题，原本和stylelint@15.0.8搭配的stylelint-config-recess-order@4.2.0发生版本冲突了，所以需要把它也重装一遍

1	`npm install -D stylelint-config-recess-order`

运行以上命令后，你会发现，还是报错，原因也是版本冲突：stylelint-config-recess-order和stylelint版本冲突了，这里的原因是因为（敲重点了！）：npm install 默认只会安装package最新的版本，所以如果需要安装之前的版本，需要我们手动指定。

下一个问题来了：我也不知道哪个版本的stylelint-config-recess-order能够兼容stylelint@14.6.1呀？解决办法：到 stylelint-config-recess-order - npm (npmjs.com) 里面查看历史版本中下载次数最多，并且大概猜测能够和stylelint@14.6.1发行时间相近的那个版本，然后安装一下尝试一下，大概率是OK的！（如果不OK，换一个版本再试安装一次）