CSS 类名写错了我查了三年，今天 Biome 2.5 终于把这件事包圆了——500 条规则，这次 CSS 的坑它全帮你抓

CSS 类名写错的时候，你是怎么发现的？

我以前是这么干的：本地跑一圈，没报错；部署到测试环境，样式乱了；打开 DevTools 一个个数，发现有个 className="btn-invali" 少打了个 d。这种低级错误浪费了我不知道多少时间。

Biome 2.5 这次干了件让我决定把 ESLint + Prettier 全删了的事：它把 CSS 类名分析和整个模块依赖图接起来了，你写错一个 className，它能顺着 import 树一直追到那个 CSS 文件，告诉你具体哪个地方漏了。

这个规则叫 noUndeclaredClasses，它不只是告诉你「这个类不存在」，它会打印完整的 import 链路。

来看一个官方测试里的真实输出：

Button.jsx:4:28 lint/nursery/noUndeclaredClasses

  i The CSS class btn-invalid is not defined in any imported stylesheet.

  3 │ export function Button() {
  4 │   return <button className="btn-invalid">This class does not exist</button>;
  5 │ }

  i Checked import tree:
  Button.jsx (this file)
  ├─ imported by: Block.jsx
  │  └─ imported by: Page.jsx
  │     └─ imported by: App.jsx -> which imports app.css
  └─ imported by: Page.jsx
     └─ imported by: App.jsx -> which imports app.css

它不只告诉你写错了，还告诉你这个文件被谁引用了、最后挂到哪个 CSS 文件上。你看到这个 import 链路，基本就能定位是 CSS 文件里写错了，还是 className 拼写错了。

对应的另一个规则叫 noUnusedClasses，反过来查你 CSS 文件里定义了但从来没在 JSX 里用过的类。

这两个规则配合起来，CSS 类名的「有没有写」和「有没有用」就全被管起来了。

还有一个规则我之前没见过这种实现方式：noRestrictedDependencies。

这个规则直接接入了 e18e initiative 的数据库——这个社区专门追踪哪些 npm 包可以被原生 API 或更轻量的替代品替换。Biome 现在会直接告诉你：你的 package.json 里有这个包，其实可以用浏览器原生 API 替代，没必要多装一个依赖。

这个思路很直接，但之前没有任何一个 linter 把它做到规则里。

除了 CSS 分析，2.5 还有几个值得注意的更新：

GritQL 插件现在支持 includes 配置了，可以指定插件只在哪些路径下生效，支持 glob 和反向 glob，比如 "src/components/**/*.ts" 之外的文件就不跑这个插件。

然后是数字：500+ 条规则，73 条 nursery 规则升级为 stable，涵盖了 Vue 框架、type-aware 规则、正确性、可疑性、样式、性能、安全、无障碍各个维度。

怎么迁移：

如果你现在还在用 ESLint + Prettier，迁移路径很清晰：

# 删掉旧的
npm uninstall eslint prettier

# 装 Biome
npm install --save-dev biome

# 初始化，会生成 biome.json
npx @biomejs/biome init

# 格式化和检查一起跑
npx biome check --write ./src

现有的 ESLint 配置里如果有 typescript-eslint 的 type-aware 规则，Biome 2.5 已经原生支持，不需要额外装 @typescript-eslint/parser。

说个实在的：

我之前不敢删 ESLint，是因为项目里有些规则确实没有替代品。但 Biome 2.5 这套 CSS module graph 思路，是 ESLint 根本做不到的事——它需要把解析器、CSS 模块分析、依赖图全部接在一起才玩得转。这不是规则数量的问题，是架构上的差异。

下一步：先跑一下 biome check 看看你项目里有多少条 noUndeclaredClasses 和 noUnusedClasses，这个数字会让你想立刻把配置加上。