Stylelint Selector BEM Pattern 项目教程

Stylelint Selector BEM Pattern 项目教程

stylelint-selector-bem-patternStylelint plugin that incorporates postcss-bem-linter项目地址:https://gitcode.com/gh_mirrors/st/stylelint-selector-bem-pattern

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

stylelint-selector-bem-pattern/
├── src/
│   ├── index.js
│   └── utils.js
├── test/
│   ├── index.test.js
│   └── utils.test.js
├── .eslintrc.js
├── .gitignore
├── .stylelintrc.js
├── package.json
├── README.md
└── LICENSE

• src/: 包含项目的主要源代码文件。
  • index.js: 项目的入口文件。
  • utils.js: 包含一些辅助函数。
• test/: 包含项目的测试文件。
  • index.test.js: 针对 index.js 的测试文件。
  • utils.test.js: 针对 utils.js 的测试文件。
• .eslintrc.js: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件配置。
• .stylelintrc.js: Stylelint 配置文件，用于 CSS 风格检查。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• LICENSE: 项目许可证。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。这个文件主要负责初始化 Stylelint 插件并定义 BEM 选择器模式。以下是 index.js 的简要介绍：

// src/index.js
const stylelint = require('stylelint');
const ruleName = 'plugin/selector-bem-pattern';

const ruleFunction = (options) => {
  // 定义 BEM 选择器模式的逻辑
};

module.exports = stylelint.createPlugin(ruleName, ruleFunction);

• stylelint: 引入 Stylelint 库。
• ruleName: 定义插件的名称。
• ruleFunction: 定义 BEM 选择器模式的逻辑。
• module.exports: 导出 Stylelint 插件。

3. 项目的配置文件介绍

项目的配置文件主要是 .stylelintrc.js。这个文件定义了 Stylelint 的规则和插件配置。以下是 .stylelintrc.js 的简要介绍：

// .stylelintrc.js
module.exports = {
  plugins: [
    'stylelint-selector-bem-pattern'
  ],
  rules: {
    'selector-bem-pattern': {
      preset: 'suit',
      resolveNestedSelectors: true,
      message: function (selectorValue) {
        return `Expected class selector "${selectorValue}" to match BEM CSS pattern`;
      }
    }
  }
};

• plugins: 定义使用的 Stylelint 插件。
• rules: 定义具体的规则。
  • selector-bem-pattern: 定义 BEM 选择器模式的规则。
    • preset: 使用 SUIT CSS 预设。
    • resolveNestedSelectors: 解析嵌套选择器。
    • message: 自定义错误消息。

stylelint-selector-bem-patternStylelint plugin that incorporates postcss-bem-linter项目地址:https://gitcode.com/gh_mirrors/st/stylelint-selector-bem-pattern