前端面试题手册

Prettier 配置文件详解Prettier 支持多种配置文件格式,开发者可以根据项目需求选择合适的配置方式。配置文件类型.prettierrc - JSON 格式配置文件 { "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5" }.prettierrc.json - 显式 JSON 格式 { "printWidth": 80, "tabWidth": 2, "useTabs": false }.prettierrc.js - JavaScript 格式,支持动态配置 module.exports = { semi: true, singleQuote: true, tabWidth: 2, };.prettierrc.cjs - CommonJS 格式 module.exports = { semi: true, singleQuote: true, };prettier.config.js - 项目根目录的配置文件 export default { semi: true, singleQuote: true, };package.json - 在 package.json 中配置 { "prettier": { "semi": true, "singleQuote": true } }常用配置选项printWidth: 指定行宽,默认 80tabWidth: 指定缩进空格数,默认 2useTabs: 是否使用 tab 缩进,默认 falsesemi: 是否在语句末尾添加分号,默认 truesingleQuote: 是否使用单引号,默认 falsetrailingComma: 是否添加尾随逗号,可选 "es5"、"none"、"all"bracketSpacing: 对象字面量括号内是否添加空格,默认 truearrowParens: 箭头函数参数是否使用括号,可选 "always"、"avoid"配置优先级Prettier 会按照以下顺序查找配置文件:package.json 中的 prettier 字段.prettierrc (JSON/YAML).prettierrc.json.prettierrc.yaml.prettierrc.yml.prettierrc.js.prettierrc.cjsprettier.config.jsprettier.config.cjs忽略配置创建 .prettierignore 文件来指定不需要格式化的文件或目录:node_modulesdistbuild*.min.js合理配置 Prettier 可以让团队代码风格保持一致,提高代码可读性和维护性。

Prettier 的缓存机制详解Prettier 2.0+ 版本引入了内置缓存机制,可以显著提高重复格式化的性能,特别是在大型项目中。缓存机制原理Prettier 的缓存基于文件内容和配置的哈希值:首次格式化: 解析文件并格式化,将结果存储在缓存中后续格式化: 比较文件内容和配置的哈希值缓存命中: 如果哈希值相同,直接使用缓存结果缓存未命中: 重新格式化文件并更新缓存使用缓存基本用法:# 启用缓存格式化prettier --write --cache "**/*.js"# 指定缓存目录prettier --write --cache --cache-location .prettier-cache "**/*.js"缓存策略:# 基于内容的缓存(默认)prettier --write --cache --cache-strategy content "**/*.js"# 基于元数据的缓存prettier --write --cache --cache-strategy metadata "**/*.js"缓存配置选项1. cache-location指定缓存文件存储位置:# 默认位置prettier --write --cache "**/*.js"# 自定义位置prettier --write --cache --cache-location .my-cache "**/*.js"# 使用相对路径prettier --write --cache --cache-location node_modules/.cache/prettier "**/*.js"2. cache-strategy选择缓存策略:content: 基于文件内容(默认,更准确但稍慢)metadata: 基于文件元数据(更快但可能不准确)3. 清除缓存# 清除缓存并重新格式化prettier --write --cache --cache-strategy content "**/*.js"# 手动删除缓存目录rm -rf .prettier-cache缓存最佳实践1. CI/CD 环境# GitHub Actions- name: Format with cache run: | prettier --write --cache "**/*.js" # 缓存目录会被自动保存和恢复2. 本地开发# 在 package.json 中配置{ "scripts": { "format": "prettier --write --cache \"src/**/*.js\"", "format:check": "prettier --check --cache \"src/**/*.js\"" }}3. Git Hooks// .husky/pre-commit{ "lint-staged": { "*.{js,jsx,ts,tsx}": [ "prettier --write --cache" ] }}性能对比不使用缓存:# 首次格式化 1000 个文件time prettier --write "**/*.js"# 实际执行: ~5s使用缓存:# 首次格式化 1000 个文件time prettier --write --cache "**/*.js"# 实际执行: ~5s# 第二次格式化(无变化)time prettier --write --cache "**/*.js"# 实际执行: ~0.5s (10x 提升)缓存注意事项1. 配置变更修改 Prettier 配置会自动使缓存失效确保配置文件在版本控制中团队成员使用相同配置2. 文件变更文件内容变化会自动更新缓存删除文件会清理对应缓存重命名文件会重新生成缓存3. 缓存管理定期清理缓存目录在 CI 中缓存 .prettier-cache 目录监控缓存大小故障排查缓存不生效:# 检查缓存目录ls -la .prettier-cache# 清除缓存重新格式化rm -rf .prettier-cacheprettier --write --cache "**/*.js"缓存过大:# 检查缓存大小du -sh .prettier-cache# 清理旧缓存find .prettier-cache -type f -mtime +7 -delete通过合理使用 Prettier 缓存机制,可以显著提高格式化性能,特别是在大型项目中。

