npm 包 bemlinter 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 bemlinter 使用教程

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

安装

在本地项目中安装 bemlinter：

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

使用

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

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

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

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

bemlinter 还支持以下命令参数：

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

可以在项目根目录下创建 .bemlinterrc 配置文件，来定义要使用的 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 规则，也可以在此基础上做个性化的修改。

示例代码

以下是示例代码：

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

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

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

输出：

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

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

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/60057ae481e8991b448eb69d