Prettier与ESLint配置冲突及TypeScript项目格式化问题求助

问题背景 #

公司项目原本基于.js文件+ESLint做代码格式化，目前正在逐步迁移到.ts/.tsx文件，仅为这类文件启用Prettier格式化。但TypeScript文件已经配置了专属ESLint规则，加上.prettierrc配置后出现两个核心冲突：

• Prettier会给每行添加分号，但ESLint的@typescript-eslint/member-delimiter-style规则要求类型、接口声明行末尾无需分号
• ESLint中多空行会报错，需要通过Prettier实现相同的校验逻辑

解决方案 #

一、解决分号规则冲突 #

要彻底解决这类格式规则冲突，最稳妥的方式是让ESLint专注代码质量校验，Prettier专注代码格式统一，通过插件整合两者的工作流，避免手动维护冲突规则：

1. 安装必要依赖：

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

2. 修改ESLint配置，在TypeScript文件的extends数组中加入plugin:prettier/recommended，这会自动禁用所有与Prettier冲突的ESLint格式规则，并将Prettier的格式要求转为ESLint错误提示：

overrides: [
  {
    files: ['**/*.{ts,tsx}'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      project: './tsconfig.json',
    },
    extends: [
      'airbnb',
      'plugin:@typescript-eslint/recommended',
      'plugin:import/typescript',
      'plugin:prettier/recommended' // 新增该行
    ],
    rules: {
      ...rules,
      'react/jsx-uses-react': 'off',
      'react/react-in-jsx-scope': 'off',
      '@typescript-eslint/space-before-blocks': 'error',
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/explicit-function-return-type': 'error',
      '@typescript-eslint/no-unsafe-return': 'warn',
      '@typescript-eslint/padding-line-between-statements': [
        'error',
        {
          blankLine: 'always',
          prev: ['interface', 'type'],
          next: '*',
        },
      ],
      // 若仍有冲突，可调整该规则匹配Prettier的分号配置
      '@typescript-eslint/member-delimiter-style': [
        'error',
        {
          multiline: {
            delimiter: 'semi', // 与Prettier的semi:true保持一致
            requireLast: true,
          },
          singleline: {
            delimiter: 'comma',
            requireLast: false,
          },
        },
      ],
      '@typescript-eslint/type-annotation-spacing': 'error',
    },
  }
]

二、多空行校验实现 #

Prettier本身会自动合并连续多个空行为单个空行，默认行为就能满足多空行的格式要求。如果需要在编码阶段就通过ESLint提示多空行问题，同时保证Prettier格式化结果符合要求，可以：

1. 在ESLint规则中保留no-multiple-empty-lines规则，配置允许的最大空行数：

rules: {
  // ...其他规则
  'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }]
}

2. 确保Prettier的格式化行为与该规则一致——Prettier默认会将多余空行合并为一个，无需额外修改.prettierrc配置。只要在保存时自动触发Prettier格式化，就能自动修复多空行问题。

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