Stylelint-Order 开源项目教程

2026-01-18 09:49:09作者：钟日瑜

1. 项目的目录结构及介绍

Stylelint-Order 是一个用于 CSS 样式表中属性排序的插件。以下是其主要目录结构及其介绍：

stylelint-order/
├── src/
│   ├── rules/
│   │   ├── order.js
│   │   └── properties-order.js
│   ├── utils/
│   │   ├── get-custom-property-sets.js
│   │   └── is-standard-syntax-property.js
│   └── index.js
├── test/
│   ├── rules/
│   │   ├── order.test.js
│   │   └── properties-order.test.js
│   └── utils/
│       ├── get-custom-property-sets.test.js
│       └── is-standard-syntax-property.test.js
├── .eslintrc
├── .gitignore
├── .npmrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

src/：包含项目的源代码，其中 rules/ 目录下是具体的规则实现，utils/ 目录下是一些工具函数。
test/：包含项目的测试代码，与 src/ 目录结构相对应，用于测试规则和工具函数。
.eslintrc：ESLint 配置文件，用于代码风格检查。
.gitignore：Git 忽略文件配置。
.npmrc：NPM 配置文件。
.travis.yml：Travis CI 配置文件，用于持续集成。
CHANGELOG.md：项目更新日志。
LICENSE：项目许可证。
README.md：项目说明文档。
package.json：项目依赖和脚本配置。
yarn.lock：Yarn 依赖锁定文件。

2. 项目的启动文件介绍

Stylelint-Order 项目的入口文件是 src/index.js。该文件主要负责导出项目中的规则和配置：

module.exports = {
  rules: {
    'order/order': require('./rules/order'),
    'order/properties-order': require('./rules/properties-order'),
  },
};

这个文件导出了两个主要的规则：order/order 和 order/properties-order，这两个规则分别用于定义属性的顺序和属性的具体排序。

3. 项目的配置文件介绍

Stylelint-Order 的配置文件主要是 package.json 和 .eslintrc。

`package.json`

package.json 文件包含了项目的元数据和依赖信息，以及一些脚本命令：

{
  "name": "stylelint-order",
  "version": "4.1.0",
  "description": "A plugin pack of order related linting rules for Stylelint.",
  "main": "src/index.js",
  "scripts": {
    "test": "jest",
    "lint": "eslint src test",
    "prepublishOnly": "npm run lint && npm test"
  },
  "keywords": [
    "stylelint-plugin",
    "stylelint",
    "css",
    "order",
    "properties-order",
    "css-properties",
    "sorting",
    "sort",
    "order"
  ],
  "author": "Aleks Hudochenkov <aleks@hudochenkov.com>",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.15",
    "postcss": "^7.0.27",
    "stylelint": "^13.2.1"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-hudochenkov": "^2.0.1",
    "jest": "^25.1.0"
  }
}