Prettier 的版本管理和升级策略Prettier 的版本管理对于保持团队代码风格一致性和利用新功能非常重要。合理的版本管理策略可以避免格式化冲突和团队协作问题。版本锁定1. 在 package.json 中锁定版本{ "devDependencies": { "prettier": "^2.8.0" }}2. 使用精确版本号{ "devDependencies": { "prettier": "2.8.0" }}3. 使用 engines 字段{ "engines": { "node": ">=16.0.0", "npm": ">=8.0.0" }, "devDependencies": { "prettier": "^2.8.0" }}版本升级策略1. 小版本升级 (Patch)# 升级到最新的补丁版本npm update prettier# 或者使用精确版本npm install --save-dev prettier@2.8.12. 次版本升级 (Minor)# 升级到最新的次版本npm install --save-dev prettier@2.9.0# 检查变更日志npm view prettier versions3. 主版本升级 (Major)# 升级到新的主版本(谨慎操作)npm install --save-dev prettier@3.0.0# 查看升级指南# https://prettier.io/docs/en/next/install.html升级前的准备1. 检查变更日志# 查看版本变更npm view prettier versions --json# 查看特定版本的变更npm view prettier@2.8.02. 备份当前配置# 备份配置文件cp .prettierrc .prettierrc.backupcp .prettierignore .prettierignore.backup3. 创建测试分支# 创建升级测试分支git checkout -b upgrade/prettier-2.8.0# 安装新版本npm install --save-dev prettier@2.8.0升级验证1. 检查格式化差异# 查看格式化差异prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}"# 查看具体差异prettier --list-different "**/*.{js,jsx,ts,tsx,json,css,md}"2. 测试格式化# 在测试文件上测试格式化prettier --write test/**/*.js# 比较格式化前后的差异git diff test/3. CI/CD 验证# 在 CI 中验证新版本- name: Test Prettier upgrade run: | npm install --save-dev prettier@2.8.0 npm run format:check回滚策略1. 快速回滚# 回滚到之前的版本npm install --save-dev prettier@2.7.1# 恢复配置文件cp .prettierrc.backup .prettierrc2. Git 回滚# 回滚 package.jsongit checkout HEAD -- package.json package-lock.json# 重新安装依赖npm ci3. 分支管理# 删除升级分支git branch -D upgrade/prettier-2.8.0# 切换回主分支git checkout main团队协作1. 版本统一在 package.json 中锁定版本使用 npm ci 确保依赖一致在 CI 中使用固定版本2. 文档更新在 README 中记录 Prettier 版本更新升级指南通知团队成员版本变更3. 沟通机制在团队会议中讨论升级计划在 PR 中说明版本变更原因提供升级支持最佳实践1. 定期评估每季度评估一次升级关注新功能和修复评估升级风险2. 渐进式升级先在个人项目中测试在小范围团队中试用逐步推广到整个团队3. 自动化检查在 CI 中检查版本一致性使用 Dependabot 自动更新设置版本更新通知4. 记录变更维护版本变更日志记录升级过程中的问题分享升级经验通过合理的版本管理和升级策略,可以确保团队使用一致的 Prettier 版本,避免格式化冲突,提高开发效率。

