Nuxt ESLint 源码解析二pages 到 server9 类项目目录感知机制是如何实现的【免费下载链接】eslint-configCollection of ESLint-related packages for Nuxt项目地址: https://gitcode.com/gh_mirrors/esl/eslint-config本文带你深入 Nuxt ESLintnuxt/eslint-config源码完整解析它的「项目目录感知」机制如何自动定位 pages、layouts、server 等 9 类 Nuxt 项目目录并让不同 ESLint 规则精准地只作用于对应的目录而不是全局一刀切。 为什么 ESLint 需要「认识」你的 Nuxt 目录普通 ESLint 规则对所有文件一视同仁但 Nuxt 项目有约定大于配置的特殊性pages目录下的页面组件必须只有一个根元素Nuxt 才能为它们包裹Transition/KeepAlivenuxt.config文件里的test键是无效配置应该报错pages 里的definePageMeta不应引用运行时值这意味着不同的规则需要作用于不同的目录。这套配置包的核心能力就是把「哪个规则管哪个目录」自动化。 9 类项目目录全清单配置包通过 types.ts 中的dirs选项声明了它认识的全部目录除了root和src两个基座正好是 9 类目录默认值相对 src典型用途pagessrc/pages页面路由强制单根元素layoutssrc/layouts布局组件强制单根元素componentssrc/components普通组件.server后缀组件也强制单根componentsPrefixed空带前缀组件放宽「多单词组件名」限制composablessrc/composables自动导入的函数目录pluginssrc/pluginsNuxt 插件modulessrc/modules自定义模块middlewaresrc/middleware路由中间件serverssrc/servers服务端代码目录 机制一默认目录推断零配置也能用打开 utils.ts 的resolveOptions你会发现所有目录都有合理的默认值而且同时兼容了 Nuxt 3 和 Nuxt 4 两种约定root [., ./app] ← Nuxt 3 用根目录Nuxt 4 用 app/ 子目录 src root pages src/pages layouts src/layouts ...其余 7 类目录同理全部由 src 派生这套推断发生在 utils.ts 第 64-74 行。也就是说一个标准结构的 Nuxt 项目什么都不配也能被正确识别——这是新手体验的基石。 机制二基于 Layer 的动态采集多项目层也认得对于使用了 Nuxt 多项目层Layers的复杂项目静态默认值不够。模块侧的 getDirs 在 module 包 中遍历nuxt.options._layers逐层采集每个 layer 的srcDir都会贡献一份src、pages、layouts、plugins、middleware、modules路径composables除了默认目录还会合并utils和imports.dirs里用户自定义的自动导入目录components会解析components配置项的自定义路径带prefix的目录自动归入componentsPrefixed支持~/别名写法统一换算为相对根目录的路径最终得到的完整目录清单由 generate.ts 写进自动生成的eslint.config.mjs形成「项目结构 → ESLint 配置」的闭环。 机制三目录变成 glob 匹配器规则各就各位目录感知完成后nuxt.ts 负责把它们编译成 ESLint 的files匹配规则。核心是 constants.ts 中定义的文件扩展名集合{js,ts,jsx,tsx,vue}配合目录路径拼出 glob单根元素规则nuxt.ts 第 12-51 行作用于layoutspagescomponents中带.server后缀的文件启用vue/no-multiple-template-root页面元信息规则nuxt.ts 第 60-72 行只作用于pages目录启用nuxt/no-page-meta-runtime-values配置键排序规则作用于nuxt.config及.config/nuxt文件同时ignores.ts 反向划定了「不检查的目录」dist、node_modules、.nuxt、.output、.vercel、.netlify和public。感知机制 白名单9 类目录 黑名单忽略目录双管齐下。 效果如何验证借助 Nuxt DevTools 集成的 ESLint Config Inspector你可以直观看到每一条规则「生效于哪个目录、来自哪份配置、当前是 error 还是 warn」是调试目录感知结果的最佳帮手。相关集成代码见 devtools.ts。 核心文件速查目录类型定义types.ts默认目录推断utils.tsLayer 动态采集module/config/utils.ts目录 → 规则映射configs/nuxt.ts忽略目录清单configs/ignores.ts生成配置写盘module/config/generate.ts如果想亲手跑一遍可克隆仓库查看 playground 示例项目git clone https://gitcode.com/gh_mirrors/esl/eslint-config✅ 小结Nuxt ESLint 的目录感知机制可以概括为三步resolveOptions给出零配置默认值 →getDirs按 Layer 动态精修 →nuxt.ts把目录编译成精确的 glob 规则。9 类目录各得其所规则不再误伤这正是它对普通 Nuxt 开发者「开箱即用」的秘密。【免费下载链接】eslint-configCollection of ESLint-related packages for Nuxt项目地址: https://gitcode.com/gh_mirrors/esl/eslint-config创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考