开发工具格式化CLI【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址https://gitcode.com/gh_mirrors/pr/prettier点击查看免费下载导读本篇以 Prettier 仓库中 tests/format/markdown/code/mdn-font-face-1.md 测试用例为主线深入剖析 Prettier 如何对 Markdown 文档内嵌的font-faceCSS 代码块进行格式化包括围栏代码块的解析、CSS 内嵌解析器的自动推断、src多候选字体源列表的换行与缩进规则以及测试快照如何验证这些行为。读完本文你将掌握 Prettier 处理 Markdown 内嵌代码块的完整调用链并能独立复现、验证这类格式化的输出结果。一、测试用例与输入结构1.1 输入文件形态mdn-font-face-1.md 是一个典型的脏输入——文件开头有 3 个空行随后是一个围栏代码块其中font-face规则的内容故意写得参差不齐font-face { font-family: HeydingsControlsRegular; src: url(fonts/heydings_controls-webfont.eot); src: url(fonts/heydings_controls-webfont.eot?#iefix) format(embedded-opentype), url(fonts/heydings_controls-webfont.woff) format(woff), url(fonts/heydings_controls-webfont.ttf) format(truetype); font-weight: normal; font-style: normal; }这些脏点分别对应 Prettier 要修复的几类问题输入问题所在位置Prettier 的修复策略代码块外多余空行文件开头 3 个空行代码块前仅保留一个空行见快照输出src声明缩进不一致第二行src前有 10 个空格统一为 2 空格缩进重复的src声明规则内出现两次src保留原样不做合并CSS 语义由作者负责url()列表不换行、缩进混乱第二、三个url()顶格或缩进 4 空格按printWidth折行并统一为 4 空格缩进url()与format()间多余空格format(truetype)前有 6 个空格压缩为单个空格font-style未缩进顶格书写统一为 2 空格缩进代码块围栏内首行空行 后有 1 个空行删除空行代码块紧跟围栏1.2 测试驱动方式该测试由 format.test.js 驱动它只写了一行runFormatTest(import.meta, [markdown], { proseWrap: always });即对code目录下的所有.md文件使用markdown解析器、proseWrap: always配置进行格式化测试并将结果与__snapshots__/format.test.js.snap中的快照比对。二、格式化输出逐行对照快照mdn-font-face-1.md的快照位于 format.test.js.snap其格式化输出为font-face { font-family: HeydingsControlsRegular; src: url(fonts/heydings_controls-webfont.eot); src: url(fonts/heydings_controls-webfont.eot?#iefix) format(embedded-opentype), url(fonts/heydings_controls-webfont.woff) format(woff), url(fonts/heydings_controls-webfont.ttf) format(truetype); font-weight: normal; font-style: normal; }对比输入可以总结出 Prettier 的格式化规律属性名缩进统一为 2 空格font-family、src、font-weight、font-style全部对齐属性值在超宽时按 printWidth 折行第二个url(...)与format(embedded-opentype)因超出 80 列被拆成两行且format()继续缩进 4 格在 4 空格缩进基础上再加 2 格同一列表项内的多余空格被压缩url(...) format(...)压缩为单个空格多个url()候选源保持逗号分隔并各占一行每项缩进 4 空格保留字面语义重复的src声明不会被删除或合并——Prettier 只做格式化不做语义重构。姊妹用例mdn-font-face-2.md同目录下的 mdn-font-face-2.md 覆盖了 CSSfont-face的另一种语法tech()函数与format()并存。其输入中src一行极长font-face { font-family: Bungee Spice; src: url(https://fonts.googleapis.com/css2?familyBungeeSpice) tech(color-COLRv1), url(Bungee-fallback.otf) format(opentype); }快照输出format.test.js.snap 起将其折行为font-face { font-family: Bungee Spice; src: url(https://fonts.googleapis.com/css2?familyBungeeSpice) tech(color-COLRv1), url(Bungee-fallback.otf) format(opentype); }这里可以看到 Prettier 对 CSS Values 4 的tech()修饰符同样支持tech(color-COLRv1)会被折行并缩进对齐。三、底层原理Markdown 内嵌代码块的调用链要理解上述输出是怎么产生的需要看 Prettier 处理 Markdown 的三个关键环节。3.1 代码块类型判定与嵌入embedMarkdown 解析后代码块节点分为两类围栏代码块css形式与缩进代码块4 空格缩进形式。Prettier 在 src/language-markdown/embed.js 中处理code节点若节点isIndented为真缩进代码块或没有lang语言标注则直接返回、不嵌入解析器原样保留内容若声明了语言则通过inferParser(options, { language })推断对应的解析器推断成功后返回一个异步函数调用textToDoc(codeValue, { parser })将代码块内容交给对应语言的解析器打印机得到文档树再包上围栏标记输出。这就是Markdown 中内嵌 CSS/JS/HTML 都会被对应语言格式化的机制来源。3.2 语言推断inferParsersrc/utilities/infer-parser.js 中inferParser依次尝试按语言名称匹配getLanguageByLanguageName支持name/aliases/extensions见同文件 L38-L48按文件名匹配getLanguageByFileName按自定义 isSupported 回调匹配最后才尝试 shebang 解释器推断。对css围栏language: css会命中language-css语言的parsers数组中的第一个解析器postcss。另外 embed.js 对angular-ts、angular-html做了特殊映射对ts/tsx则覆盖filepath为dummy.ts/dummy.tsx见 L37-L41以保证类型参数尾逗号行为正确。3.3 围栏样式与代码块打印src/language-markdown/print/code.js 负责最终渲染printCodeFencesL10-L24计算围栏字符默认若代码内容中出现连续反引号则用getMaxContinuousCount检测最大连续个数并增加围栏长度防止围栏被内容撑破printCodeL46-L58区分缩进代码块用 4 空格align对齐与围栏代码块调用printFencedCodeBlockprintFencedCodeBlockL26-L44组装围栏 lang meta 内容 围栏其中replaceEndOfLine统一换行符。注意在 embed 流程中代码内容是以内部文档doc形式交给textToDoc递归格式化的因此 CSS 打印机的缩进、折行规则会完整作用于font-face内部。四、font-face的 CSS 打印细节4.1 src 声明的折行行为CSS 打印逻辑位于 src/language-css/print/css-declaration.js。src的值是一个以逗号分隔的url()列表value-comma_group节点Prettier 会将其放入可折行的 group 中整行未超过printWidth默认 80时所有url()保持一行超宽时在每个逗号后折行每个列表项缩进 4 格相对声明缩进再加 2 格url()与format()/tech()作为同一个列表项的组成部分若该项本身超宽如第二个候选源会在url()后折行format()/tech()再缩进 2 格。这正是快照中src:后url(...).eot?#iefix与format(embedded-opentype)分处两行、且后者缩进更深的来源。4.2 多余的空白CSS 解析阶段postcss 解析器会记录 token 之间的空白。打印阶段对url()与format()之间的多空格统一压缩为单空格对声明前的多余缩进则由声明打印逻辑统一重置为 2 空格基准。五、如何复现与验证在仓库根目录执行需先安装依赖yarn lint tests/format/markdown/code/mdn-font-face-1.md或运行该目录的完整快照测试yarn jest tests/format/markdown/code/format.test.js也可以直接用 CLI 格式化文件并观察输出yarn prettier tests/format/markdown/code/mdn-font-face-1.md --writeCLI 模式下的实际输出与 format.test.js.snap 的快照一致可作为手工验证手段。六、小结mdn-font-face-1.md这一测试用例完整展示了 Prettier 对 Markdown 内嵌 CSS 的三层能力解析层通过lang标注自动推断 CSS 解析器并嵌入src/language-markdown/embed.js打印层CSS 打印机对font-face的声明缩进、src多候选源折行、多余空白压缩src/language-css/print/css-declaration.js验证层快照测试锁定输出行为防止回归format.test.js.snap。对使用 Markdown 书写技术文档、且文档中嵌有 CSSfont-face规则的开发者而言这意味着只要把代码块标注为cssPrettier 就能自动完成src候选字体源的排版、缩进与折行无需手工对齐。同目录下其余mdn-*.md用例如mdn-background-1.md、mdn-filter-1.md、mdn-padding-1.md、mdn-transform.md、mdn-unicode-range.md等覆盖了更多 CSS 属性与语法形态可作为进一步研究 CSS 格式化行为的测试语料库。赞分享开发工具格式化CLI【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址https://gitcode.com/gh_mirrors/pr/prettier点击查看免费下载相关推荐Prettier 如何格式化 Markdown 代码块内的 CSS以 font-face 与 unicode-range 为例Prettier 如何格式化 Markdown 代码块内的 CSS以 font face 与 unicode range 为例 本文以 Prettier 仓开发工具格式化CLIBiome Markdown 格式化器如何保护围栏代码块中的 CSS 内容以 mdn-font-face-1 测试用例为线索的源码级解析Biome Markdown 格式化器如何保护围栏代码块中的 CSS 内容以 mdn font face 1 测试用例为线索的源码级解析 本篇文章以 Biom开发工具Lint格式化静态分析代码质量前端Prettier 格式化 Markdown 内嵌 CSS 代码块以 mdn-transform 测试夹具为实例的深度解析Prettier 格式化 Markdown 内嵌 CSS 代码块以 mdn transform 测试夹具为实例的深度解析 本篇技术指南以 Prettier 仓开发工具格式化CLI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考