Prettier 的插件系统和扩展机制Prettier 本身提供了丰富的语言支持,同时也支持通过插件系统扩展其功能,满足特定项目或语言的格式化需求。插件类型1. 语言解析器插件为 Prettier 添加对新语言的支持,例如:@prettier/plugin-php - PHP 语言支持@prettier/plugin-pug - Pug 模板语言支持@prettier/plugin-ruby - Ruby 语言支持@prettier/plugin-swift - Swift 语言支持2. 格式化增强插件扩展现有语言的格式化能力,例如:prettier-plugin-organize-imports - 自动组织 import 语句prettier-plugin-sort-json - 对 JSON 键进行排序prettier-plugin-packagejson - 格式化 package.json 文件插件安装和使用1. 安装插件# 安装 PHP 插件npm install --save-dev @prettier/plugin-php# 安装 import 组织插件npm install --save-dev prettier-plugin-organize-imports2. 配置插件在 .prettierrc 中配置:{ "plugins": [ "@prettier/plugin-php", "prettier-plugin-organize-imports" ]}3. 使用插件格式化# 格式化 PHP 文件prettier --write index.php# 格式化 JavaScript 文件(会自动组织 import)prettier --write index.js自定义插件开发1. 插件结构// my-prettier-plugin/index.jsmodule.exports = { languages: [ { name: "MyLanguage", parsers: ["my-parser"], extensions: [".mylang"], }, ], parsers: { "my-parser": { parse: (text, parsers, options) => { // 解析代码为 AST }, astFormat: "my-ast", }, }, printers: { "my-ast": { print: (path, options, print) => { // 将 AST 转换为格式化后的代码 }, }, },};2. 插件配置{ "plugins": ["./my-prettier-plugin"]}常用插件推荐1. 代码组织类prettier-plugin-organize-imports - 自动组织和排序 importprettier-plugin-sort-imports - 排序 import 语句2. 特定语言类@prettier/plugin-php - PHP 格式化@prettier/plugin-pug - Pug 模板格式化@prettier/plugin-ruby - Ruby 格式化3. 文件增强类prettier-plugin-packagejson - 优化 package.json 格式prettier-plugin-sort-json - 排序 JSON 键4. 框架特定类prettier-plugin-tailwindcss - Tailwind CSS 类名排序prettier-plugin-astro - Astro 框架支持插件最佳实践1. 选择合适的插件评估插件的维护状态和社区活跃度测试插件对项目代码的影响考虑插件与现有工具的兼容性2. 版本管理锁定插件版本避免意外变更定期更新插件以获取最新功能和修复记录插件版本变更3. 性能考虑避免安装过多插件影响性能使用缓存机制提高格式化速度在 CI 中测试插件性能影响4. 团队协作在文档中说明使用的插件确保团队成员安装相同的插件在 CI 中验证插件配置通过合理使用 Prettier 插件,可以扩展其功能,满足各种项目的格式化需求。

Prettier 的性能优化和最佳实践在使用 Prettier 进行大型项目开发时,性能优化和最佳实践对于提高开发效率至关重要。性能优化策略1. 使用 lint-staged 只格式化暂存文件{ "lint-staged": { "*.{js,jsx,ts,tsx,json,css,scss,md}": [ "prettier --write" ] }}2. 配置 .prettierignore 忽略不必要的文件node_modulesdistbuildcoverage*.min.js*.min.csspackage-lock.jsonyarn.lockpnpm-lock.yaml3. 使用缓存机制Prettier 2.0+ 版本内置了缓存功能,可以显著提升重复格式化的速度:npx prettier --write --cache "**/*.{js,jsx,ts,tsx}"4. 限制格式化范围避免格式化整个项目,只格式化修改的文件:npx prettier --write "src/**/*.{js,jsx,ts,tsx}"最佳实践1. 团队统一配置将 .prettierrc 提交到版本控制使用 package.json 的 engines 字段锁定 Node 版本在 README 中说明 Prettier 配置2. 编辑器集成VS Code: 安装 Prettier 扩展,配置 formatOnSaveWebStorm: 内置 Prettier 支持Vim/Neovim: 使用 coc-prettier 或 vim-prettier3. 与 ESLint 协作// .eslintrc.jsmodule.exports = { extends: [ 'eslint:recommended', 'plugin:prettier/recommended' // Prettier 作为 ESLint 规则 ]};4. CI/CD 集成在 PR 检查中添加 Prettier 检查使用 --check 模式而非 --write 模式失败时提供清晰的修复指引5. 版本管理锁定 Prettier 版本避免格式不一致定期更新 Prettier 版本记录版本变更日志常见问题解决1. 格式化冲突使用 eslint-config-prettier 禁用冲突规则定期同步团队配置2. 性能问题使用 --cache 选项减少格式化文件数量升级到最新版本3. 配置继承使用 overrides 为不同文件类型设置不同规则在 monorepo 中使用共享配置包通过遵循这些最佳实践,可以充分发挥 Prettier 的优势,提高团队开发效率和代码质量。

