介绍
在前端开发中，为了让代码可读性和可维护性更强，我们常常会对代码进行规范，使用 stylelint 工具可以对 CSS 样式表进行静态分析，帮助我们避免出现一些常见但又很容易被忽视的错误。
而 rollup-plugin-stylelint 则是一个 rollup 插件，可以帮助我们在打包时自动检测 CSS 文件是否符合规范，提高代码质量，在本文中，将介绍如何使用该插件。
安装
在使用 rollup-plugin-stylelint 之前，需要先安装 stylelint 和 rollup，可以使用以下命令进行安装：
npm install -D stylelint rollup
然后安装 rollup-plugin-stylelint：
npm install -D rollup-plugin-stylelint
配置
在 rollup 配置文件中，我们需要引入 rollup-plugin-stylelint，并将其添加到 plugins 数组中：
-- -------------------- ---- -------
------ --------------- ---- --------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
----- ------------
--
-------- -
-----------------
---- ----- -- ------
-------- ----------- -- -----
-------- ------------------ -- -----
---
--
--以上的配置项中，除了 fix、include 和 exclude，还包括以下配置项：
- files：指定需要验证的文件路径数组。
- formatter：指定报告的格式化程序名称。
- logLevel：指定日志级别。默认为“warn”。
- lintDirtyModulesOnly：仅在模块本身修改时才验证。默认为 false。
- configFile：指定 Stylelint 配置文件路径。
示例
下面是一个简单的示例，假设我们有一个 index.css 文件，其中包含了一些语法错误：
body{
background-color:green;
}
.section{
width:calc(100%-20px);
}然后在 rollup 打包时，rollup-plugin-stylelint 插件会自动检测此文件，修复错误：
body {
background-color: green;
}
.section {
width: calc(100% - 20px);
}最终，打包结果中也包含了此文件和修复后的内容。
总结
使用 rollup-plugin-stylelint 可以方便地实现在 rollup 打包时自动检测 CSS 文件并修复错误，提高项目代码的可读性和可维护性。希望通过本文的介绍能够帮助大家更好的使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbf30b5cbfe1ea0611bc7