在前端开发中，随着项目逐渐复杂化，代码质量的管理变得越来越重要。其中，检测未使用的 css 类可以帮助我们优化 css 代码，减少冗余代码，提高性能。本文将介绍如何使用 ESLint 检测未使用的 css 类。
配置
首先，我们需要安装 ESLint。在命令行输入以下命令：
npm install eslint --save-dev
在项目根目录下新建一个 .eslintrc.json 文件。在该文件中，我们可以使用 eslint-plugin-css-modules 插件来检测未使用的 css 类。
{
"plugins": [
"css-modules"
],
"rules": {
"css-modules/no-unused-class": "error"
}
}该文件配置了一个名为 css-modules 的插件，并启用了 no-unused-class 规则。该规则可以检测未使用的 css 类。
示例
在一个 css 文件中定义了两个样式类：
.test1 {
color: red;
}
.test2 {
color: blue;
}在一个 html 文件中，我们使用了 test1 样式类，但没有使用 test2 样式类：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- -------- --- --------- ----- ---------------- -------------------- ------- ------ ---- ----------------------------- ------- -------
在命令行输入以下命令进行检测：
npx eslint index.html styles.css
可以看到，ESLint 提示了 test2 样式类没有被使用：
3:1 error 'test2' class is unused css-modules/no-unused-class
总结
通过 ESLint 检测未使用的 css 类可以帮助我们优化 css 代码，减少冗余代码，提高性能。在本文中，我们介绍了如何通过配置 .eslintrc.json 文件和使用 eslint-plugin-css-modules 插件来实现该功能，并提供了一个例子来帮助我们理解如何使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479ab9a968c7c53b05a6254