Prettier 的 overrides 配置详解Prettier 的 overrides 配置允许为不同的文件或目录设置不同的格式化规则,这对于多语言项目或需要特殊格式化的文件非常有用。基本语法{ "semi": true, "overrides": [ { "files": "*.css", "options": { "singleQuote": false } } ]}文件匹配模式1. 单一文件扩展名{ "overrides": [ { "files": "*.json", "options": { "tabWidth": 4 } } ]}2. 多个文件扩展名{ "overrides": [ { "files": ["*.css", "*.scss", "*.less"], "options": { "singleQuote": false } } ]}3. 目录匹配{ "overrides": [ { "files": "src/styles/**/*", "options": { "printWidth": 120 } } ]}4. 复杂匹配模式{ "overrides": [ { "files": ["**/*.test.js", "**/*.spec.js"], "options": { "printWidth": 100 } } ]}常见使用场景1. 不同语言的格式化规则{ "semi": true, "singleQuote": true, "overrides": [ { "files": "*.css", "options": { "singleQuote": false } }, { "files": "*.json", "options": { "tabWidth": 4 } }, { "files": "*.md", "options": { "proseWrap": "preserve" } } ]}2. 特定目录的格式化{ "overrides": [ { "files": "legacy/**/*", "options": { "tabWidth": 4, "useTabs": true } }, { "files": "src/**/*", "options": { "tabWidth": 2, "useTabs": false } } ]}3. 测试文件的特殊格式化{ "overrides": [ { "files": ["**/*.test.js", "**/*.spec.js", "**/__tests__/**/*"], "options": { "printWidth": 100, "trailingComma": "all" } } ]}4. 配置文件的特殊处理{ "overrides": [ { "files": [".prettierrc", ".eslintrc", "package.json"], "options": { "tabWidth": 2 } } ]}高级用法1. 排除特定文件{ "overrides": [ { "files": ["**/*.js", "!**/*.min.js"], "options": { "printWidth": 80 } } ]}2. 指定解析器{ "overrides": [ { "files": "*.vue", "options": { "parser": "vue" } }, { "files": "*.mdx", "options": { "parser": "mdx" } } ]}配置优先级文件特定的 overrides 配置优先级最高全局配置作为默认值后定义的 overrides 会覆盖先定义的相同配置合理使用 overrides 可以让 Prettier 在复杂项目中灵活适应不同的格式化需求。

