五个提升代码质量的 ESLint 插件

你已经配置好了 ESLint。它能捕获未使用的变量并标记缺失的分号。但你的代码库仍在积累微妙的 bug、不一致的导入以及在代码审查中漏掉的可访问性问题。默认规则还不够。

ESLint 9 引入了扁平配置(flat config,eslint.config.js),取代了传统的 .eslintrc 格式。这一变化简化了插件集成,使配置更加可预测。无论你是已经迁移还是仍在使用旧格式,合适的插件都能将 ESLint 从基础检查器转变为真正的质量关卡。

以下是五个能解决现代前端项目实际问题的插件——而不会让你的工具链臃肿。

typescript-eslint:TypeScript 项目的类型感知检查

@typescript-eslint 插件将 TypeScript 的类型系统引入你的代码检查工作流。与基础语法检查不同,类型感知规则能捕获需要理解代码类型才能发现的问题。

考虑一个可能返回 null 的函数。类型感知检查会标记不安全的访问模式,否则这些问题只能在生产环境中通过运行时错误暴露。像 no-floating-promises 这样的规则能捕获被遗忘的 await 语句,而 no-unnecessary-condition 能识别死代码分支。

对于大型代码库,typescript-eslint 提供了 Project Service,通过跨文件重用 TypeScript 的程序实例来提升性能。当在 CI 中检查数千个文件时,这一点很重要。

在扁平配置中,你可以直接导入插件并展开其推荐配置。使用标准的 typescript-eslint 工具链时,这种设置能与 ESLint 9 的扁平配置模型完美集成。

eslint-plugin-import:模块规范和导入组织

eslint-plugin-import 防止在不断增长的代码库中导入语句积累的混乱。

该插件在运行时之前捕获拼写错误的路径,确保命名导入与实际导出匹配,并标记导致微妙 bug 的循环依赖。其 no-extraneous-dependencies 规则防止导入未在 package.json 中列出的包——这是部署失败的常见原因。

import/order 规则强制执行一致的分组:首先是外部包,然后是内部模块,最后是相对导入。这种一致性使文件易于浏览,并在代码审查期间使差异更清晰。

对于团队来说,这个插件消除了关于导入组织的风格争论。配置一次,自动修复处理其余部分。

eslint-plugin-unicorn:固执己见的 Bug 预防

eslint-plugin-unicorn 提供超过 100 条规则,捕获微妙问题并强制执行现代 JavaScript 模式。

它会在 for...of 更清晰时标记 Array.forEach。它会捕获你本意是 Array.from({ length: 5 }) 时写的 new Array(5)。它会防止跳过清理处理程序的 process.exit() 调用。

该插件推动使用现代语法:优先使用 Array.includes() 而不是 indexOf() !== -1,建议使用 String.replaceAll() 而不是带全局标志的正则表达式,并标记过时的 Number 方法。

并非每条规则都适合每个团队。从推荐预设开始,然后禁用与你的代码库约定冲突的规则。

eslint-plugin-jsx-a11y:JSX 可访问性检查

eslint-plugin-jsx-a11y 在可访问性问题到达用户之前就在 JSX 中捕获它们。

该插件标记没有 alt 属性的图片、没有可访问名称的按钮以及缺少标签的表单输入。它捕获破坏键盘导航的 autoFocus 使用,并识别非交互元素上的点击处理程序。

这些规则不能保证 WCAG 合规性——自动化工具大约能捕获 30% 的可访问性问题。但它们能防止最常见的错误,并在日常开发中建立可访问性意识。

对于发布面向用户应用的团队来说,这个插件至关重要。可访问性 bug 会影响真实用户,并在许多司法管辖区带来法律影响。

@eslint/css:超越 JavaScript 的代码检查

ESLint 现在已扩展到 JavaScript 之外。@eslint/css 插件为样式表带来静态分析,捕获语法错误并强制执行约定。

类似地,html-eslint 验证 HTML 结构,标记重复的 ID、缺失的 lang 属性和无效的嵌套。

这些插件对于包含 CSS 模块、HTML 模板或组件库的项目很重要,其中标记质量会影响渲染。它们在单一工具下统一你的代码检查工作流,而不需要单独的验证器。

关注点分离:代码检查 vs. 代码格式化

需要澄清一点:ESLint 处理代码质量,而非格式化。让 Prettier 管理分号、引号和缩进。使用 eslint-config-prettier 禁用与 Prettier 冲突的 ESLint 规则,然后分别运行两个工具。

这种分离使你的 ESLint 配置专注于捕获 bug,而不是强制执行风格偏好。

结论

这五个插件解决不同的问题:类型安全、导入规范、现代模式、可访问性和跨语言检查。逐步添加它们。首先启用推荐预设,然后在团队识别出摩擦点时自定义规则。

目标不是最大程度的严格性——而是在 bug 发布之前捕获真正的问题。

常见问题

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.