面试题手册

Prettier 与 ESLint 的区别和协作Prettier 和 ESLint 是前端开发中常用的两个工具,它们有不同的职责定位,但可以很好地协作使用。主要区别Prettier(代码格式化工具)专注于代码格式化,统一代码风格不进行代码质量检查强制使用统一的代码风格,减少团队争议通过解析 AST 重新生成代码配置选项相对有限,避免过度配置ESLint(代码质量检查工具)专注于代码质量检查和潜在问题发现检查代码错误、最佳实践、代码风格提供大量的规则配置可以自定义规则和插件支持自动修复部分问题协作使用在实际项目中,通常会将 Prettier 和 ESLint 结合使用:安装依赖 npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier配置 ESLint在 .eslintrc.js 中配置: { "extends": [ "eslint:recommended", "plugin:prettier/recommended" ] }配置 Prettier创建 .prettierrc 文件: { "semi": true, "singleQuote": true, "tabWidth": 2 }配置冲突解决使用 eslint-config-prettier 可以禁用所有与 Prettier 冲突的 ESLint 规则,避免重复配置和冲突。最佳实践在团队中统一使用 Prettier 进行代码格式化使用 ESLint 进行代码质量检查在 CI/CD 流程中同时运行两者在编辑器中配置自动格式化和保存时格式化通过合理配置,Prettier 和 ESLint 可以完美协作,既保证代码风格统一,又确保代码质量。

