ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

typescript-eslint 弃用格式化规则的演进:从 lint 规则到 ESLint Stylistic 与专用格式化工具

typescript-eslint 弃用格式化规则的演进:从 lint 规则到 ESLint Stylistic 与专用格式化工具 typescript-eslint 弃用格式化规则的演进从 lint 规则到 ESLint Stylistic 与专用格式化工具【免费下载链接】typescript-eslint:sparkles: Monorepo for all the tooling which enables ESLint to support TypeScript项目地址: https://gitcode.com/GitHub_Trending/ty/typescript-eslint本指南以 typescript-eslint 官方博客《Deprecating Formatting Rules》为核心讲解 typescript-eslint 为什么及如何弃用其 20 条格式化formatting/layout规则、废弃时间线、每条规则的 ESLint Stylistic 替代品对照表以及迁移到专用格式化工具Prettier、dprint或 ESLint Stylistic 的完整实操方案。读完本文你将掌握如何平滑地将项目中仍在使用的typescript-eslint/indent、typescript-eslint/semi等规则迁移到新方案并理解这一决策背后的工程权衡。背景格式化规则为何被弃用typescript-eslint 于 2023 年 12 月 25 日随 v6.16.0 发布宣布弃用全部格式化规则。这一决策是对 ESLint 官方方向的跟随ESLint 早在 2023 年 10 月就公告弃用其核心格式化规则并将格式化的维护工作移交给社区衍生的ESLint Stylistic项目stylistic/*规则包。弃用的深层原因记录在项目的 What About Formatting? 文档中可从三类规则的区分理解Logical逻辑类关注代码运行时逻辑如缺失的await、无效逻辑判断。Stylistic风格类关注影响可读性但不改变运行时行为的风格如命名方式、等价语法结构的选择函数声明 vs 箭头函数。Formatting格式化类只关注无关紧要的标点与空白分号、空格、换行等这类规则与 Prettier 等专用格式化工具直接冲突。格式化规则的问题在于性能开销linter 的运行周期是「解析 → 检查 → 报告 → 修复」在修复一个空白问题前有大量中间工作在启用类型化 lintTyped Linting 的项目中性能劣势更加突出。规则相互隔离linter 中每条规则独立运行无法共享配置一条规则的 fixer 可能引入另一条规则的违规修复器之间还可能冲突作用于同一代码区间迫使 linter 额外执行一轮修复。维护成本高格式化规则的一致性远不如专用格式化工具且处理边界情况的能力更差维护代价极高。从源码结构看这一决策也体现在规则分类层面弃用的格式化规则大多源自 ESLint 核心的扩展规则extension rules它们为 TypeScript 语法扩展了 ESLint 同名的格式化规则如indent、semi、quotes等。弃用时间线与发布节奏官方博客明确了如下时间线来源packages/website/blog/2023-12-25-deprecating-formatting-rules.mdv6.16.02023 年 12 月 25 日将这 20 条格式化规则标记为deprecated。弃用本身只是一次文档层面的变更规则的实现仍然保留。v6 整个主版本依据语义化版本semver约定格式化规则在 v6 的所有发行版中持续可用但不会再添加新特性或修复bug fix 除外。下一个主版本v7移除所有被弃用的规则。这一点可以从当前仓库的变更记录得到印证packages/eslint-plugin/CHANGELOG.md 中记录了deprecate formatting (meta.type: layout) rules对应 v6.16.0 的 PR #8073以及后续 v7/v8 主版本中的remove formatting/layout rules移除格式化/布局规则。也就是说在当前仓库的最新代码中packages/eslint-plugin/src/rules/目录下已不再存在indent.ts、semi.ts、quotes.ts、comma-dangle.ts等格式化规则文件印证了「移除」这一最终结果。:::note 重要澄清stylistic配置即typescript-eslint/stylistic并未被弃用也不被建议反对。项目会继续提供这些配置及其规则用于帮助在可预见的未来强制保持与 TypeScript 相关的风格一致性。相关实现见 packages/eslint-plugin/src/configs/flat/stylistic.ts。 :::被弃用的规则与 ESLint Stylistic 替代品对照表虽然暂时可以继续使用 typescript-eslint 中的格式化规则但官方明确表示不会为这些规则增加任何新功能或修复因此应当尽早切换到 ESLint Stylistic 中的等价规则。下表完整列出了 v6.16.0 弃用的 20 条 typescript-eslint 规则与其 ESLint Stylistic 等价规则的对照来源官方博客表格规则文档可参见 packages/eslint-plugin/docs/rulestypescript-eslint 规则已弃用ESLint Stylistic 等价规则typescript-eslint/block-spacingstylistic/block-spacingtypescript-eslint/brace-stylestylistic/brace-styletypescript-eslint/comma-danglestylistic/comma-dangletypescript-eslint/comma-spacingstylistic/comma-spacingtypescript-eslint/func-call-spacingstylistic/func-call-spacingtypescript-eslint/indentstylistic/indenttypescript-eslint/key-spacingstylistic/key-spacingtypescript-eslint/keyword-spacingstylistic/keyword-spacingtypescript-eslint/lines-around-commentstylistic/lines-around-commenttypescript-eslint/lines-between-class-membersstylistic/lines-between-class-memberstypescript-eslint/member-delimiter-stylestylistic/member-delimiter-styletypescript-eslint/no-extra-parensstylistic/no-extra-parenstypescript-eslint/no-extra-semistylistic/no-extra-semitypescript-eslint/padding-line-between-statementsstylistic/padding-line-between-statementstypescript-eslint/quotesstylistic/quotestypescript-eslint/semistylistic/semitypescript-eslint/space-before-blocksstylistic/space-before-blockstypescript-eslint/space-before-function-parenstylistic/space-before-function-parentypescript-eslint/space-infix-opsstylistic/space-infix-opstypescript-eslint/type-annotation-spacingstylistic/type-annotation-spacing这些规则的弃用说明在规则文档中同样可见。以当前仓库中仍然保留文档的其他弃用规则为例文档顶部会标注 This rule has been deprecated… 的提示见 camelcase.md、no-duplicate-imports.mdx 等而 docs/rules/README.md 中定义了统一的图例 deprecated rule表示「不应再使用、将在未来版本中从插件移除」的规则。迁移到 ESLint Stylistic若你仍希望在 ESLint 内完成格式化而不是切换到专用格式化工具官方推荐的做法是使用 ESLint Stylistic 项目中的等价规则具体安装与启用步骤请参考其 Getting Started 指南。迁移的核心操作可以概括为移除typescript-eslint 中被弃用的格式化规则条目替换为对应的stylistic/*规则并将原有参数原样迁移例如indent、quotes、semi的选项在 Stylistic 中保持兼容若使用了typescript-eslint/stylistic或plugin:typescript-eslint/stylistic配置则无需改动——该配置不包含被弃用的格式化规则只会启用那些「与 TypeScript 相关且不影响程序逻辑」的风格规则见 packages/eslint-plugin/src/configs/flat/stylistic.ts 中实际启用的规则列表如array-type、consistent-type-assertions、prefer-function-type等。更推荐的方案格式化交给专用工具Prettier / dprint为什么推荐专用格式化工具官方立场见 What About Formatting?是不建议使用 ESLint 做格式化而是推荐使用 Prettier、dprint 或同类工具。Formatter格式化器只负责校验并修正代码中的空白类问题空格、换行运行极快因为它只关心空白改动不涉及代码逻辑与命名。Linter代码检查器负责校验并修正逻辑与非空白的风格问题命名一致性、bug 检测往往需要数秒甚至更久因为它对代码应用了大量逻辑规则。现代格式化工具如 Prettier的架构设计是「忽略代码原有格式、对全部代码统一应用格式」这使得它们比 linter 中的格式化规则更全面、更一致且维护成本更低。而 linter 中的格式化规则不仅慢还更不擅长处理边界情况。用 eslint-config-prettier 关掉格式化规则typescript-eslint 与 ESLint 核心的推荐预设中都不会启用任何格式化相关规则但某些第三方插件配置仍可能开启这种不良实践。若你的 ESLint 配置中出现了格式化规则官方建议使用eslint-config-prettier将其关闭然后单独配置格式化工具。Flat Config 写法eslint.config.mjs// ts-check import js from eslint/js; import { defineConfig } from eslint/config; import someOtherConfig from eslint-config-other-configuration-that-enables-formatting-rules; import prettierConfig from eslint-config-prettier; import tseslint from typescript-eslint; export default defineConfig( { files: [**/*.{js,ts}], extends: [ js.configs.recommended, tseslint.configs.recommended, someOtherConfig, ], }, // 添加这一行放在最后关闭所有格式化规则 prettierConfig, );Legacy Config 写法.eslintrc.js/* eslint-env node */ module.exports { extends: [ eslint:recommended, plugin:typescript-eslint/recommended, other-configuration-that-enables-formatting-rules, // 添加这一行放在最后关闭所有格式化规则 prettier, ], parser: typescript-eslint/parser, plugins: [typescript-eslint], root: true, };注意两点即使你使用的格式化工具不是 Prettier仍然可以用eslint-config-prettier因为它只负责关闭所有格式化规则。eslint-config-prettierconfig与eslint-plugin-prettierplugin不是一回事前者只是禁用 ESLint 核心及其他插件中的格式化规则后者是把 Prettier 加载进 ESLint 内部运行。在 ESLint 内运行 Prettier 可能较慢参见 性能排查文档但由于它没有在 ESLint 中重新实现 Prettier 的逻辑「用 linter 做格式化」的上述缺陷对它并不适用。何时选择 ESLint Stylistic专用格式化工具的缺点是它会严格地施加意见。虽然可以用// prettier-ignore注释等方式忽略部分代码但格式化工具总体上比 lint 规则更有主见。因此如果你强烈倾向于不用专用格式化工具ESLint Stylistic 提供的 ESLint 插件可以充当你的格式化器——它同时包含 formatting 与 stylistic 两类规则stylistic/ts/*系列专门覆盖 TypeScript 特有语法如type-annotation-spacing、member-delimiter-style。项目演进现状与总结从当前仓库可以完整还原这条演进链v6.16.02023-12-2520 条格式化规则被标记为 deprecated官方博客发布弃用公告即本主题对应文档 packages/website/blog/2023-12-25-deprecating-formatting-rules.mdv6 期间规则继续可用但不接受新特性文档层面标注弃用提示packages/eslint-plugin/docs/rules/README.md 定义了 deprecated rule图例v7 起弃用的格式化规则被移除packages/eslint-plugin/CHANGELOG.md 记录了remove formatting/layout rules等条目当前packages/eslint-plugin/src/rules/目录下已不再包含这些格式化规则文件stylistic配置持续保留typescript-eslint/stylistic与typescript-eslint/stylistic-type-checked等配置依然提供用于 TypeScript 相关的风格一致性见 packages/eslint-plugin/src/configs/flat/stylistic.ts。给仍在使用旧版 typescript-eslintv6 及更早的项目的迁移清单若项目把格式化交给 Prettier / dprint在 ESLint 配置末尾追加eslint-config-prettierflat 或 legacy 两种写法见上然后删除所有typescript-eslint/indent、semi、quotes等格式化规则条目。若项目坚持用 ESLint 做格式化安装 ESLint Stylistic按上表将 20 条弃用规则逐一替换为stylistic/*等价规则参数保持兼容。在升级到 typescript-eslint v7 及以上版本前完成上述迁移避免升级后因规则被移除而出现「unknown rule」配置错误。【免费下载链接】typescript-eslint:sparkles: Monorepo for all the tooling which enables ESLint to support TypeScript项目地址: https://gitcode.com/GitHub_Trending/ty/typescript-eslint创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表