如何配置Prettier避免破坏@typescript-eslint/key-spacing规则？

问题场景 #

用Prettier格式化TypeScript接口后，代码变成这样：

export interface ListIconProps {
  icon:
    | (OverridableComponent<SvgIconTypeMap<{}, 'svg'>> & { muiName: string })
    | (() => JSX.Element)
  primary?: boolean
}

但ESLint的@typescript-eslint/key-spacing规则报错，提示icon键的冒号前缺少空格（实际是换行后Prettier未处理好空格），之前在eslint.js中添加例外没有效果。

解决方案 #

• 直接配置Prettier的keySpacing规则
  在项目的.prettierrc（或.prettierrc.json、prettier.config.js等配置文件）中添加keySpacing配置，对齐ESLint的默认规则：

  {
    "keySpacing": {
      "beforeColon": false,
      "afterColon": true
    }
  }
  

  这个设置要求键与冒号之间无空格，冒号与值之间必须有空格，完全匹配@typescript-eslint/key-spacing的默认要求。

• 同步ESLint与Prettier的规则联动
  如果你使用了eslint-config-prettier和eslint-plugin-prettier，检查ESLint配置文件（比如.eslintrc.js），确保配置正确，让ESLint用Prettier的规则来格式化，避免两边规则冲突：

  module.exports = {
    extends: [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier", // 禁用ESLint中与Prettier冲突的规则
      "plugin:prettier/recommended" // 把Prettier规则作为ESLint错误提示
    ],
    plugins: ["@typescript-eslint", "prettier"],
    rules: {
      "prettier/prettier": "error"
    }
  };
  

• 调整Prettier的换行阈值
  要是因为icon的类型太长导致Prettier强制换行才出现的问题，可以适当调大printWidth的值，让类型尽量在一行显示，减少换行带来的空格问题：

  {
    "printWidth": 120
  }
  

内容的提问来源于stack exchange，提问作者Jay