Prettier 配置文件完全指南格式优先级、overrides 定制与 EditorConfig 集成【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier本文以 Prettier 官方文档《Configuration File》为核心系统讲解 Prettier 的全部配置文件形态及其查找优先级、配置文件在各目录树中的解析流程并结合当前仓库src/config/下的真实源码深入剖析overrides匹配规则、parser选项的正确用法以及.editorconfig到 Prettier 选项的转换逻辑。读完后你可以为项目选择合适的配置文件格式按文件类型精细定制格式化规则并理解每一项配置在源码中是如何被加载与合并的。配置文件格式与优先级Prettier 支持多种配置文件按优先级从高到低依次为package.json中的prettier键或package.yaml文件中的prettier字段以 JSON 或 YAML 编写的.prettierrc文件.prettierrc.json、.prettierrc.yml、.prettierrc.yaml或.prettierrc.json5文件通过export default或module.exports取决于package.json中的type值导出对象的.prettierrc.js、prettier.config.js、.prettierrc.ts或prettier.config.ts文件通过export default导出对象的.prettierrc.mjs、prettier.config.mjs、.prettierrc.mts或prettier.config.mts文件通过module.exports导出对象的.prettierrc.cjs、prettier.config.cjs、.prettierrc.cts或prettier.config.cts文件.prettierrc.toml文件。这一优先级顺序并非只在文档中约定而是直接体现在源码中。src/config/prettier-config/config-searcher.js 里的CONFIG_FILES数组按完全相同的顺序排列了上述所有候选文件名源码中还留有注释 “Please keep this order sync with docs, docs/configuration.md”说明文档与代码是刻意保持同步的。值得注意的是对package.json/package.yaml源码会先尝试读取其中的prettier字段只有字段存在时该文件才会被视为有效配置filter返回Boolean(await loadConfigFromPackageJson(file))在 src/config/prettier-config/loaders.js 中每种扩展名对应一个加载器.json用parse-json解析.json5用 JSON5.toml用smol-toml.yaml/.yml及无扩展名的.prettierrc则复用 Prettier 自身的 YAML 插件__parsePrettierYamlConfig来解析而.js/.mjs/.cjs/.ts/.mts/.cts统一通过import()动态导入后取module.default一个细节loadConfigFromPackageJson在 Bun 运行时会启用特殊分支readBunPackageJson因为 Bun 允许package.json包含注释和尾逗号纯 JSON 解析失败后会退化为import()加载。配置文件内可用的选项与 API options 完全一致。配置文件的查找流程Prettier 会从被格式化文件所在的位置开始沿目录树逐级向上查找直到找到或找不到配置文件。从源码看入口在 src/config/resolve-config.jsloadPrettierConfig先取path.dirname(path.resolve(file))作为搜索起点再调用searchPrettierConfig定义于 src/config/prettier-config/index.js沿目录树向上查找搜索函数与加载结果均带内存缓存searchCache/loadCache两个MapCLI 批量格式化时可减少重复的文件系统访问。Prettier有意不支持任何形式的“全局配置”。这样做的目的是当项目被拷贝到另一台电脑时Prettier 的行为保持不变从而保证团队里每个人得到一致的格式化结果。TypeScript 配置文件的运行前提使用.ts/.mts/.cts配置文件需要 Node.js ≥ 22.6.0在 Node.js v24.3.0 之前的版本上还需要显式开启类型剥离例如node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write或NODE_OPTIONS--experimental-strip-types prettier . --write外部共享配置与插件路径解析源码中还体现了两个文档未展开、但对配置管理很有用的行为均来自 src/config/prettier-config/load-config.js 与 src/config/resolve-config.js当配置内容是一个字符串时例如package.json里写prettier: my-config-packagePrettier 会把它当作外部配置包或文件加载——先尝试require()失败后再尝试import()见 load-external-config.js。这为多项目共享同一份 Prettier 配置提供了基础配置中plugins数组里的相对路径以.开头会以配置文件所在目录为基准解析为绝对路径配置对象中的$schema字段在加载完成后会被loadConfig主动delete因此写$schema不会影响格式化行为。基础配置示例以下是各格式的最小可用配置与官方文档示例一致JSON// .prettierrc.json or .prettierrc { trailingComma: es5, tabWidth: 4, semi: false, singleQuote: true }JSES Modules// prettier.config.mjs, .prettierrc.mjs, prettier.config.js, or .prettierrc.js /** * type {import(prettier).Config} */ const config { trailingComma: es5, tabWidth: 4, semi: false, singleQuote: true, }; export default config;JSCommonJS// prettier.config.cjs, .prettierrc.cjs, prettier.config.js, or .prettierrc.js /** * type {import(prettier).Config} */ const config { trailingComma: es5, tabWidth: 4, semi: false, singleQuote: true, }; module.exports config;TypeScriptES Modules// prettier.config.mts, .prettierrc.mts, prettier.config.ts, or .prettierrc.ts import { type Config } from prettier; const config: Config { trailingComma: none, }; export default config;TypeScriptCommonJS// prettier.config.cts, .prettierrc.cts, prettier.config.ts, or .prettierrc.ts import { type Config } from prettier; const config: Config { trailingComma: none, }; module.exports config;YAML# .prettierrc, .prettierrc.yml, or .prettierrc.yaml trailingComma: es5 tabWidth: 4 semi: false singleQuote: trueTOML# .prettierrc.toml trailingComma es5 tabWidth 4 semi false singleQuote true如果你希望编辑器对配置文件做 JSON Schema 校验官方在 SchemaStore 提供了prettierrc的 JSON Schema可通过$schema字段引入Prettier 加载配置时会自动移除该字段不影响行为。仓库根目录的 prettier.config.js 就是一个真实的 JS 配置文件实例可以直接参考其写法。使用 overrides 按文件定制配置overrides允许你对特定扩展名、文件夹或具体文件使用不同的配置。JSON// .prettierrc { semi: false, overrides: [ { files: [*.test.js], options: { semi: true } }, { files: [*.html, legacy/**/*.js], options: { tabWidth: 4 } } ] }YAML// .prettierrc semi: false overrides: - files: - *.test.js options: semi: true - files: - *.html - legacy/**/*.js options: tabWidth: 4约束每个 override 必须提供files可以是字符串或字符串数组可选提供excludeFiles用于排除某些文件同样支持字符串或字符串数组。结合源码 src/config/resolve-config.js 可以更精确地理解匹配规则mergeOverrides与pathMatchesGlobs匹配用的是相对路径path.relative(配置文件所在目录, 目标文件)因此overrides中的路径模式是相对于配置文件所在目录计算的模式被分为两类分别处理不含/的模式如*.test.js以basename方式匹配文件名可匹配任意深度含/的模式如legacy/**/*.js则按相对路径完整匹配excludeFiles直接作为 micromatch 的ignore参数传入命中的文件即使匹配了files也不会应用该 override多个 override 按数组顺序依次Object.assign后面的规则会覆盖前面的同名选项。正确设置 parser 选项默认情况下Prettier 根据文件扩展名自动推断要使用的解析器。配合overrides你可以教 Prettier 如何解析它不认识的扩展名。例如为了让 Prettier 格式化它自己的.prettierrc文件// .prettierrc { overrides: [ { files: [.prettierrc], options: { parser: json } } ] }也可以把.js文件的默认babel解析器换成flow// .prettierrc { overrides: [ { files: [*.js], options: { parser: flow } } ] }注意绝不要把parser写在配置的顶层只应在overrides内部使用。否则相当于禁用了 Prettier 基于文件扩展名的自动解析器推断Prettier 会对你指定的所有文件都使用同一个解析器——包括把 CSS 文件当 JavaScript 解析这种毫无意义的情况。与 EditorConfig 集成如果项目里存在.editorconfig文件Prettier 会解析它并把其中的属性转换成对应的 Prettier 配置这些转换后的配置会被.prettierrc等 Prettier 配置文件覆盖在 resolve-config.js 中合并顺序是{ ...editorConfigured, ...mergeOverrides(result, filePath) }即 Prettier 配置在后、优先级更高。需要注意与 EditorConfig 规范不同Prettier 对.editorconfig的搜索到项目根目录就会停止不会继续向上。从源码看项目根由 src/config/find-project-root.js 中的版本控制标记.git文件或.hg目录判定.editorconfig解析src/config/editorconfig/index.js会把该根目录作为root传给解析器。下面是带注释的.editorconfig示例说明各属性如何映射到 Prettier 行为// .editorconfig # 阻止编辑器继续向父目录查找 .editorconfig 文件 # root true [*] # Prettier 不可配置的行为固定行为 charset utf-8 insert_final_newline true # 注意Prettier 不会清理模板字符串内的行尾空白但编辑器可能会。 # trim_trailing_whitespace true # 可配置的 Prettier 行为 # 如果你的 Prettier 配置不同请修改这些值 end_of_line lf indent_style space indent_size 2 max_line_length 80如果使用默认选项可以直接复制下面这份.editorconfig// .editorconfig [*] charset utf-8 insert_final_newline true end_of_line lf indent_style space indent_size 2 max_line_length 80从 src/config/editorconfig/editorconfig-to-prettier.js 的转换实现看映射规则为.editorconfig属性Prettier 选项规则说明indent_style space/tab或indent_size tabuseTabsspace→falsetab→trueindent_size/tab_width正整数tabWidth当useTabs false时优先取indent_size否则取tab_widthmax_line_length正整数 /offprintWidth正整数直接映射off映射为Infinityquote_type single/doublesingleQuote源码注释标明这是未写入 EditorConfig 规范文档的扩展特性end_of_line lf/crlf/crendOfLine三个取值原样透传这些映射有对应的单元测试覆盖见 tests/unit/editorconfig-to-prettier.js例如验证了indent_style: tab时tab_width: 8优先生效、indent_style: space时indent_size生效等边界情况。此外Prettier CLI 提供了editorconfig开关见 src/cli/cli-options.evaluate.js 中的选项定义描述为 “Take .editorconfig into account when parsing configuration”传入--no-editorconfig即可在命令行层面关闭 EditorConfig 参与配置解析CLI 在 src/cli/options/get-options-for-file.js 中会把该开关透传给resolveConfig。小结Prettier 的配置体系可以概括为三层配置文件形态JSON/YAML/TOML/JSON5/JS/TS按固定优先级查找、overrides提供按文件的精细覆盖基于相对于配置目录的 glob 匹配、.editorconfig作为更底层的兜底来源。三者最终在resolveConfig中按 “EditorConfig → Prettier 配置 → 匹配的 overrides” 的顺序合并出每个文件的最终选项。理解了 src/config/ 下的这套查找、加载与合并逻辑后你可以为不同规模的项目选择最合适的配置组织方式并准确预判每条规则的实际生效范围。【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Prettier 配置文件完全指南：格式优先级、overrides 定制与 EditorConfig 集成
Prettier 配置文件完全指南格式优先级、overrides 定制与 EditorConfig 集成【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier本文以 Prettier 官方文档《Configuration File》为核心系统讲解 Prettier 的全部配置文件形态及其查找优先级、配置文件在各目录树中的解析流程并结合当前仓库src/config/下的真实源码深入剖析overrides匹配规则、parser选项的正确用法以及.editorconfig到 Prettier 选项的转换逻辑。读完后你可以为项目选择合适的配置文件格式按文件类型精细定制格式化规则并理解每一项配置在源码中是如何被加载与合并的。配置文件格式与优先级Prettier 支持多种配置文件按优先级从高到低依次为package.json中的prettier键或package.yaml文件中的prettier字段以 JSON 或 YAML 编写的.prettierrc文件.prettierrc.json、.prettierrc.yml、.prettierrc.yaml或.prettierrc.json5文件通过export default或module.exports取决于package.json中的type值导出对象的.prettierrc.js、prettier.config.js、.prettierrc.ts或prettier.config.ts文件通过export default导出对象的.prettierrc.mjs、prettier.config.mjs、.prettierrc.mts或prettier.config.mts文件通过module.exports导出对象的.prettierrc.cjs、prettier.config.cjs、.prettierrc.cts或prettier.config.cts文件.prettierrc.toml文件。这一优先级顺序并非只在文档中约定而是直接体现在源码中。src/config/prettier-config/config-searcher.js 里的CONFIG_FILES数组按完全相同的顺序排列了上述所有候选文件名源码中还留有注释 “Please keep this order sync with docs, docs/configuration.md”说明文档与代码是刻意保持同步的。值得注意的是对package.json/package.yaml源码会先尝试读取其中的prettier字段只有字段存在时该文件才会被视为有效配置filter返回Boolean(await loadConfigFromPackageJson(file))在 src/config/prettier-config/loaders.js 中每种扩展名对应一个加载器.json用parse-json解析.json5用 JSON5.toml用smol-toml.yaml/.yml及无扩展名的.prettierrc则复用 Prettier 自身的 YAML 插件__parsePrettierYamlConfig来解析而.js/.mjs/.cjs/.ts/.mts/.cts统一通过import()动态导入后取module.default一个细节loadConfigFromPackageJson在 Bun 运行时会启用特殊分支readBunPackageJson因为 Bun 允许package.json包含注释和尾逗号纯 JSON 解析失败后会退化为import()加载。配置文件内可用的选项与 API options 完全一致。配置文件的查找流程Prettier 会从被格式化文件所在的位置开始沿目录树逐级向上查找直到找到或找不到配置文件。从源码看入口在 src/config/resolve-config.jsloadPrettierConfig先取path.dirname(path.resolve(file))作为搜索起点再调用searchPrettierConfig定义于 src/config/prettier-config/index.js沿目录树向上查找搜索函数与加载结果均带内存缓存searchCache/loadCache两个MapCLI 批量格式化时可减少重复的文件系统访问。Prettier有意不支持任何形式的“全局配置”。这样做的目的是当项目被拷贝到另一台电脑时Prettier 的行为保持不变从而保证团队里每个人得到一致的格式化结果。TypeScript 配置文件的运行前提使用.ts/.mts/.cts配置文件需要 Node.js ≥ 22.6.0在 Node.js v24.3.0 之前的版本上还需要显式开启类型剥离例如node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write或NODE_OPTIONS--experimental-strip-types prettier . --write外部共享配置与插件路径解析源码中还体现了两个文档未展开、但对配置管理很有用的行为均来自 src/config/prettier-config/load-config.js 与 src/config/resolve-config.js当配置内容是一个字符串时例如package.json里写prettier: my-config-packagePrettier 会把它当作外部配置包或文件加载——先尝试require()失败后再尝试import()见 load-external-config.js。这为多项目共享同一份 Prettier 配置提供了基础配置中plugins数组里的相对路径以.开头会以配置文件所在目录为基准解析为绝对路径配置对象中的$schema字段在加载完成后会被loadConfig主动delete因此写$schema不会影响格式化行为。基础配置示例以下是各格式的最小可用配置与官方文档示例一致JSON// .prettierrc.json or .prettierrc { trailingComma: es5, tabWidth: 4, semi: false, singleQuote: true }JSES Modules// prettier.config.mjs, .prettierrc.mjs, prettier.config.js, or .prettierrc.js /** * type {import(prettier).Config} */ const config { trailingComma: es5, tabWidth: 4, semi: false, singleQuote: true, }; export default config;JSCommonJS// prettier.config.cjs, .prettierrc.cjs, prettier.config.js, or .prettierrc.js /** * type {import(prettier).Config} */ const config { trailingComma: es5, tabWidth: 4, semi: false, singleQuote: true, }; module.exports config;TypeScriptES Modules// prettier.config.mts, .prettierrc.mts, prettier.config.ts, or .prettierrc.ts import { type Config } from prettier; const config: Config { trailingComma: none, }; export default config;TypeScriptCommonJS// prettier.config.cts, .prettierrc.cts, prettier.config.ts, or .prettierrc.ts import { type Config } from prettier; const config: Config { trailingComma: none, }; module.exports config;YAML# .prettierrc, .prettierrc.yml, or .prettierrc.yaml trailingComma: es5 tabWidth: 4 semi: false singleQuote: trueTOML# .prettierrc.toml trailingComma es5 tabWidth 4 semi false singleQuote true如果你希望编辑器对配置文件做 JSON Schema 校验官方在 SchemaStore 提供了prettierrc的 JSON Schema可通过$schema字段引入Prettier 加载配置时会自动移除该字段不影响行为。仓库根目录的 prettier.config.js 就是一个真实的 JS 配置文件实例可以直接参考其写法。使用 overrides 按文件定制配置overrides允许你对特定扩展名、文件夹或具体文件使用不同的配置。JSON// .prettierrc { semi: false, overrides: [ { files: [*.test.js], options: { semi: true } }, { files: [*.html, legacy/**/*.js], options: { tabWidth: 4 } } ] }YAML// .prettierrc semi: false overrides: - files: - *.test.js options: semi: true - files: - *.html - legacy/**/*.js options: tabWidth: 4约束每个 override 必须提供files可以是字符串或字符串数组可选提供excludeFiles用于排除某些文件同样支持字符串或字符串数组。结合源码 src/config/resolve-config.js 可以更精确地理解匹配规则mergeOverrides与pathMatchesGlobs匹配用的是相对路径path.relative(配置文件所在目录, 目标文件)因此overrides中的路径模式是相对于配置文件所在目录计算的模式被分为两类分别处理不含/的模式如*.test.js以basename方式匹配文件名可匹配任意深度含/的模式如legacy/**/*.js则按相对路径完整匹配excludeFiles直接作为 micromatch 的ignore参数传入命中的文件即使匹配了files也不会应用该 override多个 override 按数组顺序依次Object.assign后面的规则会覆盖前面的同名选项。正确设置 parser 选项默认情况下Prettier 根据文件扩展名自动推断要使用的解析器。配合overrides你可以教 Prettier 如何解析它不认识的扩展名。例如为了让 Prettier 格式化它自己的.prettierrc文件// .prettierrc { overrides: [ { files: [.prettierrc], options: { parser: json } } ] }也可以把.js文件的默认babel解析器换成flow// .prettierrc { overrides: [ { files: [*.js], options: { parser: flow } } ] }注意绝不要把parser写在配置的顶层只应在overrides内部使用。否则相当于禁用了 Prettier 基于文件扩展名的自动解析器推断Prettier 会对你指定的所有文件都使用同一个解析器——包括把 CSS 文件当 JavaScript 解析这种毫无意义的情况。与 EditorConfig 集成如果项目里存在.editorconfig文件Prettier 会解析它并把其中的属性转换成对应的 Prettier 配置这些转换后的配置会被.prettierrc等 Prettier 配置文件覆盖在 resolve-config.js 中合并顺序是{ ...editorConfigured, ...mergeOverrides(result, filePath) }即 Prettier 配置在后、优先级更高。需要注意与 EditorConfig 规范不同Prettier 对.editorconfig的搜索到项目根目录就会停止不会继续向上。从源码看项目根由 src/config/find-project-root.js 中的版本控制标记.git文件或.hg目录判定.editorconfig解析src/config/editorconfig/index.js会把该根目录作为root传给解析器。下面是带注释的.editorconfig示例说明各属性如何映射到 Prettier 行为// .editorconfig # 阻止编辑器继续向父目录查找 .editorconfig 文件 # root true [*] # Prettier 不可配置的行为固定行为 charset utf-8 insert_final_newline true # 注意Prettier 不会清理模板字符串内的行尾空白但编辑器可能会。 # trim_trailing_whitespace true # 可配置的 Prettier 行为 # 如果你的 Prettier 配置不同请修改这些值 end_of_line lf indent_style space indent_size 2 max_line_length 80如果使用默认选项可以直接复制下面这份.editorconfig// .editorconfig [*] charset utf-8 insert_final_newline true end_of_line lf indent_style space indent_size 2 max_line_length 80从 src/config/editorconfig/editorconfig-to-prettier.js 的转换实现看映射规则为.editorconfig属性Prettier 选项规则说明indent_style space/tab或indent_size tabuseTabsspace→falsetab→trueindent_size/tab_width正整数tabWidth当useTabs false时优先取indent_size否则取tab_widthmax_line_length正整数 /offprintWidth正整数直接映射off映射为Infinityquote_type single/doublesingleQuote源码注释标明这是未写入 EditorConfig 规范文档的扩展特性end_of_line lf/crlf/crendOfLine三个取值原样透传这些映射有对应的单元测试覆盖见 tests/unit/editorconfig-to-prettier.js例如验证了indent_style: tab时tab_width: 8优先生效、indent_style: space时indent_size生效等边界情况。此外Prettier CLI 提供了editorconfig开关见 src/cli/cli-options.evaluate.js 中的选项定义描述为 “Take .editorconfig into account when parsing configuration”传入--no-editorconfig即可在命令行层面关闭 EditorConfig 参与配置解析CLI 在 src/cli/options/get-options-for-file.js 中会把该开关透传给resolveConfig。小结Prettier 的配置体系可以概括为三层配置文件形态JSON/YAML/TOML/JSON5/JS/TS按固定优先级查找、overrides提供按文件的精细覆盖基于相对于配置目录的 glob 匹配、.editorconfig作为更底层的兜底来源。三者最终在resolveConfig中按 “EditorConfig → Prettier 配置 → 匹配的 overrides” 的顺序合并出每个文件的最终选项。理解了 src/config/ 下的这套查找、加载与合并逻辑后你可以为不同规模的项目选择最合适的配置组织方式并准确预判每条规则的实际生效范围。【免费下载链接】prettierPrettier is an opinionated code formatter.项目地址: https://gitcode.com/gh_mirrors/pr/prettier创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考