Prettier vs. Linters

代码检查工具（Linters）的规则主要分为两类：

格式化规则：例如：

  • https://eslint.org/docs/rules/max-len（最大行长度限制）
  • https://eslint.org/docs/rules/no-mixed-spaces-and-tabs（禁止混用空格和制表符）
  • https://eslint.org/docs/rules/keyword-spacing（关键字间距规范）
  • https://eslint.org/docs/rules/comma-style（逗号位置风格）

Prettier 完全替代这类规则！它通过彻底重排版消除人工失误：

// 原始混合格式（空格/制表符混用）
const badFormatting = {  key1 :'value1',	key2: 'value2' }; 

// Prettier 自动转换为：
const cleanFormatting = {
  key1: "value1",
  key2: "value2",
};

代码质量规则：例如：

  • https://eslint.org/docs/rules/no-unused-vars（未使用变量检测）
  • https://eslint.org/docs/rules/no-extra-bind（多余的bind调用检查）
  • https://eslint.org/docs/rules/no-implicit-globals（隐式全局变量防护）
  • https://eslint.org/docs/rules/prefer-promise-reject-errors（Promise错误处理优化）

Prettier 不处理这类规则。这些才是Linters的核心价值所在：

  // Linter 可捕获的代码缺陷示例：
  function problematicCode() {
   let unusedVar = 42;  // no-unused-vars 规则将警告
  
    // no-extra-bind 规则将报警告
    const boundFn = (() => this).bind({}); 
  }

核心结论

  1. 职责分离
    ✅ Prettier = 自动化代码格式化工具
    ✅ Linters = 逻辑缺陷检测工具

  2. 协作模式

  3. 配置实践
    推荐组合方案：

    // .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier" // 使用 eslint-config-prettier 禁用冲突规则
  ],
  rules: {
    "no-unused-vars": "error", // 保留质量规则
    // 所有格式化规则由 Prettier 接管
  }
}

总结

维度PrettierLinters
核心职责代码视觉呈现一致性逻辑正确性与潜在缺陷检测
规则类型纯格式化规则质量规则 + 部分格式化规则
处理方式彻底重排版 (AST级重构)静态分析 (基于规则扫描)
协作关系应先于Linter执行依赖Prettier预处理格式
错误类型不产生程序错误发现运行时潜在缺陷

黄金实践：
对现代项目应同时配置 Prettier（.prettierrc）和 ESLint（.eslintrc），通过以下分工实现代码健康：

  1. Prettier 在提交时自动统一格式
  2. Linter 在编译阶段捕获实质错误
  3. 通过 eslint-config-prettier 禁用 ESLint 中与 Prettier 冲突的格式规则
最后更新: