本文介绍如何使用 eslint-config-bem-sdk 包，使项目符合 BEM 命名规范，并在开发过程中自动地检测出代码风格问题。
什么是 eslint-config-bem-sdk 包？
eslint-config-bem-sdk 是一个基于 ESLint 工具的配置包，包含了一系列规则，用于检测代码中是否符合 BEM 命名规范。这个包定义了一套通用的规则集合，使开发者可以在项目开发中快速、简单地遵循 BEM 协议。
使用方法
在使用 eslint-config-bem-sdk 之前，需要确保已安装 eslint，如果没有安装，请执行以下命令：
npm install eslint --save-dev
接下来，执行以下命令安装 eslint-config-bem-sdk：
npm install eslint-config-bem-sdk --save-dev
然后，在项目根目录下创建一个 .eslintrc.json 文件，并将以下内容复制到文件中：
{
"extends": "eslint-config-bem-sdk"
}这样，就完成了 eslint-config-bem-sdk 的集成。
配置
如果您需要在 eslint-config-bem-sdk 的基础上自定义配置，可以按照以下步骤进行：
- 首先，创建一个名为
.eslintrc.json的配置文件； - 在该文件中定义自己的规则，例如：
{
"extends": "eslint-config-bem-sdk",
"rules": {
"no-alert": 0,
"no-console": 0
}
}这样，自定义的规则将覆盖默认规则。
示例代码
下面是一个简单的示例代码片段，用于演示 eslint-config-bem-sdk 的检测效果：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------ --- -------------------- -
------ -------- -------
-
------------------- -
---------------
-
------------------------------ --------- --------- -
---------------
-
--------- -
-------------- - -
---- ---------------------
--- -------------------------------- ---------------------------------
-- ------------------------------ ---- -------------------------------
------
--
-
-假如按照上述配置，执行 eslint 命令来检测这段代码，其中 eslint-config-bem-sdk 已经被集成了进去。那么执行以下命令：
./node_modules/.bin/eslint your-script.js
执行该命令后，控制台将打印出这段代码中的错误和警告信息。当然前提是你的代码中存在不符合 BEM 命名规范的写法。
总结
eslint-config-bem-sdk 提供了一个快捷且可定制的方法来确保您的项目中的代码符合 BEM 命名约定。在上述示例代码的检验中，我们可以看到 eslint-config-bem-sdk 提供的规则在 my-component__name 和 my-component__age 命名中生效。
通过集成 eslint-config-bem-sdk，可以使您的团队更一致、更清晰地编写项目代码，遵循统一的 BEM 命名规范，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558ca81e8991b448d613d