开发工具格式化CLI【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址https://gitcode.com/gh_mirrors/pr/prettier点击查看免费下载Prettier 3.8.0 的发布主题是紧跟 Angular v21.1与该版本同日发布带来的全新模板语法能力连续case语句、模板中数组/对象字面量与函数调用里的展开元素spread elements以及 Markdown 代码块内的 Angular 语法格式化。本篇文章以 官方 3.8.0 发布公告 为骨架结合仓库源码逐条剖析这些能力的实现原理、行为变化与使用方式帮助你快速理解升级到 Prettier 3.8 后 Angular 与 Markdown 格式化行为的变化。导读对使用 Angular 21 及更高版本的开发者来说Prettier 3.8 是一次必须了解的升级它修复了switch块中连续case语句直接报SyntaxError的问题补齐了模板表达式内 spread 语法的规范化输出同时把 Angular 的格式化能力延伸进了 Markdown 代码块angular-ts、angular-html。读完本文你将掌握这些新特性的触发条件、格式化前后行为对比以及对应的源码实现位置方便在实际项目中验证与排查。升级背景Prettier 与 Angular v21.1 的同步节奏官方公告明确指出Prettier 3.8 的目标是“完全支持 Angular v21.1 中刚刚落地的全新特性”。Angular 的模板语法从 v17 引入基于前缀的控制流块if、for、switch以来一直在快速演进v21.1 又新增了两类写法switch块中连续堆叠的case语句fallthrough case多个条件共享同一个分支体模板表达式中数组字面量、对象字面量与函数调用参数里的展开元素...。在 Prettier 3.7 及更早版本中前者会直接抛出解析错误后者则会被“原样保留”而不做任何规范化。3.8 通过升级底层angular-html-parser并调整打印逻辑打印实现让这些写法既能被正确解析也能输出为符合 Prettier 风格规范的格式。亮点一switch 块中连续 case 语句的支持格式化前后对比官方公告给出了完整的输入/输出示例发布公告!-- Input -- switch (userRole) { case (admin) case (moderator) { pWelcome, boss! Full access./p } case (user) { pStandard access/p } default { pGuest view/p } } !-- Prettier 3.7 -- SyntaxError: Incomplete block case. If you meant to write the character, you should use the #64; HTML entity instead. (2:3) !-- Prettier 3.8 -- switch (userRole) { case (admin) case (moderator) { pWelcome, boss! Full access./p } case (user) { pStandard access/p } default { pGuest view/p } }这里有两个值得注意的行为变化解析层面3.7 中连续两个case第一个不带块体被当作“未闭合的块”直接报错错误信息还提示将转义为#64;HTML 实体3.8 起这样的连续 case 写法是合法的。输出层面单引号字符串被规范化为双引号admin→admincase (user) { ... }这类单行写法会被展开成块级格式default同样获得统一的块状缩进。源码实现isSwitchFallthroughCase连续case支持的核心逻辑位于 angular-control-flow-block.jsconst isSwitchCaseBlock (node) node?.kind angularControlFlowBlock (node.name case || node.name default); function isSwitchFallthroughCase(node) { return ( isSwitchCaseBlock(node) node.endSourceSpan node.endSourceSpan.start.offset node.endSourceSpan.end.offset ); }当一个case/default节点的endSourceSpan起始与结束偏移相同即该 case 语句本身不携带块体时它就被判定为 fallthrough case。打印函数 printAngularControlFlowBlock 对这类节点不输出{块体而是让后续同层 case 直接衔接同时 isPreviousBlockUnClosed 负责判断前一个 case 是否“未闭合”fallthrough从而决定当前节点输出前是否补上}。相邻 case 最终会被合并到同一个group中输出配合shouldBreak: true保证每个 case 独占一行。亮点二模板中展开元素Spread的规范化格式化前后对比官方公告提供了组件属性绑定的示例发布公告!-- Input -- MyComponent [array][ ...foo, ...bar] [object]{...bar, ...extra } [call]call( ...baz) / !-- Prettier 3.7 -- MyComponent [array][ ...foo, ...bar] [object]{...bar, ...extra } [call]call( ...baz) / !-- Prettier 3.8 -- MyComponent [array][...foo, ...bar] [object]{ ...bar, ...extra } [call]call(...baz) /3.7 中这些表达式中的多余空白被原样保留3.8 则会输出规范格式数组字面量[ ...foo, ...bar]→[...foo, ...bar]去掉[后的多余空格对象字面量{...bar, ...extra }→{ ...bar, ...extra }对象括号内侧保留一个空格函数调用call( ...baz)→call(...baz)参数括号内不留空格。源码实现复用 JS 的 SpreadElement 打印从源码结构看Angular 模板表达式中的 spread 解析后会被映射为与 JavaScript AST 一致的SpreadElement节点并复用语言 JS 的打印链路estree.js 在SpreadElement分支调用printSpreadElementrest-element.js 统一处理 rest/spread 元素的打印needs-parentheses.js 在需要括号的场景下正确为SpreadElement加括号。也就是说模板内 spread 的排版规则与普通 JavaScript 代码中的...完全一致保证了跨语言的一致性体验。其他变更一属性值为单一模板/字符串字面量时不再换行格式化前后对比官方公告给出了模板字面量绑定属性的示例发布公告!-- Input -- component [property] template literal / !-- Prettier 3.7 -- component [property] template literal / !-- Prettier 3.8 -- component [property] template literal /3.7 会把属性值本身拆到新行导致[property]与反引号之间出现多余空行与缩进3.8 起当属性值是单个模板字面量或字符串字面量时会保持值紧跟等号之后模板字面量内部的换行与缩进原样保留。这对于在模板中书写多行字符串的场景例如 SQL 片段、内联 CSS非常友好。其他变更二Markdown 代码块内格式化 Angular 语法格式化前后对比官方公告给出了angular-ts与angular-html两种围栏语言的示例发布公告!-- Input -- angular-ts Component({ selector: app-root, template: div Welcome to {{ Angular}}! /div, }) export class App {}div Welcome to {{ Angular}}! /divSame as inputComponent({ selector: app-root, template: divWelcome to {{ Angular }}!/div, }) export class App {}divWelcome to {{ Angular }}!/div此前 Markdown 代码块遇到 angular-ts / angular-html 围栏时不做任何处理3.8 起这两个语言标识会被识别并格式化引号统一为双引号、模板字面量中的内插表达式{{ Angular }}被压缩为规范间距、多行标签结构被折叠为单行。 ### 源码实现Markdown 嵌入解析 该能力由 Markdown 语言的嵌入式处理逻辑实现见 [language-markdown/embed.js](https://link.gitcode.com/i/0b8ff006a52000e5c51b4d34aa5aa3df) js if (language angular-ts) { // 使用 TypeScript 解析器处理同时开启 angular 相关嵌入 } else if (language angular-html) { parser angular; }angular-ts走 TypeScript 解析路径Component装饰器、类定义按 TS 规则格式化angular-html则复用 HTML 语言的 Angular 解析器。这也意味着你可以直接在项目文档、博客、注释示例中使用这两种围栏语言让 Prettier 自动保持 Angular 示例代码的风格统一。升级与验证升级方式在项目根目录执行需 Node.js 环境与项目包管理器npm install --save-dev prettier^3.8.0 # 或使用 yarn yarn add --dev prettier^3.8.0快速验证用官方公告中的最小示例验证格式化行为# 将上述 switch 示例保存为 demo.html 后运行 npx prettier demo.html也可以在 playground 源码 对应的在线演示环境中选择 Angular 解析器直接比对 3.7/3.8 输出差异。对于 Markdown 场景确认文件中的代码围栏使用了精确的angular-ts或angular-html语言标识注意不是ts/html否则不会触发嵌入格式化。小结Prettier 3.8 的三类核心变更——连续case支持、模板内 spread 规范化、Markdown 中 Angular 语法格式化——分别解决了 Angular v21.1 新语法的“解析报错”“排版不规范”“文档示例无法格式化”三个问题。从源码看这些能力并非独立实现而是建立在既有架构之上控制流块打印复用 angular-control-flow-block.js 的 span 判断逻辑spread 打印复用语言 JS 的 rest-element.jsMarkdown 嵌入则通过 embed.js 的语言分发完成。对 Angular 开发者而言升级到 3.8 后即可放心使用 v21.1 的连续 case 与 spread 语法并让 Markdown 文档中的 Angular 示例保持与代码库一致的风格。赞分享开发工具格式化CLI【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址https://gitcode.com/gh_mirrors/pr/prettier点击查看免费下载相关推荐WandEnhancer 使用指南免费解锁 Wand 修改器隐藏功能手机端也能远程操作WandEnhancer 使用指南免费解锁 Wand 修改器隐藏功能手机端也能远程操作 如果你在用 Wand前身 WeMod的时候被免费版的功能限制挡开发工具格式化CLIPrettier Markdown 代码块格式化实战angular-ts 语言标签如何触发 Angular 模板与 TypeScript 双重格式化Prettier Markdown 代码块格式化实战angular ts 语言标签如何触发 Angular 模板与 TypeScript 双重格式化 导读 在开发工具格式化CLIPrettier 1.5 发布详解GraphQL、CSS-in-JS 与 JSON 格式化支持Prettier 1.5 发布详解GraphQL、CSS in JS 与 JSON 格式化支持 本篇技术指南基于 Prettier 官方博客的 1.5.0 版开发工具格式化CLI上一篇DiskSpd权威指南Windows存储性能测试的终极利器下一篇TREK 插件面板实操指南装一个第三方插件前必须看清的 5 道边界创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Prettier 3.8 发布：完整支持 Angular v21.1 新语法（连续 @case、模板展开元素与 Markdown 内嵌格式化）
开发工具格式化CLI【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址https://gitcode.com/gh_mirrors/pr/prettier点击查看免费下载Prettier 3.8.0 的发布主题是紧跟 Angular v21.1与该版本同日发布带来的全新模板语法能力连续case语句、模板中数组/对象字面量与函数调用里的展开元素spread elements以及 Markdown 代码块内的 Angular 语法格式化。本篇文章以 官方 3.8.0 发布公告 为骨架结合仓库源码逐条剖析这些能力的实现原理、行为变化与使用方式帮助你快速理解升级到 Prettier 3.8 后 Angular 与 Markdown 格式化行为的变化。导读对使用 Angular 21 及更高版本的开发者来说Prettier 3.8 是一次必须了解的升级它修复了switch块中连续case语句直接报SyntaxError的问题补齐了模板表达式内 spread 语法的规范化输出同时把 Angular 的格式化能力延伸进了 Markdown 代码块angular-ts、angular-html。读完本文你将掌握这些新特性的触发条件、格式化前后行为对比以及对应的源码实现位置方便在实际项目中验证与排查。升级背景Prettier 与 Angular v21.1 的同步节奏官方公告明确指出Prettier 3.8 的目标是“完全支持 Angular v21.1 中刚刚落地的全新特性”。Angular 的模板语法从 v17 引入基于前缀的控制流块if、for、switch以来一直在快速演进v21.1 又新增了两类写法switch块中连续堆叠的case语句fallthrough case多个条件共享同一个分支体模板表达式中数组字面量、对象字面量与函数调用参数里的展开元素...。在 Prettier 3.7 及更早版本中前者会直接抛出解析错误后者则会被“原样保留”而不做任何规范化。3.8 通过升级底层angular-html-parser并调整打印逻辑打印实现让这些写法既能被正确解析也能输出为符合 Prettier 风格规范的格式。亮点一switch 块中连续 case 语句的支持格式化前后对比官方公告给出了完整的输入/输出示例发布公告!-- Input -- switch (userRole) { case (admin) case (moderator) { pWelcome, boss! Full access./p } case (user) { pStandard access/p } default { pGuest view/p } } !-- Prettier 3.7 -- SyntaxError: Incomplete block case. If you meant to write the character, you should use the #64; HTML entity instead. (2:3) !-- Prettier 3.8 -- switch (userRole) { case (admin) case (moderator) { pWelcome, boss! Full access./p } case (user) { pStandard access/p } default { pGuest view/p } }这里有两个值得注意的行为变化解析层面3.7 中连续两个case第一个不带块体被当作“未闭合的块”直接报错错误信息还提示将转义为#64;HTML 实体3.8 起这样的连续 case 写法是合法的。输出层面单引号字符串被规范化为双引号admin→admincase (user) { ... }这类单行写法会被展开成块级格式default同样获得统一的块状缩进。源码实现isSwitchFallthroughCase连续case支持的核心逻辑位于 angular-control-flow-block.jsconst isSwitchCaseBlock (node) node?.kind angularControlFlowBlock (node.name case || node.name default); function isSwitchFallthroughCase(node) { return ( isSwitchCaseBlock(node) node.endSourceSpan node.endSourceSpan.start.offset node.endSourceSpan.end.offset ); }当一个case/default节点的endSourceSpan起始与结束偏移相同即该 case 语句本身不携带块体时它就被判定为 fallthrough case。打印函数 printAngularControlFlowBlock 对这类节点不输出{块体而是让后续同层 case 直接衔接同时 isPreviousBlockUnClosed 负责判断前一个 case 是否“未闭合”fallthrough从而决定当前节点输出前是否补上}。相邻 case 最终会被合并到同一个group中输出配合shouldBreak: true保证每个 case 独占一行。亮点二模板中展开元素Spread的规范化格式化前后对比官方公告提供了组件属性绑定的示例发布公告!-- Input -- MyComponent [array][ ...foo, ...bar] [object]{...bar, ...extra } [call]call( ...baz) / !-- Prettier 3.7 -- MyComponent [array][ ...foo, ...bar] [object]{...bar, ...extra } [call]call( ...baz) / !-- Prettier 3.8 -- MyComponent [array][...foo, ...bar] [object]{ ...bar, ...extra } [call]call(...baz) /3.7 中这些表达式中的多余空白被原样保留3.8 则会输出规范格式数组字面量[ ...foo, ...bar]→[...foo, ...bar]去掉[后的多余空格对象字面量{...bar, ...extra }→{ ...bar, ...extra }对象括号内侧保留一个空格函数调用call( ...baz)→call(...baz)参数括号内不留空格。源码实现复用 JS 的 SpreadElement 打印从源码结构看Angular 模板表达式中的 spread 解析后会被映射为与 JavaScript AST 一致的SpreadElement节点并复用语言 JS 的打印链路estree.js 在SpreadElement分支调用printSpreadElementrest-element.js 统一处理 rest/spread 元素的打印needs-parentheses.js 在需要括号的场景下正确为SpreadElement加括号。也就是说模板内 spread 的排版规则与普通 JavaScript 代码中的...完全一致保证了跨语言的一致性体验。其他变更一属性值为单一模板/字符串字面量时不再换行格式化前后对比官方公告给出了模板字面量绑定属性的示例发布公告!-- Input -- component [property] template literal / !-- Prettier 3.7 -- component [property] template literal / !-- Prettier 3.8 -- component [property] template literal /3.7 会把属性值本身拆到新行导致[property]与反引号之间出现多余空行与缩进3.8 起当属性值是单个模板字面量或字符串字面量时会保持值紧跟等号之后模板字面量内部的换行与缩进原样保留。这对于在模板中书写多行字符串的场景例如 SQL 片段、内联 CSS非常友好。其他变更二Markdown 代码块内格式化 Angular 语法格式化前后对比官方公告给出了angular-ts与angular-html两种围栏语言的示例发布公告!-- Input -- angular-ts Component({ selector: app-root, template: div Welcome to {{ Angular}}! /div, }) export class App {}div Welcome to {{ Angular}}! /divSame as inputComponent({ selector: app-root, template: divWelcome to {{ Angular }}!/div, }) export class App {}divWelcome to {{ Angular }}!/div此前 Markdown 代码块遇到 angular-ts / angular-html 围栏时不做任何处理3.8 起这两个语言标识会被识别并格式化引号统一为双引号、模板字面量中的内插表达式{{ Angular }}被压缩为规范间距、多行标签结构被折叠为单行。 ### 源码实现Markdown 嵌入解析 该能力由 Markdown 语言的嵌入式处理逻辑实现见 [language-markdown/embed.js](https://link.gitcode.com/i/0b8ff006a52000e5c51b4d34aa5aa3df) js if (language angular-ts) { // 使用 TypeScript 解析器处理同时开启 angular 相关嵌入 } else if (language angular-html) { parser angular; }angular-ts走 TypeScript 解析路径Component装饰器、类定义按 TS 规则格式化angular-html则复用 HTML 语言的 Angular 解析器。这也意味着你可以直接在项目文档、博客、注释示例中使用这两种围栏语言让 Prettier 自动保持 Angular 示例代码的风格统一。升级与验证升级方式在项目根目录执行需 Node.js 环境与项目包管理器npm install --save-dev prettier^3.8.0 # 或使用 yarn yarn add --dev prettier^3.8.0快速验证用官方公告中的最小示例验证格式化行为# 将上述 switch 示例保存为 demo.html 后运行 npx prettier demo.html也可以在 playground 源码 对应的在线演示环境中选择 Angular 解析器直接比对 3.7/3.8 输出差异。对于 Markdown 场景确认文件中的代码围栏使用了精确的angular-ts或angular-html语言标识注意不是ts/html否则不会触发嵌入格式化。小结Prettier 3.8 的三类核心变更——连续case支持、模板内 spread 规范化、Markdown 中 Angular 语法格式化——分别解决了 Angular v21.1 新语法的“解析报错”“排版不规范”“文档示例无法格式化”三个问题。从源码看这些能力并非独立实现而是建立在既有架构之上控制流块打印复用 angular-control-flow-block.js 的 span 判断逻辑spread 打印复用语言 JS 的 rest-element.jsMarkdown 嵌入则通过 embed.js 的语言分发完成。对 Angular 开发者而言升级到 3.8 后即可放心使用 v21.1 的连续 case 与 spread 语法并让 Markdown 文档中的 Angular 示例保持与代码库一致的风格。赞分享开发工具格式化CLI【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址https://gitcode.com/gh_mirrors/pr/prettier点击查看免费下载相关推荐WandEnhancer 使用指南免费解锁 Wand 修改器隐藏功能手机端也能远程操作WandEnhancer 使用指南免费解锁 Wand 修改器隐藏功能手机端也能远程操作 如果你在用 Wand前身 WeMod的时候被免费版的功能限制挡开发工具格式化CLIPrettier Markdown 代码块格式化实战angular-ts 语言标签如何触发 Angular 模板与 TypeScript 双重格式化Prettier Markdown 代码块格式化实战angular ts 语言标签如何触发 Angular 模板与 TypeScript 双重格式化 导读 在开发工具格式化CLIPrettier 1.5 发布详解GraphQL、CSS-in-JS 与 JSON 格式化支持Prettier 1.5 发布详解GraphQL、CSS in JS 与 JSON 格式化支持 本篇技术指南基于 Prettier 官方博客的 1.5.0 版开发工具格式化CLI上一篇DiskSpd权威指南Windows存储性能测试的终极利器下一篇TREK 插件面板实操指南装一个第三方插件前必须看清的 5 道边界创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考