如何通过ESLint结合Prettier修复JSON格式化问题（@eslint/json）

你的配置存在几个关键问题，导致Prettier的格式化规则无法通过ESLint生效：

• 错误指定了language字段为json/json，ESLint v9中JSON语言的正确标识是json
• 未使用@eslint/json提供的专用解析器，默认json解析器无法让Prettier规则正确关联JSON文件
• 手动展开@eslint/json的recommended配置时，未正确继承其语言选项

修改后的ESLint配置 #

// eslint.config.mjs
import eslintJson from '@eslint/json';
import eslintPluginPrettier from 'eslint-plugin-prettier';
import eslintConfigPrettier from 'eslint-config-prettier';

export default [
  // 直接应用@eslint/json的推荐配置，自动处理JSON文件的语言、解析器和语法规则
  eslintJson.configs.recommended,
  // 为JSON文件配置Prettier格式化规则
  {
    files: ['**/*.json'],
    plugins: {
      prettier: eslintPluginPrettier,
    },
    rules: {
      'prettier/prettier': ['error', { parser: 'json' }],
    },
  },
  // 禁用ESLint中与Prettier冲突的规则
  eslintConfigPrettier,
];

配置说明 #

1. 继承@eslint/json推荐配置：无需手动设置language、parser等选项，该配置会自动为JSON文件启用正确的语法检测和解析器
2. 明确Prettier规则的JSON解析器：确保Prettier能正确识别JSON文件格式，触发格式化检查
3. 引入eslint-config-prettier：避免ESLint自带的格式化规则与Prettier产生冲突

验证步骤 #

1. 运行检测命令：eslint ./tests/bad.json，此时会看到Prettier标记的所有格式化错误（如逗号位置、空格、换行等）
2. 运行修复命令：eslint ./tests/bad.json --fix，JSON文件会按照你的.prettierrc配置自动完成格式化

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