1. 什么是 stylelint？
stylelint 是一个强大的现代 CSS 检查器，可帮助我们保持 CSS 代码的一致性和准确性。它可以在终端或编辑器中运行，并可以通过 gulp、webpack 等构建工具在代码检查过程中集成。
stylelint 可以检查一系列代码风格问题，例如缩进、注释、空格等多种错误。
2. stylelint-config-saritasa-base 是什么？
stylelint-config-saritasa-base 是一个由 Saritasa 公司开发的 stylelint 的配置包，是基于一系列规则的集合，使得您可以轻松地在您的项目中使用这些规则。
这个包包含了一些 SASS，SCSS，CSS 代码的规则，并且这些规则可以覆盖 stylelint 的默认值。
3. 如何安装 stylelint-config-saritasa-base?
首先，您需要安装 stylelint 包以及一些其他的依赖：
npm install --save-dev stylelint stylelint-config-saritasa-base stylelint-config-prettier stylelint-order
stylelint-config-prettier是将 stylelint 和 prettier 的规范结合起来的包，以确保您的代码遵循统一的规范。stylelint-order可以帮助我们保留 CSS 属性的正确顺序。
4. 如何在项目中使用 stylelint-config-saritasa-base?
在您的项目中使用 stylelint-config-saritasa-base 非常简单，只需要在 stylelint 的配置项（.stylelintrc 或 stylelint.config.js）中加入一个 "extends" 属性即可。
例如，在 .stylelintrc 文件中，您可以添加以下内容：
{
"extends": "stylelint-config-saritasa-base",
"rules": {
// 在此添加其他规则
}
}5. 示例代码
在以下例子中，我们建立了一个名为 "styles.scss" 的文件。
-- -------------------- ---- ------- --- - ------------- -- -------- - -------- ----- ------- - ----- - ----- - ------------ ----- -
在这个例子中，.wrapper 和 .item 元素都有一个错误，因为它们没有一些必要的属性（例如，.wrapper 不包含 flex-direction，而 .item 没有 display 属性）。
如果我们不使用 stylelint-config-saritasa-base，我们可能会得到一个类似于以下的警告：
[warning] Unexpected unknown-static-property "flex" (property-no-unknown) [warning] Expected "display" to come before "font-weight" (order/properties-order)
但是，如果我们按照上面的配置要求使用了 stylelint-config-saritasa-base，我们将重写样式以符合规则，从而解决这些问题。
最终，我们将得到一个类似于以下的代码，完美符合规则：
-- -------------------- ---- ------- --- - ------------- -- -------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- ------- - ----- - ----- - -------- ------ ------------ ----- -
总结：
使用 stylelint-config-saritasa-base 可以帮助我们更轻松地在项目中使用 stylelint，并且可以使我们的代码更加一致和准确。在使用之前，需要简单地安装和配置它，即可使用。希望这个教程对您有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566ad81e8991b448e2e90