npm 包 bemlinter 使用教程

在前端开发中，遵循一定的编码规范和组件化方式可以提高代码可读性和可维护性。而 BEM（块（block）、元素（element）、修饰符（modifier））是一种流行的命名规范，可以帮助我们更好地组织页面结构和样式。在实际开发中，可以使用 npm 包 bemlinter 来自动化检测项目中是否符合 BEM 命名规范，从而避免手动检查的繁琐过程。

安装

在本地项目中安装 bemlinter：

npm install bemlinter --save-dev

使用

在项目的 package.json 中添加以下命令：

"scripts": {
  "lint:bem": "bemlinter"
}

在终端中运行以下命令，即可检测 src 目录下所有 .scss 文件中的 BEM 命名规范。

npm run lint:bem

bemlinter 还支持以下命令参数：

• -V, --version - 输出 bemlinter 的版本信息
• -c, --config <path> - 指定配置文件路径，默认为 .bemlinterrc
• -i, --ignore <patterns> - 指定要忽略的文件/目录/模式，多个可以用逗号分隔
• -o, --output <path> - 指定输出文件的路径，默认为终端输出

可以在项目根目录下创建 .bemlinterrc 配置文件，来定义要使用的 BEM 命名规则和错误提示信息，例如：

{
  "rules": {
    "block-pattern": "^\\w+(?:-[a-z]+)*$",
    "element-pattern": "^\\w+(?:-[a-z]+)*__$",
    "modifier-pattern": "^\\w+(?:-[a-z]+)*(?:_\\w+(?:-[a-z]+)*)?$",
    "error-message": "该类名不符合 BEM 命名规范"
  }
}

• block-pattern 限制块的名称，例如 block、block-name
• element-pattern 限制元素的名称，例如 block__element-name
• modifier-pattern 限制修饰符的名称，例如 block__element-name_modifier，block__element-name_modifier-value
• error-message 规定不符合 BEM 命名规范的错误提示信息

默认情况下，.bemlinterrc 采用 bemlinter 自带的 stylelint-bem-naming 规则，也可以在此基础上做个性化的修改。

示例代码

以下是示例代码：

<div class="block">
  <span class="block__element">element</span>
  <span class="block__element block__element_state">state element</span>
</div>

-- -------------------- ---- -------
------ -
  -------- ------
  ---------- -
    -------- -------------
    ------- -
      ------------ -----
    -
  -
-

npm run lint:bem

输出：

src/style.scss
  10:1  ✖  .block__element-state 该类名不符合 BEM 命名规范

bemlinter 检测出了 block__element-state 不符合 BEM 命名规范，显示了错误提示信息。

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