Nginx 的 location 指令如何匹配？优先级是什么？Nginx 的 location 指令用于匹配请求的 URI，并定义如何处理这些请求。理解 location 的匹配规则和优先级对于正确配置 Nginx 至关重要。Location 匹配规则：1. 精确匹配（=）使用 = 进行精确匹配，如果匹配成功，立即停止搜索并使用该 location。location = /exact { # 精确匹配 /exact}2. 前缀匹配（无修饰符）不使用任何修饰符，按前缀匹配，匹配成功后继续搜索更精确的匹配。location /prefix { # 匹配以 /prefix 开头的 URI}3. 正则匹配（~ 和 ~*）~：区分大小写的正则匹配~*：不区分大小写的正则匹配location ~ \.php$ { # 匹配以 .php 结尾的 URI（区分大小写）}location ~* \.(jpg|jpeg|png|gif)$ { # 匹配图片文件（不区分大小写）}4. 前缀匹配（^~）使用 ^~ 进行前缀匹配，如果匹配成功，立即停止搜索，不再检查正则表达式。location ^~ /static/ { # 匹配以 /static/ 开头的 URI，不再检查正则}匹配优先级（从高到低）：精确匹配（=）：优先级最高前缀匹配（^~）：如果匹配成功，停止搜索正则匹配（~ 和 ~*）：按配置顺序依次检查前缀匹配（无修饰符）：优先级最低匹配示例：server { listen 80; server_name example.com; # 1. 精确匹配 location = / { return 200 "Exact match /"; } # 2. ^~ 前缀匹配 location ^~ /images/ { return 200 "Prefix match ^~ /images/"; } # 3. 正则匹配（区分大小写） location ~ \.php$ { return 200 "Regex match .php"; } # 4. 正则匹配（不区分大小写） location ~* \.(jpg|jpeg|png|gif)$ { return 200 "Regex match images"; } # 5. 普通前缀匹配 location / { return 200 "Prefix match /"; }}实际匹配结果：请求 / → 精确匹配 location = /请求 /images/logo.jpg → location ^~ /images/（停止搜索，不匹配正则）请求 /test.php → location ~ \.php$请求 /photo.JPG → location ~* \.(jpg|jpeg|png|gif)$（不区分大小写）请求 /other → location /嵌套 Location：location /api/ { # 外层 location proxy_pass http://backend; location /api/v1/ { # 内层 location，继承外层配置 proxy_pass http://backend_v1; }}使用建议：将精确匹配放在最前面将正则匹配放在中间将普通前缀匹配放在最后使用 ^~ 避免不必要的正则匹配合理使用正则匹配，避免过度使用影响性能性能考虑：精确匹配和 ^~ 匹配性能最好正则匹配需要编译和执行，性能相对较低避免使用复杂的正则表达式正则匹配按配置顺序执行，将常用匹配放在前面实际应用场景：# 静态文件缓存location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable";}# PHP 文件处理location ~ \.php$ { fastcgi_pass unix:/var/run/php/php8.0-fpm.sock; fastcgi_index index.php; include fastcgi_params;}# API 请求代理location /api/ { proxy_pass http://api_backend;}# 管理后台location ^~ /admin/ { auth_basic "Restricted"; auth_basic_user_file /etc/nginx/.htpasswd; proxy_pass http://admin_backend;}

Nginx 如何配置虚拟主机？有哪些配置方式？Nginx 虚拟主机（Virtual Host）允许在同一台服务器上运行多个网站，通过不同的域名、端口或 IP 地址来区分不同的站点。基于域名的虚拟主机：server { listen 80; server_name example.com www.example.com; root /var/www/example.com; index index.html index.php; access_log /var/log/nginx/example.com.access.log; error_log /var/log/nginx/example.com.error.log; location / { try_files $uri $uri/ =404; }}server { listen 80; server_name test.com www.test.com; root /var/www/test.com; index index.html index.php; access_log /var/log/nginx/test.com.access.log; error_log /var/log/nginx/test.com.error.log; location / { try_files $uri $uri/ =404; }}基于端口的虚拟主机：server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; }}server { listen 8080; server_name example.com; root /var/www/example.com/admin; index index.html; location / { try_files $uri $uri/ =404; }}server { listen 8443 ssl; server_name example.com; ssl_certificate /etc/nginx/ssl/example.com.crt; ssl_certificate_key /etc/nginx/ssl/example.com.key; root /var/www/example.com/secure; index index.html; location / { try_files $uri $uri/ =404; }}基于 IP 地址的虚拟主机：server { listen 192.168.1.100:80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; }}server { listen 192.168.1.101:80; server_name example.com; root /var/www/example.com/mirror; index index.html; location / { try_files $uri $uri/ =404; }}通配符域名：# 匹配所有子域名server { listen 80; server_name *.example.com; root /var/www/subdomains; index index.html; location / { # 使用子域名作为目录名 set $subdomain $host; if ($subdomain ~* ^(.*)\.example\.com$) { set $subdomain $1; } root /var/www/subdomains/$subdomain; }}# 匹配所有域名（默认虚拟主机）server { listen 80 default_server; server_name _; root /var/www/default; index index.html; location / { return 404; }}正则表达式域名：server { listen 80; server_name ~^(?<subdomain>.+)\.example\.com$; root /var/www/example.com/$subdomain; index index.html; location / { try_files $uri $uri/ =404; }}server { listen 80; server_name ~^(?<user>.+)\.users\.example\.com$; root /var/www/users/$user; index index.html; location / { try_files $uri $uri/ =404; }}HTTPS 虚拟主机：server { listen 80; server_name example.com; # 重定向到 HTTPS return 301 https://$server_name$request_uri;}server { listen 443 ssl http2; server_name example.com; ssl_certificate /etc/nginx/ssl/example.com.crt; ssl_certificate_key /etc/nginx/ssl/example.com.key; ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers HIGH:!aNULL:!MD5; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; }}多域名共享配置：# 定义共享配置map $host $root_path { example.com /var/www/example.com; test.com /var/www/test.com; default /var/www/default;}server { listen 80; server_name example.com test.com; root $root_path; index index.html; location / { try_files $uri $uri/ =404; }}反向代理虚拟主机：upstream backend1 { server 192.168.1.100:8080; server 192.168.1.101:8080;}upstream backend2 { server 192.168.1.200:8080; server 192.168.1.201:8080;}server { listen 80; server_name api.example.com; location / { proxy_pass http://backend1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }}server { listen 80; server_name admin.example.com; location / { proxy_pass http://backend2; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }}PHP 虚拟主机：server { listen 80; server_name example.com; root /var/www/example.com; index index.php index.html; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { fastcgi_pass unix:/var/run/php/php8.0-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; }}静态站点虚拟主机：server { listen 80; server_name static.example.com; root /var/www/static; index index.html; # 启用 Gzip 压缩 gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/json application/javascript; # 静态资源缓存 location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control "public, immutable"; access_log off; } location / { try_files $uri $uri/ =404; }}虚拟主机配置文件分离：# /etc/nginx/nginx.confhttp { include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*;}# /etc/nginx/sites-available/example.comserver { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; }}# 创建符号链接启用站点# ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com虚拟主机最佳实践：配置文件分离：每个虚拟主机使用独立的配置文件命名规范：使用域名作为配置文件名日志分离：每个虚拟主机使用独立的日志文件默认主机：配置 default_server 处理未知请求SSL 配置：所有生产环境使用 HTTPS错误页面：为每个虚拟主机配置自定义错误页面安全头：添加安全相关的 HTTP 头性能优化：启用 Gzip 压缩和缓存完整虚拟主机配置示例：# /etc/nginx/sites-available/example.comserver { listen 80; server_name example.com www.example.com; # 重定向到 HTTPS return 301 https://$server_name$request_uri;}server { listen 443 ssl http2; server_name example.com www.example.com; # SSL 配置 ssl_certificate /etc/nginx/ssl/example.com.crt; ssl_certificate_key /etc/nginx/ssl/example.com.key; ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers HIGH:!aNULL:!MD5; ssl_session_cache shared:SSL:10m; ssl_session_timeout 10m; # 根目录 root /var/www/example.com; index index.php index.html; # 日志 access_log /var/log/nginx/example.com.access.log; error_log /var/log/nginx/example.com.error.log; # 安全头 add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; # Gzip 压缩 gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/json application/javascript; # 静态资源 location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; access_log off; } # PHP 处理 location ~ \.php$ { fastcgi_pass unix:/var/run/php/php8.0-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } # 主路由 location / { try_files $uri $uri/ /index.php?$query_string; } # 禁止访问隐藏文件 location ~ /\. { deny all; access_log off; log_not_found off; }}

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,减少开发过程中的阻碍。