随着项目规模的不断扩大，前端开发的规范化已经成为了必要的选择。在代码风格与代码规范化的建设中，样式类重复定义是一种常见的问题。为了避免这种情况的发生，我们可以通过使用 ESLint 进行检查，以确保样式命名的唯一性。
什么是 ESLint？
ESLint 是一个用 JavaScript 编写的可插入的、可扩展的静态代码分析工具。它可以检查 JavaScript 代码中的语法错误、空格、变量定义等问题。 ESLint 可以通过多个扩展来检查不同的问题，比如：
- Google Stype Guide
- Airbnb Style Guide
- JQuery Style Guide
- ES2015/ES6+ Style Guide
准备工作
要使用 ESLint 进行样式检查，我们需要：
- 安装 Node.js
- 安装 ESLint
我们可以使用下面的命令进行安装。
npm install eslint --save-dev
同样，为了更好的检查 CSS 样式，我们需要安装 ESLint 的插件 eslint-plugin-css-modules (CSS Modules).
npm install eslint-plugin-css-modules --save-dev
开始使用
安装好 ESLint 后，我们需要在项目根目录下创建 .eslintrc.js 文件，来进行项目配置。下面是一份基于 Airbnb Style Guide 的 ESLint 配置，它能够检查代码中的样式出现问题。
module.exports = {
extends: 'airbnb',
plugins: ['css-modules'],
rules: {
'css-modules/no-unused-class': 'error',
'css-modules/no-undef-class': 'error',
},
};在配置文件中，我们使用了「airbnb」作为我们的代码规则扩展，同时使用了 css-modules 插件，以便检查样式问题。
检查规则
现在，让我们来看看 ESLint 是如何检查样式命名的唯一性的。
检查未使用的样式类
css-modules/no-unused-class 选项能够检查出未使用的样式类。检查到的未使用的样式类会被视为错误，并会输出错误信息来给开发者进行提示。下面的例子展示了未使用样式类的情况。
/* input.css */
.foo { color:red; }
.bar { color:blue; }/* output */ 1:1 error Unused CSS selector "foo" css-modules/no-unused-class
在这个例子中，.foo 样式类被标记为错误，因为它在 CSS 中声明了，但是并没有被使用到。
检查未定义的样式类
css-modules/no-undef-class 选项能够帮助我们检查未定义的样式类。如果我们在样式中使用一个未定义的类名，那么它就会被标记为错误，并且提示开发者修复这个问题。下面的例子展示了未定义样式类的情况。
/* input.css */
.foo { color:red; }/* sample.js */ import styles from './input.css'; const myStyle = styles.newClass;
/* output */
{myStyle} (2:10) error Class name `newClass` not found in styles in file `./input.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