跳到正文

我所理解的代码风格最佳实践(4):哪些项目约定值得写成 Lint

我所理解的代码风格最佳实践

  1. JavaScript 代码怎样从调用点读下去
  2. Vue 组件与 composable 的职责边界
  3. Nuxt 页面、目录与自动导入
  4. 哪些项目约定值得写成 Lint(当前)

假设一个页面直接导入了另一个页面的私有 helper。页面今天能跑,等那个 helper 随原页面改名或删除,依赖才暴露出来。第一次看到时可以在 review 里解释。要是同类问题总出现,目录也已经能稳定区分哪些是公开入口、哪些是私有实现,就可以让编辑器在 import 那一行先给出提示。

看检查需要拿到什么信息

格式化交给 Prettier 一类的工具。对 import 的来源、调用参数的语法形态、变量绑定和作用域做判断,可以用 ESLint。检查样式源码的选择器和声明,可以用 Stylelint。若判断需要 TypeScript 的类型信息,要先确认检查器使用的是这个文件对应的项目配置。

需要遍历目录、核对资源或打开构建产物的检查,我通常单独写成脚本。比如确认插件的产物确实包含某个入口,需要读取产物,源码里有导出语句只是其中一条线索。数据是否在正确时机刷新,要由运行时测试覆盖。一个组件是否值得拆、两个状态是否同属一个业务对象,则要结合调用方和需求判断,放到 review 里更合适。

Skill、AGENTS.md 或项目文档可以记录判断依据与常见例外。比如解释为什么页面之间要通过公开模块共享能力。Lint 报告则应该说清楚哪一行跨过了边界,以及调用方可以从哪里取公共能力。只有规则实施所需的路径、别名和例外,才需要变成配置。

先把规则写窄,再决定是否阻断

以私有导入为例,第一版只检查能够解析、且明确跨越两个页面目录的 import。先找三类样本:应该告警的跨页面引用、同一页面内合法的相对导入、走公开入口的引用。如果仓库有别名、生成目录或暂时无法迁移的旧入口,再各挑一个样本检查。自动修复也要看能否证明替换前后行为一致。仅凭文件名相同,无法知道一个私有 helper 该换成哪个公开入口。

对存量项目,我通常先在受影响目录用 warn 跑一轮,逐条区分真实问题、规则误报和有期限的迁移例外。等规则边界稳定,再把明确会造成问题的范围设为 error。项目可以只在新增目录先阻断,旧目录按负责人逐步处理。

最后在项目的检查命令上试一次,确认开发者和 CI 看到的是同一套配置。ESLint 的 --max-warnings=0 会让 warning 也导致命令失败,所以规则配置写了 warn,还要看命令行实际怎样处理告警。ESLint CLI 的告警阈值说明

项目偏好可以按目录启用

命名偏好和正确性检查适合分别配置。一个维护多年的项目已经稳定使用 useXxx.ts,就可以关闭要求小写加横线的命名规则。检查 SSR 边界、错误导入或私有依赖时,仍应识别项目允许的文件名。规则分组能让项目选需要的约定,也能避免为了换一种文件命名,连带失去别的检查。

我会先看现有规则能不能表达这个约定,再决定是否新增实现。自定义规则的文档、配置和可编辑例子放在同一个维护入口,方便读者从诊断追到规则选项。想看实际项目怎样给 ESLint、Stylelint 和专项脚本分工,可以接着读这篇。把项目约定写成 ESLint 护栏的原始实践