SyntaxError：无法加载在“.eslintrc.json”中声明的解析器“@typescript-eslint/parser”» eslint-config-next/core-web-vitals

Question

使用以下配置创建新的 Next.js应用程序后

\n

\xe2\x9c\x94 What is your project named? \xe2\x80\xa6 app\n\xe2\x9c\x94 Would you like to use TypeScript? \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to use ESLint? \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to use Tailwind CSS? \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to use `src/` directory? \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to use App Router? (recommended) \xe2\x80\xa6 No / [Yes]\n\xe2\x9c\x94 Would you like to customize the default import alias? \xe2\x80\xa6 [No] / Yes\n

\n

Webstorm 2023.1.3 抱怨ESLint和Prettier包出现两个错误，这些错误看起来是相关的。

\n

1.ESLint

\n

仅抱怨所有TypeScript XML文件 (.tsx) 上缺少解析器！

\n

ESLint 错误弹出窗口

\n

点击查看更多详情，日志输出：

\n

SyntaxError: Failed to load parser \'@typescript-eslint/parser\' declared in \'.eslintrc.json \xc2\xbb eslint-config-next/core-web-vitals \xc2\xbb /app/node_modules/eslint-config-next/index.js#overrides[0]\': Unexpected token \'?\'\n\n/app/node_modules/typescript/lib/typescript.js:139\n    for (let i = startIndex ?? 0; i < array.length; i++) {\n                             ^\n\nSyntaxError: Unexpected token \'?\'\n    at compileFunction (<anonymous>)\n    at wrapSafe (internal/modules/cjs/loader.js:915:16)\n    at Module._compile (internal/modules/cjs/loader.js:963:27)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)\n    at Module.load (internal/modules/cjs/loader.js:863:32)\n    at Function.Module._load (internal/modules/cjs/loader.js:708:14)\n    at Module.require (internal/modules/cjs/loader.js:887:19)\n    at require (internal/modules/cjs/helpers.js:74:18)\n    at Object.<anonymous> (/app/node_modules/@typescript-eslint/typescript-estree/dist/convert.js:29:25)\n    at Module._compile (internal/modules/cjs/loader.js:999:30)\nProcess finished with exit code -1\n

\n

这是文件中的配置.eslintrc.json：

\n

{\n  "extends": "next/core-web-vitals"\n}\n

\n

2. 更漂亮

\n

使用\n安装prettier包后npm i -D prettier，例如尝试使用Ctrl+Alt+Shift+P快捷方式美化代码\nWebStorm 会对所有文件（.ts、.tsx、.js、.jsx...）抛出错误：

\n

更漂亮的错误弹出窗口

\n

点击查看更多详情，日志输出：

\n

/app/node_modules/prettier/index.cjs:481\n  const comments = node.comments ?? (node.comments = []);\n                                  ^\nSyntaxError: Unexpected token \'?\'\n    at wrapSafe (internal/modules/cjs/loader.js:915:16)\n    at Module._compile (internal/modules/cjs/loader.js:963:27)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)\n    at Module.load (internal/modules/cjs/loader.js:863:32)\n    at Function.Module._load (internal/modules/cjs/loader.js:708:14)\n    at Module.require (internal/modules/cjs/loader.js:887:19)\n    at require (internal/modules/cjs/helpers.js:74:18)\n    at requireInContext (/home/user/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/231.9161.29/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:156:12)\n    at PrettierPlugin.requirePrettierApi (/home/user/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/231.9161.29/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:129:24)\n    at PrettierPlugin.<anonymous> (/home/user/.local/share/JetBrains/Toolbox/apps/WebStorm/ch-0/231.9161.29/plugins/prettierJS/prettierLanguageService/prettier-plugin.js:81:44)\nProcess finished with exit code -1\n

\n

我已经在几个地方搜索了类似的错误，但没有结果。\n尝试过其他 IDE，如 VSCode，没有抛出错误，prettier 可以工作，ESLint 也可以工作。

\n

要重现错误，您可以按照我在描述中提供的说明进行操作。

\n

我尝试过：

\n

\n
1. 对于 ESLint：
\n

\n

\n
• 安装本地版本的@typescript-eslint/parserwith npm i -D @typescript-eslint/parser.
\n
• 通过提供不同的解析器配置来调整 ESLint 配置（在我的例子中@babel/eslint-parser）
\n

\n

\n
2. 对于更漂亮：
\n

\n

\n
• 尝试更改.prettierrc文件配置但没有成功。
\n

\n

在我看来，这两个包的解析器都使用不支持 nullish 合并运算符（< ES2020）的 ECMAScript 版本，但我不知道在哪里可以控制它。\nESLint 的问题似乎是与 Next.js 相关，但在 VSCode 中一切正常。

\n

我犹豫是否要向 Next.js 团队发布问题，因为这看起来是一个更广泛的问题。

\n

Answer 1

对于遇到这个问题的其他人：

\n

经过一周的调查，我终于意识到我在 WebStorm IDE 中默认使用的 Node.js 解析器是 Node.js 12.22.9。

\n

之所以这样，是因为我使用的是 Linux Ubuntu 22.04。在撰写本文时，Ubuntu 22.04 已经预装了 Node.js 版本（是的，请检查您的usr/bin/node）。\nESLint 可能早已放弃对该版本的支持 (lulz)。

\n

因此，如果您想在 WebStorm 上运行闪亮的 linter，我建议您选择以下两件事之一：

\n

\n

1. 卸载 Ubuntu 22.04 附带的预安装 Node.js 版本（这有助于解决终端中运行节点的不匹配问题）并安装nvm软件包，该软件包是 Node.js 版本管理器软件包，用于控制您在计算机上使用的版本项目。为此：

   \n
   \n
   • 卸载 Node.js：sudo apt purge nodejs npm
   \n
   • [如果您已经安装，请忽略此步骤nvm] 安装nvm：（curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash来自nvm）
   \n
   • 在 WebStorm 中选择您想要的节点解释器。打开网络风暴。Ctrl+Alt+S打开设置。转到Languages & Frameworks | Node.js.选择最合适的版本。我选择了为我输出的最后一个版本nvm，在撰写本文时是 v16.13.1。或者，您可以将一个.nvmrc文件添加到项目的根目录并定义您想要的版本 - 这将保持您正在使用的 Node.js 版本的完整性，无论您使用的是什么 IDE 或机器 -非常适合与您的团队协作。
   \n
   \n
\n

2. 只需按照后一点在 WebStorm 中选择合适的 Node.js 版本即可

   \n
\n

\n

Et voil\xc3\xa0、ESLint 和 Prettier 应该可以正常工作。

\n