与代码检查工具集成

代码检查工具（Linters）通常不仅包含代码质量规则，还包含格式规则。使用 Prettier 时，大多数格式规则已不再必要，更糟糕的是——它们可能与 Prettier 冲突！ 应遵循以下原则：

  • Prettier：专责代码格式化
  • 代码检查工具：专注代码质量问题 （详细说明见 https://prettier.io/docs/en/comparison）

解决方案

通过预置配置包可轻松禁用与 Prettier 冲突或不必要的规则：

工具配置包功能说明
ESLinthttps://github.com/prettier/eslint-config-prettier关闭 ESLint 中所有格式化规则
Stylelinthttps://github.com/prettier/stylelint-config-prettier关闭 Stylelint 的格式规则

📘 访问上述链接查看安装和配置指南

扩展方案说明（谨慎使用）

1. 将 Prettier 作为检查规则运行

# 不推荐的主流方案：
npm install eslint-plugin-prettier   # ESLint 插件
npm install stylelint-prettier        # Stylelint 插件

适用场景：
Prettier 早期适用于无独立编辑器集成的环境

缺点：

  1. 编辑器干扰：产生大量红色波浪线（❗️ 破坏 Prettier "无感格式化"的设计理念）
    // 编辑器会标记格式"问题"，实际已被Prettier接管
function example(  param ){...}
  2. 性能损耗：比直接运行 Prettier 更慢
  3. 稳定性风险：增加间接层导致潜在故障点

2. 先格式化后修复

# 特定场景的备选方案：
npm install prettier-eslint     # 先 Prettier 后 ESLint --fix
npm install prettier-stylelint  # 先 Prettier 后 Stylelint --fix

适用场景：
当 Prettier 的输出结果完全无法满足需求时

致命缺点：
⏳ 执行速度比直接运行 Prettier 慢数十倍

总结

方案类型推荐度使用场景核心问题
配置包方案⭐️⭐️⭐️⭐️⭐️新项目/标准配置无显著缺陷
插件方案⚠️ 避免旧系统迁移/无编辑器集成环境编辑器干扰+性能损耗
格式化后修复⚠️ 慎用Prettier输出无法适配特殊需求极慢的执行速度

最佳实践：

  1. 优先使用 eslint-config-prettier/stylelint-config-prettier 关闭冗余规则
  2. 直接运行 prettier --write 配合现代编辑器插件（VS Code 等）
  3. 仅当遇到 Prettier 完全无法适配的特殊场景时，才考虑 prettier-eslint 等方案
最后更新: