随着项目规模的不断扩大，前端开发的规范化已经成为了必要的选择。在代码风格与代码规范化的建设中，样式类重复定义是一种常见的问题。为了避免这种情况的发生，我们可以通过使用 ESLint 进行检查，以确保样式命名的唯一性。
什么是 ESLint？
ESLint 是一个用 JavaScript 编写的可插入的、可扩展的静态代码分析工具。它可以检查 JavaScript 代码中的语法错误、空格、变量定义等问题。 ESLint 可以通过多个扩展来检查不同的问题，比如：
- Google Stype Guide
- Airbnb Style Guide
- JQuery Style Guide
- ES2015/ES6+ Style Guide
准备工作
要使用 ESLint 进行样式检查，我们需要：
- 安装 Node.js
- 安装 ESLint
我们可以使用下面的命令进行安装。
--- ------- ------ ----------
同样，为了更好的检查 CSS 样式，我们需要安装 ESLint 的插件 eslint-plugin-css-modules (CSS Modules).
--- ------- ------------------------- ----------
开始使用
安装好 ESLint 后，我们需要在项目根目录下创建 .eslintrc.js 文件，来进行项目配置。下面是一份基于 Airbnb Style Guide 的 ESLint 配置，它能够检查代码中的样式出现问题。
-------------- - -
-------- ---------
-------- ----------------
------ -
------------------------------ --------
----------------------------- --------
--
--在配置文件中，我们使用了「airbnb」作为我们的代码规则扩展，同时使用了 css-modules 插件，以便检查样式问题。
检查规则
现在，让我们来看看 ESLint 是如何检查样式命名的唯一性的。
检查未使用的样式类
css-modules/no-unused-class 选项能够检查出未使用的样式类。检查到的未使用的样式类会被视为错误，并会输出错误信息来给开发者进行提示。下面的例子展示了未使用样式类的情况。
-- --------- -- ---- - ---------- - ---- - ----------- -
-- ------ -- --- ----- ------ --- -------- ----- ---------------------------
在这个例子中，.foo 样式类被标记为错误，因为它在 CSS 中声明了，但是并没有被使用到。
检查未定义的样式类
css-modules/no-undef-class 选项能够帮助我们检查未定义的样式类。如果我们在样式中使用一个未定义的类名，那么它就会被标记为错误，并且提示开发者修复这个问题。下面的例子展示了未定义样式类的情况。
-- --------- -- ---- - ---------- -
-- --------- -- ------ ------ ---- -------------- ----- ------- - ----------------
-- ------ -- --------- ------ ----- ----- ---- ---------- --- ----- -- ------ -- ---- ------------- --------------------------
在这个例子中，我们尝试引用 newClass 样式类，但是在 input.css 中并没有定义。 ESLint 将会标记这个问题并给开发者一些提示。
结论
ESLint 可以帮助开发者检查代码规范性，包括样式的问题。使用 ESLint 进行样式类命名的检查，可以提高代码的规范化程度。
然而不要忘记，只有在团队力求高效、代码风格统一的前提下，才能更好地使用 ESLint 进行检查。
参考：
- ESLint: https://eslint.org/
- ESLint Plugin CSS Modules: https://github.com/atfzl/eslint-plugin-css-modules
- Airbnb JavaScript Style Guide: https://github.com/airbnb/javascript#installing-dependencies
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f4b261c5c563ced563ac78