如何配置ESLint 9.11以支持PHP代码检测？

问题出在哪 #

升级到ESLint 9的扁平配置后，eslint-plugin-php-markup的生效逻辑和旧版不一样，加上FlatCompat兼容层可能打乱了插件的处理顺序，导致PHP代码块被当成JS语法错误来报。

修复步骤 #

1. 更新插件到兼容版本 #

先确保eslint-plugin-html和eslint-plugin-php-markup支持ESLint 9，执行更新命令：

npm update eslint-plugin-html eslint-plugin-php-markup --save-dev

2. 重构eslint.config.mjs配置 #

抛弃FlatCompat兼容层，手写扁平配置，重点调整插件顺序和预处理规则：

import html from "eslint-plugin-html";
import phpMarkup from "eslint-plugin-php-markup";
import globals from "globals";
import js from "@eslint/js";

export default [
  // 基础推荐规则
  js.configs.recommended,
  // 处理PHP/HTML文件的专属配置块
  {
    files: ["**/*.{php,html,htm}"],
    // 插件顺序关键：php-markup要先加载，先处理PHP标记
    plugins: {
      "php-markup": phpMarkup,
      html
    },
    // 启用php-markup的处理器，核心作用是剥离PHP代码后再检测JS
    processor: "php-markup/php",
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2021
      },
      ecmaVersion: "latest",
      sourceType: "script"
    },
    settings: {
      "php-markup": {
        "php-extensions": [".php"],
        "markup-replacement": {
          php: "",
          "=": "0"
        },
        "keep-eol": false,
        "remove-whitespace": false,
        "remove-empty-line": false,
        "remove-php-lint": false
      }
    },
    rules: {
      "no-redeclare": "warn",
      "no-unused-vars": "warn",
      "no-extra-semi": "off",
      "no-empty": "off",
      "no-inner-declarations": "off",
      "no-useless-escape": "off"
    }
  },
  // 单独处理纯JS文件，避免规则冲突
  {
    files: ["**/*.js"],
    ...js.configs.recommended,
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2021
      },
      ecmaVersion: "latest",
      sourceType: "script"
    },
    rules: {
      "no-redeclare": "warn",
      "no-unused-vars": "warn",
      "no-extra-semi": "off",
      "no-empty": "off",
      "no-inner-declarations": "off",
      "no-useless-escape": "off"
    }
  }
];

3. 关键改动说明 #

• 移除FlatCompat兼容层：兼容层容易干扰插件优先级，直接写扁平配置更稳定
• 添加processor配置：processor: "php-markup/php"让插件先剥离PHP代码块，只把内嵌JS交给ESLint检测
• 调整插件顺序：php-markup放在html前面，确保PHP标记预处理先执行
• 拆分配置块：把PHP/HTML和纯JS文件分开配置，避免规则互相干扰

4. 验证修复效果 #

执行ESLint检测PHP文件，确认语法错误提示消失：

npx eslint your-target-file.php

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