stylelint 接入实战踩坑总结

前言

团队合作时，当每个人的代码都拥有自定义的格式化方式时，在提交merge的时候往往要解决很多冲突，此时我们可以使用eslint+stylelint来对团队的代码进行约束。

eslint的配置引入比较简单，网上有比较多的教程，而stylelint的教程大多语焉不详。在这里，我会介绍一下我在引入stylelint所遇到的坑，以及解决方法。

正文

stylelint是一个强大的，现代的代码检查工具，可以帮助你在团队合作中强制执行样式约定。

1. 安装stylelint

yarn add -D stylelint

2. 配置文件

使用 stylelint检测器需要一个配置对象，你可以使用三种方式来创建这个对象。

• package.json 中的stylelint 属性。
• .stylelintrc.js文件
• stylelint.config.js 文件输出的js对象

一旦发现它们中的任何一个，将不再继续进行查找，进行解析，将使用解析后的对象。 本次使用的是.stylelintrc.js 文件来进行配置。

3. 使用stylelint

安装官方文档的说法你可以按照以下方法运行stylelint检测样式代码。

--fix 用来自动修复，但不能修复所有的问题。

// package.json
"scripts":{
  "lint:css":"stylelint src/**/*.css --fix"
}

踩坑点1：

由于我的项目里使用的样式语言是less。所以检测css是肯定不对的，所以这里我们需要做一点改动

// package.json
"scripts":{
  "lint:css":"stylelint src/**/*.less --fix"
}

于是我们可以运行这串代码了

yarn lint:css postcss-less

大家可以看到，这里报了一些提醒，简单翻译为让我们用对应的语法去解析我们的样式。而这对应的语法解析器是需要我们去安装的。

yarn add -D   postcss-less

于是再次对脚本进行修改。

// package.json
"scripts":{
  "lint:css":"stylelint src/**/*.less --fix  --custom-syntax postcss-less"
}

OK 到这里我们就可以正常的去跑lint命令对我们的样式代码进行格式化了。接下来我们来配置lint规则

4. 配置规则

我们首先需要安装三个npm包帮助我们完善规则

yarn add -D stylelint-config-standard stylelint-order stylelint