npm 包 stylelint-config-recess-order 使用教程

介绍

stylelint 是一个强大的 CSS lint 工具，它可以检查 CSS 的规范性和一致性。stylelint-config-recess-order 是一个由 CSS 风格指南 Recess 编写的 stylelint 配置 preset，它包含了许多常见的 CSS 代码风格和规范性规则。

本文将介绍如何在你的前端项目中使用 stylelint-config-recess-order 这个 npm 包。

安装

首先，你需要确保你的项目中已经安装了 stylelint。如果还没有安装，可以使用以下命令进行安装：

npm install stylelint --save-dev

接下来，你可以使用以下命令安装 stylelint-config-recess-order：

npm install stylelint-config-recess-order --save-dev

配置

在安装完 stylelint-config-recess-order 后，你需要在你的项目根目录创建一个名为 .stylelintrc.json 的文件，并在其中添加配置信息。以下是一个示例配置文件：

{
  "extends": "stylelint-config-recess-order",
  "rules": {
    // 在这里添加你自己的规则
  }
}

在这个示例配置文件中，我们使用了 stylelint-config-recess-order 的 preset，它包含了许多常见的 CSS 规则。

集成到项目中

现在，你的 stylelint 配置已经准备好了，可以运行以下命令检查你的 CSS 文件：

npx stylelint "*.css"

在 package.json 中添加以下脚本：

{
  "scripts": {
    "lint:css": "stylelint *.css"
  }
}

现在，你可以运行以下命令检查你的 CSS 文件了：

npm run lint:css

此外，你还可以将 stylelint 集成到你的编辑器或 IDE 中，这样在编辑器中就能够实时检查你的 CSS 文件了。

结论

使用 stylelint-config-recess-order 可以帮助你更好地维护你的 CSS 代码，并遵循一致的代码风格。在你的前端项目中使用它，并根据你自己的需要添加自定义规则，可以帮助你更好地管理你的代码库。

示例代码

以下是一个示例 CSS 文件，在使用 stylelint-config-recess-order 进行检查后，可以得出一些警告：

// javascriptcn.com code example
.selector,
.selector-secondary,
.selector[type=text] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  color: #333;
  text-align: center;
}

.selector:hover {
  background-color: #f5f5f5;
}

.selector-secondary {
  background-color: #f2f2f2;
}

.selector {
  padding-top: 0;
}

运行 stylelint 命令后，将得到以下警告：

test.css
 4:3   ✖  Unexpected duplicate selector ".selector"                                 duplicate-selector-no-array-duplicates
 6:3   ✖  Expected ".selector-secondary" to come before ".selector"                declarations-order
 8:21  ✖  The property "color" should come before "background-color"                declaration-block-order
 8:21  ✖  Expected "background-color" to come before "margin-bottom"                 declaration-block-order
10:3   ✖  Unexpected duplicate selector ".selector"                                 duplicate-selector-no-array-duplicates
12:3   ✖  Expected ".selector" to come before ".selector-secondary"                  declarations-order
14:3   ✖  Expected ".selector:hover" to come after ".selector-secondary"             selector-max-specificity

这些警告可以帮助你发现代码中的错误和不规范之处，并进行修复。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb56db5cbfe1ea061142b