针对"@antfu/eslint-config": "^4.17.0"最新版本使用报错Unexpected token 'with'的解决方法

一、出现背景

搭建新项目时，按照antfu/eslint-config: Anthony's ESLint config preset (github.com) 官网文档进行安装依赖，

pnpm dlx @antfu/eslint-config@latest

安装相关依赖版本如下：

json 复制代码

//package.json
  "devDependencies": {
    "eslint": "^9.31.0",
    "@antfu/eslint-config": "^4.17.0",
    "vue-tsc": "^2.2.12",
    "@types/node": "^24.0.15",
  },
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix --debug | cat",
  },

eslint配置如下：

js 复制代码

import antfu from '@antfu/eslint-config'
export default [
  {
    ignores: [
      '**/node_modules/**',
      '**/dist/**',
      '**/*.d.ts',
      'vite.config.*',
    ],
  },
  ...antfu({
    vue: true,
    typescript: true,
  }),
]

在终端执行：pnpm lint:fix报错如下：

less 复制代码

Oops! Something went wrong! :(

ESLint: 9.31.0

SyntaxError: Unexpected token 'with'
    at DefaultModuleLoader.moduleStrategy (node:internal/modules/esm/translators:116:18)
    at DefaultModuleLoader.moduleProvider (node:internal/modules/esm/loader:190:14)

二、分析问题

定位node:internal/modules/esm/translators:116:18找不到此文件；
我的项目中没有 with 代码，只有 node_modules 里面有，但问题1定位不到该代码，并且我也把检查 node_modules 给忽略了。
执行eslint --fix --debug | cat也没有任何有用的debug文件信息。
从头开始找问题啊，自己检查也借助trae,cursor检查，找 package.json ，检查 husky ，检查 lint-stage ，检查来检查去还是报一样的错。
但cursor定位到"@antfu/eslint-config": "^4.17.0" 这个新版依赖包的问题。。。。
注释掉这个依赖包，发现eslint不报错了。。。。。。。臣妾此生分明了。。。。。
解决方案有两个，一个不用这个包，一个坚持用，当然选择了坚持用所以有了这篇文档啊。
去官网找有没有相同的问题，一下子啊，很快啊就搜到了。

SyntaxError: Unexpected token 'with' when linting on node 20.9.0 · Issue #710 · antfu/eslint-config (github.com)

三、问题解决

使用 nvm 安装node v22版本，重新进行pnpm lint:fix命令后，即不报错。在源代码仓库里面，5个月前就更新了node的使用版本，但在使用文档中，没有写清node的版本要求。当然文档说了要看每一次的change log，但着急也没看啊，，没看到。。

node版本从20改到22。

四、反思

在去官网找issues之前，用ds-r1,claude等ai工具都问遍了啊，问遍了，都没有解决办法，但cursor一步步确实定位到了"@antfu/eslint-config": "^4.17.0"这个新版包的问题，trae_cn一直在来回扯皮。。。cursor虽然没有给出正确的解决方案，但定位问题还是做到了。不能只依赖ai啊，还是得自己认真看官网文档，找issiue解决问题。

claude code终端怎么要花那么多钱啊。