Prettier 的常见问题和解决方案在使用 Prettier 的过程中,开发者可能会遇到各种问题。了解这些常见问题及其解决方案可以帮助更高效地使用 Prettier。配置相关问题1. 配置文件不生效问题: 修改了 .prettierrc 但格式化没有变化解决方案:确认配置文件位置正确(项目根目录)检查配置文件语法是否正确(JSON 格式)使用 prettier --find-config-path <file> 查看实际使用的配置清除编辑器缓存2. 多个配置文件冲突问题: 项目中有多个配置文件,不知道使用哪个解决方案:Prettier 按照特定优先级查找配置文件使用 --config 选项明确指定配置文件删除不需要的配置文件在 .prettierrc 中使用 extends 继承配置格式化相关问题3. 格式化后代码不符合预期问题: 格式化后的代码与预期不符解决方案:检查配置选项是否正确使用 --check 模式查看差异使用 --diff 查看具体变化考虑使用 overrides 为特定文件设置不同规则4. 某些文件不想被格式化问题: 某些文件或目录不想被 Prettier 格式化解决方案:在 .prettierignore 中添加忽略规则使用 --ignore-path 指定自定义忽略文件在代码中使用 // prettier-ignore 注释// prettier-ignoreconst matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9],];性能相关问题5. 格式化速度慢问题: 大项目中格式化速度很慢解决方案:使用 --cache 选项启用缓存配置 .prettierignore 忽略不必要的文件只格式化暂存的文件(lint-staged)升级到最新版本的 Prettier6. 内存占用过高问题: 格式化大量文件时内存占用过高解决方案:分批格式化文件使用 --write 而非 --check 减少内存使用增加系统内存限制考虑使用 CI 环境进行格式化集成相关问题7. 与 ESLint 冲突问题: Prettier 和 ESLint 规则冲突解决方案:安装 eslint-config-prettier 禁用冲突规则在 ESLint 配置中正确设置 extends 顺序使用 eslint-plugin-prettier 将 Prettier 作为 ESLint 规则module.exports = { extends: [ 'eslint:recommended', 'plugin:prettier/recommended' // 必须放在最后 ]};8. Git hooks 不工作问题: pre-commit hook 没有自动格式化代码解决方案:检查 Husky 是否正确安装确认 .husky/pre-commit 文件存在且可执行验证 lint-staged 配置正确检查 Git hooks 是否被启用编辑器相关问题9. 编辑器格式化不一致问题: 不同编辑器格式化结果不同解决方案:确保所有编辑器使用相同的 Prettier 配置在项目中配置 .editorconfig使用项目根目录的配置文件统一编辑器的 Prettier 扩展版本10. VS Code 格式化不工作问题: VS Code 中 Prettier 不自动格式化解决方案:确认安装了 Prettier 扩展检查 settings.json 中的配置确认 editor.formatOnSave 设置为 true验证 editor.defaultFormatter 设置正确版本相关问题11. 版本升级导致格式变化问题: 升级 Prettier 版本后代码格式发生变化解决方案:在 package.json 中锁定 Prettier 版本仔细阅读版本更新日志在单独的分支中测试新版本逐步升级并验证格式变化12. 团队成员使用不同版本问题: 不同团队成员使用不同版本的 Prettier解决方案:使用 engines 字段锁定 Node 版本在 CI 中使用特定版本的 Prettier文档中说明推荐的 Prettier 版本使用 npm ci 确保依赖版本一致通过了解这些常见问题和解决方案,可以更高效地使用 Prettier,减少开发过程中的阻碍。

