ESLint template-tag-spacing 规则详解规范化标签模板字面量Tagged Template Literals的空格书写【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslintESLint 的template-tag-spacing规则用于统一标签函数tag function与模板字面量之间的空格写法属于layout排版类规则并支持--fix自动修复。本文将以本仓库中的规则文档 docs/src/rules/template-tag-spacing.md 为主体结合其核心实现 lib/rules/template-tag-spacing.js、完整测试用例 tests/lib/rules/template-tag-spacing.js 以及底层isSpaceBetween的源码实现带你掌握该规则的两种模式、配置方法、自动修复行为与边界场景从而在自己的项目中写出风格统一、可自动修复的标签模板代码。背景ES6 标签模板字面量ES6ECMAScript 2015引入了一种特殊的函数调用形式——标签模板字面量tagged template literals。在funcHello world这种写法中func是标签函数反引号包裹的部分则是模板字面量。标签函数接收的参数由模板字面量中的字符串片段与插值表达式${...}共同组成因此可以用于实现模板引擎、样式化组件、国际化、SQL 拼接转义等各类 DSL领域特定语言。在标签函数与模板字面量之间是否插入空白字符完全是可选的。也就是说下面两行代码在语义上完全等价let hello funcHello world; let hello func Hello world;虽然空白不影响运行结果但它会直接影响代码的可读性与团队风格的一致性。template-tag-spacing规则正是为了解决这个问题而存在它不允许开发者在同一个项目中混用两种写法而是通过规则强制统一为其中一种。规则详情Rule Details本规则的核心目标是维护标签函数与其模板字面量之间空格的风格一致性maintain consistency around the spacing between template tag functions and their template literals。该规则通过监听 AST 节点类型TaggedTemplateExpression来工作每当解析器生成一个标签模板表达式节点时规则都会检查标签 token 与模板字面量 token 之间是否存在空白再依据当前配置判定是否报告错误详见后文源码剖析。在 conf/rule-type-list.json 中layout分类收录了此类只关注代码排版、不涉及逻辑正确性的规则同时规则文档中recommended: false意味着它不会被自动包含在eslint:recommended推荐配置中需要开发者显式开启。配置方式Options在 ESLint 配置文件中可以通过数组语法为规则指定严重级别与选项{ template-tag-spacing: [error, never] }该规则只有一个选项取值只能为never或always具体语义如下选项默认值行为never是默认禁止标签函数与其模板字面量之间存在空格always否要求标签函数与其模板字面量之间必须有一个或多个空格说明从 lib/rules/template-tag-spacing.js 的schema定义看选项是一个只含always/never两个合法值的枚举数组传入其他值会在配置校验阶段直接报错。never默认错误示例默认配置下会报告unexpected错误/*eslint template-tag-spacing: error*/ func Hello world;正确示例/*eslint template-tag-spacing: error*/ funcHello world;always错误示例配置为always时会报告missing错误/*eslint template-tag-spacing: [error, always]*/ funcHello world;正确示例/*eslint template-tag-spacing: [error, always]*/ func Hello world;除了内联配置注释如上面的/*eslint ...*/外你也可以在eslint.config.jsflat config中配置export default [ { rules: { template-tag-spacing: [error, always], }, }, ];源码实现剖析规则如何检查与修复规则的完整实现位于 lib/rules/template-tag-spacing.js整个实现非常精简核心思路可以拆解为四步。1. 元信息meta定义meta: { type: layout, fixable: whitespace, schema: [{ enum: [always, never] }], messages: { unexpected: Unexpected space between template tag and template literal., missing: Missing space between template tag and template literal., }, },type: layout声明这是排版类规则fixable: whitespace声明规则可提供自动修复能力因此运行 ESLint 时加上--fix即可自动修正schema限制选项只能取always/nevermessages定义两类错误消息——空格多余时报unexpected空格缺失时报missing。2. 默认值判定const never context.options[0] ! always;只要未显式传入always即未配置或配置为never就按never模式处理与文档所述“never为默认值”完全一致。3. 检查逻辑 checkSpacing规则只注册了TaggedTemplateExpression一个访问器return { TaggedTemplateExpression: checkSpacing, };在checkSpacing中通过sourceCode获取标签前一个 token 与模板字面量的首个 token再用sourceCode.isSpaceBetween(tagToken, literalToken)判断两者之间是否存在空白never模式若存在空白则报告unexpected并给出从标签 token 末尾到字面量 token 起始的精确位置localways模式若不存在空白则报告missing。4. 底层空白检测 isSpaceBetweenisSpaceBetween定义在 lib/languages/js/source-code/source-code.js#L504它并非简单地比较两个 token 的range是否相邻而是以“包含注释”的方式逐个遍历两个节点/token 之间的所有 token只要任意相邻 token 之间存在字符空隙currentToken.range[1] ! nextToken.range[0]就判定为有空白。这意味着注释、多空格、换行等情况都会被纳入空白检测范围规则的判定是全面而严谨的。自动修复的特殊处理never模式下的修复逻辑值得特别注意fix(fixer) { const comments sourceCode.getCommentsBefore(node.quasi); // Dont fix anything if theres a single line comment after the template tag if (comments.some(comment comment.type Line)) { return null; } return fixer.replaceTextRange( [tagToken.range[1], literalToken.range[0]], comments.reduce( (text, comment) text sourceCode.getText(comment), , ), ); },当标签与模板字面量之间存在块注释Block comment时修复会删除注释两侧的空白但保留注释文本本身当存在**单行注释Line comment即//**时修复函数返回null拒绝自动修复。因为删除换行会把//注释之后的代码注释掉改变代码语义always模式的修复则简单得多在标签 token 之后插入一个空格fixer.insertTextAfter(tagToken, )。测试用例验证规则覆盖的场景边界lib/rule-tester/rule-tester.js 提供的RuleTester是验证规则行为的标准工具。tests/lib/rules/template-tag-spacing.js 中用RuleTesterecmaVersion: 6因为标签模板是 ES6 语法构造了 20 组valid用例与 35 组invalid用例覆盖了几乎所有真实场景场景覆盖点简单标签tag\name最基本的通过/失败用例带插值${name}的模板确认插值表达式不影响空白判定new tag\name与new (tag)name构造器调用场景(tag)\name括号包裹的调用场景标签与模板之间夹注释tag/*comment*/\...、tag // comment多个空格tag \name空白数量不影响判定一律视为违规换行tag\n\name、空行tag\n\nname换行同样被视为空白成员表达式foo\n .bar\Hello world|always模式下自动在.bar 与模板间补空格函数调用foo(\n bar\n)\Hello world跨行表达式末尾补空格同时每个invalid用例都精确断言了报告的行列范围与output修复后的代码例如tagname→ 修复为tag\name错误位置为第 1 行第 4 列到第 5 列即空白所在的区间tag /*heres a comment*/ \Hello worldnever→ 修复为tag/heres a comment/Hello world注释被保留、空白被删除tag // heres a comment \n\bar→ 输出为null即不提供修复印证了源码中对单行注释的防护逻辑foo\n .bar\Hello worldalways→ 修复为foo\n .bar Hello world说明always 模式同样适用于成员表达式标签。这些测试不仅是规则正确性的保障也直接反映了规则在真实项目中对各种语法形态的覆盖范围可作为理解规则行为的权威参考。何时不使用此规则When Not To Use It如果你不希望收到关于标签函数与模板字面量之间空格的任何提示可以安全地关闭该规则template-tag-spacing: off。典型场景包括项目中没有使用标签模板字面量团队对两种写法没有统一偏好且代码库中已存在大量混合写法、不打算做格式化收敛。另外需要注意本规则只关心标签与模板字面量之间的空白并不会检查模板字符串内部如${}表达式内部的空白格式。版本状态与迁移提示需要特别提醒本规则在ESLint v8.53.0 起已被标记为废弃deprecated计划可用至ESLint 11.0.0。从其源码中的meta.deprecated字段lib/rules/template-tag-spacing.js可以看到废弃原因格式化类规则正逐步移出 ESLint 核心Formatting rules are being moved out of ESLint core替代方案由社区维护的ESLint Stylistic插件stylistic/eslint-plugin中的同名规则template-tag-spacing继续维护此类排版规则。如果你的项目仍在使用旧版本 ESLint可以直接使用本规则若已升级到较新版本建议规划将相关格式化规则迁移到stylistic/eslint-plugin迁移方式可参考meta.deprecated中replacedBy字段给出的指引对应插件stylistic/eslint-plugin、对应规则template-tag-spacing。小结template-tag-spacing是一个小而美的排版类规则它只解决一个问题——标签模板字面量中标签函数与反引号之间到底要不要空格。通过本文你可以看到规则本身逻辑极简默认never、可选always但其实现与测试却精细地处理了注释保留、单行注释跳过修复、多空格、换行、构造器调用、成员表达式与函数调用表达式等边界情况并借助isSpaceBetween与--fix实现了一致的检查与安全修复。无论在代码评审还是 CI 中启用它都能让团队的标签模板写法始终保持统一。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考