Prettier 文件监听实战用 onchange 实现保存即格式化的自动 watch 工作流【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettierPrettier 官方 CLI 本身并不内置监听文件变化的能力但通过组合 npm 生态中的onchange工具与 Prettier 的--write --ignore-unknown参数你可以在命令行直接搭建一套文件变更即自动格式化的实时工作流。本文以官方文档 docs/watching-files.md 为核心结合 Prettier 仓库源码完整讲解监听命令的写法、{{changed}}占位符的用法、--write与--ignore-unknown的底层行为并给出可直接复制到真实项目中的配置方案。为什么需要监听文件变化Prettier 的典型使用方式是一次性处理整个目录prettier . --write。但在持续开发的场景中你往往希望在每次保存文件的瞬间就自动完成格式化省去手动反复运行命令的麻烦。Prettier 主程序的设计目标是格式化器而非守护进程因此它没有内置 watch 模式官方推荐的做法是引入第三方的文件监听工具onchange由它负责监视文件系统事件再把变化后的文件名回传给 Prettier 执行格式化。官方推荐的监听命令写法在 docs/watching-files.md 中官方给出的最简用法是npx onchange **/* -- npx prettier --write --ignore-unknown {{changed}}逐段拆解这条命令npx onchange **/*通过 npx 直接调用onchange包无需先安装到项目依赖并监听当前目录下所有文件递归匹配**/*。onchange会在文件被新增、修改或删除时触发回调。--分隔符--之后的内容是文件变化时要执行的命令。npx prettier --write --ignore-unknown对变化的文件执行 Prettier 原地格式化。{{changed}}onchange提供的占位符运行时会被替换为实际发生变化的文件路径列表。这一设计使得监听命令只格式化真正变化的文件而不是每次全量扫描整个项目效率更高。也可以把这套命令固化到package.json的scripts中便于团队成员复用{ scripts: { prettier-watch: onchange \**/*\ -- prettier --write --ignore-unknown {{changed}} } }之后只需运行npm run prettier-watch即可进入持续的监听格式化状态。注意在package.json的 scripts 中onchange与prettier都应当已作为项目的devDependencies安装npx同样可用但显式安装后无需每次联网解析包。核心参数一--write原地改写文件--write短别名-w的作用是让 Prettier 直接把格式化结果写回源文件而不是输出到标准输出。这一点在 docs/cli.md 中有明确说明它等同于eslint --fix的工作流。在源码 src/cli/cli-options.evaluate.js 中该选项的定义为write: { alias: w, category: optionCategories.CATEGORY_OUTPUT, description: Edit files in-place. (Beware!), type: boolean, },注意描述中的(Beware!)——--write会直接覆盖你的源文件因此官方在 docs/cli.md 中强烈建议It’s recommended to always make sure thatprettier --write .only formats what you want in your project. Use a.prettierignorefile to ignore things that should not be formatted.具体到监听场景这意味着如果你的项目里有dist/、node_modules/、构建产物等不应被格式化的路径应该通过 .prettierignore 或onchange的排除 glob如onchange **/* !dist/**预先过滤否则一旦这些文件被改动也会被自动重写。核心参数二--ignore-unknown跳过未知类型文件监听**/*时捕获到的文件可能包含图片、二进制、.lock文件等 Prettier 不认识的类型。此时如果直接交给 Prettier会因为找不到对应解析器而报错并导致命令以非零码退出。--ignore-unknown短别名-u正是为此设计的忽略所有 Prettier 无法识别的文件。在 docs/cli.md 中官方给出了等价用法prettier **/* --write --ignore-unknown在源码 src/cli/cli-options.evaluate.js 中该选项被定义为布尔类型并带有-u别名描述为 Ignore unknown files.。它的底层行为可以在 src/cli/format.js 中看到当某个文件抛出的错误是UndefinedParserError即找不到对应解析器时若开启了ignoreUnknown该错误会被静默吞掉并跳过该文件不会中断整个监听进程反之则会输出错误信息并将进程退出码置为 2。这里还有一个值得注意的细节在 src/cli/expand-patterns.js 中当命令行直接传入一个目录而非 glob时Prettier 内部会把目录展开为${prefix}/**/*并自动带上ignoreUnknown: true——也就是说prettier . --write本身就会跳过未知文件。但onchange回调里传入的是具体的文件路径列表这些路径会走 expand-patterns.js 中的文件条目分支不会自动附带ignoreUnknown因此监听场景下必须显式写出--ignore-unknown这正是官方命令示例中两个参数总是同时出现的原因。从源码看监听命令的完整调用链把监听命令展开来看一次文件变化会走通如下链路onchange捕获文件系统事件将变化的文件路径填入{{changed}}。Prettier CLI 解析--write、--ignore-unknown及文件路径参数参数解析见 src/cli/options/parse-cli-arguments.js其中--ignore-unknown会被规范化为ignoreUnknown。src/cli/expand-patterns.js 将传入的路径与 glob 展开为待处理文件列表文件条目单独保留ignoreUnknown标记。src/cli/format.js 遍历文件列表逐文件格式化遇到未知类型时由handleError依据ignoreUnknown决定是跳过还是报错。格式化成功的结果通过--write写回原文件。这套链路保证了监听模式下每次只处理变化的文件、未知类型自动跳过、格式化结果实时落盘且错误不会中断长时间运行的监听进程。进阶建议与.prettierignore、缓存配合监听工作流可以进一步与 Prettier 的其他能力组合配合.prettierignore在 .prettierignore 中声明dist/、build/、coverage/等目录。虽然onchange的 glob 仍然会捕获这些目录下的文件但 Prettier 在执行时会依据 ignore 规则跳过它们ignorePath选项的默认值即包含.prettierignore见 src/cli/cli-options.evaluate.js双保险更稳妥。配合--cache--cache会把格式化结果写入缓存只有内容或元数据变化时才真正重新格式化见 docs/cli.md。在监听场景下缓存能进一步避免对未变化文件的重复处理不过由于{{changed}}已经只传入变化的文件缓存收益主要体现在多文件批量改动时。配合--log-level监听是长时间运行的进程可将日志级别调整为warn或error减少刷屏有效级别为error、warn、log、debug、silent见 src/cli/cli-options.evaluate.js。总结Prettier 通过CLI 外部监听器的组合提供了轻量而强大的文件监听格式化方案。核心命令npx onchange **/* -- npx prettier --write --ignore-unknown {{changed}}只有一行却涵盖了事件监听、路径回传、原地改写与未知文件容错四个关键环节。理解--write与--ignore-unknown在源码层面的真实行为——尤其是目录模式自动忽略未知文件、而文件列表模式必须显式声明--ignore-unknown的差异——能帮助你在真实项目中更自信地部署保存即格式化的开发工作流。【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Prettier 文件监听实战：用 onchange 实现保存即格式化的自动 watch 工作流
Prettier 文件监听实战用 onchange 实现保存即格式化的自动 watch 工作流【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettierPrettier 官方 CLI 本身并不内置监听文件变化的能力但通过组合 npm 生态中的onchange工具与 Prettier 的--write --ignore-unknown参数你可以在命令行直接搭建一套文件变更即自动格式化的实时工作流。本文以官方文档 docs/watching-files.md 为核心结合 Prettier 仓库源码完整讲解监听命令的写法、{{changed}}占位符的用法、--write与--ignore-unknown的底层行为并给出可直接复制到真实项目中的配置方案。为什么需要监听文件变化Prettier 的典型使用方式是一次性处理整个目录prettier . --write。但在持续开发的场景中你往往希望在每次保存文件的瞬间就自动完成格式化省去手动反复运行命令的麻烦。Prettier 主程序的设计目标是格式化器而非守护进程因此它没有内置 watch 模式官方推荐的做法是引入第三方的文件监听工具onchange由它负责监视文件系统事件再把变化后的文件名回传给 Prettier 执行格式化。官方推荐的监听命令写法在 docs/watching-files.md 中官方给出的最简用法是npx onchange **/* -- npx prettier --write --ignore-unknown {{changed}}逐段拆解这条命令npx onchange **/*通过 npx 直接调用onchange包无需先安装到项目依赖并监听当前目录下所有文件递归匹配**/*。onchange会在文件被新增、修改或删除时触发回调。--分隔符--之后的内容是文件变化时要执行的命令。npx prettier --write --ignore-unknown对变化的文件执行 Prettier 原地格式化。{{changed}}onchange提供的占位符运行时会被替换为实际发生变化的文件路径列表。这一设计使得监听命令只格式化真正变化的文件而不是每次全量扫描整个项目效率更高。也可以把这套命令固化到package.json的scripts中便于团队成员复用{ scripts: { prettier-watch: onchange \**/*\ -- prettier --write --ignore-unknown {{changed}} } }之后只需运行npm run prettier-watch即可进入持续的监听格式化状态。注意在package.json的 scripts 中onchange与prettier都应当已作为项目的devDependencies安装npx同样可用但显式安装后无需每次联网解析包。核心参数一--write原地改写文件--write短别名-w的作用是让 Prettier 直接把格式化结果写回源文件而不是输出到标准输出。这一点在 docs/cli.md 中有明确说明它等同于eslint --fix的工作流。在源码 src/cli/cli-options.evaluate.js 中该选项的定义为write: { alias: w, category: optionCategories.CATEGORY_OUTPUT, description: Edit files in-place. (Beware!), type: boolean, },注意描述中的(Beware!)——--write会直接覆盖你的源文件因此官方在 docs/cli.md 中强烈建议It’s recommended to always make sure thatprettier --write .only formats what you want in your project. Use a.prettierignorefile to ignore things that should not be formatted.具体到监听场景这意味着如果你的项目里有dist/、node_modules/、构建产物等不应被格式化的路径应该通过 .prettierignore 或onchange的排除 glob如onchange **/* !dist/**预先过滤否则一旦这些文件被改动也会被自动重写。核心参数二--ignore-unknown跳过未知类型文件监听**/*时捕获到的文件可能包含图片、二进制、.lock文件等 Prettier 不认识的类型。此时如果直接交给 Prettier会因为找不到对应解析器而报错并导致命令以非零码退出。--ignore-unknown短别名-u正是为此设计的忽略所有 Prettier 无法识别的文件。在 docs/cli.md 中官方给出了等价用法prettier **/* --write --ignore-unknown在源码 src/cli/cli-options.evaluate.js 中该选项被定义为布尔类型并带有-u别名描述为 Ignore unknown files.。它的底层行为可以在 src/cli/format.js 中看到当某个文件抛出的错误是UndefinedParserError即找不到对应解析器时若开启了ignoreUnknown该错误会被静默吞掉并跳过该文件不会中断整个监听进程反之则会输出错误信息并将进程退出码置为 2。这里还有一个值得注意的细节在 src/cli/expand-patterns.js 中当命令行直接传入一个目录而非 glob时Prettier 内部会把目录展开为${prefix}/**/*并自动带上ignoreUnknown: true——也就是说prettier . --write本身就会跳过未知文件。但onchange回调里传入的是具体的文件路径列表这些路径会走 expand-patterns.js 中的文件条目分支不会自动附带ignoreUnknown因此监听场景下必须显式写出--ignore-unknown这正是官方命令示例中两个参数总是同时出现的原因。从源码看监听命令的完整调用链把监听命令展开来看一次文件变化会走通如下链路onchange捕获文件系统事件将变化的文件路径填入{{changed}}。Prettier CLI 解析--write、--ignore-unknown及文件路径参数参数解析见 src/cli/options/parse-cli-arguments.js其中--ignore-unknown会被规范化为ignoreUnknown。src/cli/expand-patterns.js 将传入的路径与 glob 展开为待处理文件列表文件条目单独保留ignoreUnknown标记。src/cli/format.js 遍历文件列表逐文件格式化遇到未知类型时由handleError依据ignoreUnknown决定是跳过还是报错。格式化成功的结果通过--write写回原文件。这套链路保证了监听模式下每次只处理变化的文件、未知类型自动跳过、格式化结果实时落盘且错误不会中断长时间运行的监听进程。进阶建议与.prettierignore、缓存配合监听工作流可以进一步与 Prettier 的其他能力组合配合.prettierignore在 .prettierignore 中声明dist/、build/、coverage/等目录。虽然onchange的 glob 仍然会捕获这些目录下的文件但 Prettier 在执行时会依据 ignore 规则跳过它们ignorePath选项的默认值即包含.prettierignore见 src/cli/cli-options.evaluate.js双保险更稳妥。配合--cache--cache会把格式化结果写入缓存只有内容或元数据变化时才真正重新格式化见 docs/cli.md。在监听场景下缓存能进一步避免对未变化文件的重复处理不过由于{{changed}}已经只传入变化的文件缓存收益主要体现在多文件批量改动时。配合--log-level监听是长时间运行的进程可将日志级别调整为warn或error减少刷屏有效级别为error、warn、log、debug、silent见 src/cli/cli-options.evaluate.js。总结Prettier 通过CLI 外部监听器的组合提供了轻量而强大的文件监听格式化方案。核心命令npx onchange **/* -- npx prettier --write --ignore-unknown {{changed}}只有一行却涵盖了事件监听、路径回传、原地改写与未知文件容错四个关键环节。理解--write与--ignore-unknown在源码层面的真实行为——尤其是目录模式自动忽略未知文件、而文件列表模式必须显式声明--ignore-unknown的差异——能帮助你在真实项目中更自信地部署保存即格式化的开发工作流。【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考