PostCSS BEM Linter 使用教程

PostCSS BEM Linter 使用教程

postcss-bem-linterA BEM linter for postcss项目地址:https://gitcode.com/gh_mirrors/po/postcss-bem-linter

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

postcss-bem-linter/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── lib/
│   ├── bem-pattern.js
│   ├── index.js
│   ├── options.js
│   └── utils.js
├── package.json
└── test/
    ├── fixtures/
    └── index.js

• CHANGELOG.md: 记录项目的变更历史。
• CONTRIBUTING.md: 指导如何为项目贡献代码。
• LICENSE: 项目的开源许可证。
• README.md: 项目的基本介绍和使用说明。
• lib/: 包含项目的主要逻辑文件。
  • bem-pattern.js: 定义 BEM 模式的正则表达式。
  • index.js: 项目的主入口文件。
  • options.js: 处理插件的配置选项。
  • utils.js: 包含一些工具函数。
• package.json: 项目的依赖和脚本配置。
• test/: 包含项目的测试文件。
  • fixtures/: 测试用例的样本文件。
  • index.js: 测试的主入口文件。

2. 项目的启动文件介绍

项目的启动文件是 lib/index.js。这个文件是 PostCSS BEM Linter 插件的入口点，负责初始化和配置插件。

// lib/index.js
module.exports = postcssBemLinter;

function postcssBemLinter(options) {
  return (root, result) => {
    // 插件逻辑
  };
}

3. 项目的配置文件介绍

项目的配置文件是 package.json。这个文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "postcss-bem-linter",
  "version": "3.0.0",
  "description": "A BEM linter for postcss",
  "main": "lib/index.js",
  "scripts": {
    "test": "node test"
  },
  "dependencies": {
    "postcss": "^6.0.0"
  },
  "devDependencies": {
    "tape": "^4.0.0"
  }
}

• name: 项目的名称。
• version: 项目的版本号。
• description: 项目的描述。
• main: 项目的入口文件。
• scripts: 包含一些常用的脚本命令，如 test。
• dependencies: 项目运行所需的依赖。
• devDependencies: 开发和测试所需的依赖。

通过以上介绍，您可以更好地理解和使用 PostCSS BEM Linter 插件。希望这篇教程对您有所帮助！

postcss-bem-linterA BEM linter for postcss项目地址:https://gitcode.com/gh_mirrors/po/postcss-bem-linter