Prettier 的 ignore 文件配置详解Prettier 的 .prettierignore 文件允许指定不需要格式化的文件和目录,这对于优化性能和避免不必要的格式化非常重要。基本语法.prettierignore 文件使用类似 .gitignore 的语法:# 忽略 node_modules 目录node_modules# 忽略构建产物distbuildout# 忽略特定文件*.min.js*.min.css# 忽略特定目录coverage.next.nuxt# 忽略配置文件package-lock.jsonyarn.lockpnpm-lock.yaml忽略模式1. 目录忽略# 忽略整个目录node_modules# 忽略嵌套目录**/dist# 忽略特定路径的目录src/dist2. 文件扩展名忽略# 忽略所有 .min.js 文件*.min.js# 忽略多个扩展名*.min.js*.min.css*.min.html3. 路径模式# 忽略特定路径下的文件src/temp/*.js# 忽略所有子目录中的文件**/*.test.js# 使用通配符src/**/*.generated.js4. 否定模式# 忽略所有 .js 文件,但保留 src 目录下的*.js!src/**/*.js# 忽略 dist 目录,但保留 dist/publicdist!dist/public常见忽略规则1. 依赖和构建产物node_modulesdistbuildout.next.nuxt.cache2. 压缩文件*.min.js*.min.css*.min.html*.bundle.js3. 测试覆盖率coverage.nyc_output4. 锁定文件package-lock.jsonyarn.lockpnpm-lock.yaml5. 生成的文件*.generated.js*.generated.ts*.d.ts6. 临时文件*.tmp*.temp*.swp高级用法1. 使用自定义 ignore 文件# 指定自定义 ignore 文件prettier --write --ignore-path .prettierignore.custom "**/*.js"2. 禁用默认忽略# 忽略 node_modules 也会被格式化prettier --write --ignore-unknown "**/*.js"3. 命令行指定忽略# 在命令行中指定忽略模式prettier --write "**/*.js" --ignore "node_modules/**"最佳实践1. 性能优化# 忽略大型目录以提高性能node_modulesdistbuildcoverage2. 避免格式化第三方代码# 不格式化第三方库lib/vendorpublic/assets/vendor3. 保护特殊文件# 不格式化需要保持原样的文件*.min.js*.min.css*.bundle.js4. 项目特定规则# 根据项目需求自定义src/generated/**scripts/temp/**常见问题1. ignore 规则不生效检查 .prettierignore 文件位置(应在项目根目录)确认语法正确(类似 .gitignore)使用 --debug-check 查看详细信息2. 想要格式化被忽略的文件# 使用绝对路径绕过 ignore 规则prettier --write /absolute/path/to/file.js# 临时修改 ignore 文件3. 复杂的忽略模式# 组合使用多种模式node_modulesdist**/*.min.js!src/vendor/*.js与其他工具的 ignore 文件1. 与 .gitignore 协作# 可以在 .prettierignore 中引用 .gitignore# 但需要手动复制规则2. 与 ESLint ignore 协作# .eslintignore 和 .prettierignore 可以有不同的规则# 根据工具特性分别配置通过合理配置 .prettierignore,可以优化 Prettier 的性能,避免不必要的格式化,提高开发效率。

Prettier 在团队协作中的应用Prettier 在团队协作中扮演着重要角色,通过强制统一的代码风格,可以有效减少代码审查中的格式争议,提高团队开发效率。团队协作的价值1. 消除风格争议统一代码格式,避免团队成员之间的风格偏好争论减少代码审查时的格式相关评论让开发者专注于代码逻辑而非格式2. 提高代码可读性统一的格式使代码更易于阅读和理解新成员可以更快适应项目代码风格降低代码维护成本3. 自动化流程通过 Git hooks 自动格式化代码在 CI/CD 中强制检查代码格式减少手动格式化的工作量团队配置策略1. 统一配置文件// .prettierrc - 团队统一配置{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", "printWidth": 80, "bracketSpacing": true}2. 配置文件版本控制将 .prettierrc 和 .prettierignore 提交到版本控制确保所有团队成员使用相同的配置在 README 中说明 Prettier 配置3. 编辑器配置统一// .vscode/settings.json - VS Code 团队配置{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }}工作流程集成1. Git Hooks 集成# 使用 Husky 和 lint-stagednpm install --save-dev husky lint-staged prettier# 配置 pre-commit hooknpx husky add .husky/pre-commit "npx lint-staged"2. CI/CD 检查# GitHub Actions- name: Check code format run: npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}"3. Pull Request 模板在 PR 模板中提醒开发者格式化代码:## 提交前检查- [ ] 代码已通过 Prettier 格式化- [ ] 运行 `npm run format:check` 确认格式正确团队最佳实践1. 新成员入职在 onboarding 文档中说明 Prettier 使用方法提供编辑器配置指南安装必要的依赖和插件2. 代码审查流程使用 Prettier 自动格式化,减少审查中的格式讨论在 CI 中强制检查格式,不合格的 PR 不能合并提供清晰的格式化错误提示3. 定期更新定期更新 Prettier 版本评估新的配置选项记录配置变更历史4. 文档维护在 README 中说明 Prettier 配置提供常见问题解答记录团队约定的格式规范解决常见问题1. 配置不一致使用统一的配置文件定期同步团队成员的配置在 CI 中强制使用项目配置2. 性能问题使用 lint-staged 只格式化暂存文件配置 .prettierignore 忽略不必要的文件使用缓存机制提高性能3. 历史代码格式化逐步格式化历史代码,避免大量变更使用 --write 选项批量格式化在单独的 PR 中进行格式化通过合理配置和使用,Prettier 可以显著提升团队协作效率,让团队专注于代码质量而非格式问题。

Prettier 在不同编辑器中的配置Prettier 支持在主流代码编辑器中集成,实现自动格式化和实时预览,提高开发效率。VS Code 配置1. 安装扩展在 VS Code 扩展市场搜索 "Prettier - Code formatter"安装官方 Prettier 扩展2. 基本配置在 .vscode/settings.json 中配置:{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.formatOnType": false, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }}3. 高级配置{ "prettier.requireConfig": true, "prettier.useEditorConfig": false, "prettier.documentSelectors": ["**/*.js", "**/*.ts", "**/*.json"], "prettier.enableDebugLogs": false}WebStorm 配置1. 内置支持WebStorm 内置了 Prettier 支持,无需额外安装2. 配置步骤打开 Settings/Preferences导航到 Languages & Frameworks > JavaScript > Prettier启用 "On 'Reformat Code' action"指定 Prettier 包路径3. 保存时格式化在 Settings > Tools > Actions on Save 中:勾选 "Reformat code"选择 Prettier 作为格式化工具Vim/Neovim 配置1. 使用 coc-prettier" 安装 coc.nvim 和 coc-prettier:CocInstall coc-prettier" 配置自动格式化autocmd BufWritePre *.js,*.jsx,*.ts,*.tsx,*.json :call CocAction('format')2. 使用 vim-prettier" 安装 vim-prettierPlug 'prettier/vim-prettier', { \ 'do': 'yarn install', \ 'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql'] }" 配置let g:prettier#autoformat = 1let g:prettier#exec_cmd_async = 13. 使用 null-ls (Neovim)local null_ls = require("null-ls")null_ls.setup({ sources = { null_ls.builtins.formatting.prettier.with({ extra_args = { "--no-semi", "--single-quote" }, }), },})-- 自动格式化vim.cmd([[autocmd BufWritePre * lua vim.lsp.buf.formatting_sync()]])Sublime Text 配置1. 安装 Package Control通过 Package Control 安装 "JsPrettier"2. 配置在 Preferences > Package Settings > JsPrettier > Settings - User:{ "prettier_cli_path": "/path/to/prettier", "node_path": "/path/to/node", "auto_format_on_save": true, "auto_format_on_save_excludes": ["*.min.js"]}Atom 配置1. 安装插件通过 Atom 设置安装 "prettier-atom"2. 配置在 Settings > Packages > prettier-atom:启用 "Format on Save"配置 Prettier 选项Emacs 配置1. 使用 prettier-emacs(use-package prettier :ensure t :hook ((js-mode . prettier-mode) (typescript-mode . prettier-mode) (json-mode . prettier-mode)) :config (setq prettier-pre-warn nil))通用最佳实践1. 项目级配置在项目根目录创建 .prettierrc确保编辑器使用项目配置将配置文件提交到版本控制2. 编辑器配置管理使用 .editorconfig 统一基本配置在 .vscode/settings.json 中配置 VS Code 特定设置在项目文档中说明编辑器配置3. 团队协作提供编辑器配置指南在 README 中说明推荐配置使用统一的配置文件4. 性能优化只在必要时启用格式化使用缓存机制配置忽略规则常见问题1. 格式化不工作确认 Prettier 已安装检查配置文件路径验证编辑器扩展是否启用2. 配置冲突优先使用项目级配置禁用编辑器默认格式化器检查多个配置文件的优先级3. 性能问题减少自动格式化的触发频率使用增量格式化配置忽略规则通过合理配置编辑器集成,可以充分发挥 Prettier 的优势,提高开发效率。