WebStorm中Next.js项目ESLint与Prettier报错求助

问题场景 #

按以下配置创建的Next.js项目：

✔ What is your project named? … app
✔ Would you like to use TypeScript? … No / [Yes]
✔ Would you like to use ESLint? … No / [Yes]
✔ Would you like to use Tailwind CSS? … No / [Yes]
✔ Would you like to use `src/` directory? … No / [Yes]
✔ Would you like to use App Router? (recommended) … No / [Yes]
✔ Would you like to customize the default import alias? … [No] / Yes

在WebStorm 2023.1.3中出现两个报错：

• ESLint：仅在.tsx文件提示无法加载@typescript-eslint/parser，日志显示SyntaxError: Unexpected token '?'，当前.eslintrc.json配置为{"extends": "next/core-web-vitals"}
• Prettier：执行npm i -D prettier安装后，用快捷键格式化所有文件，同样报Unexpected token '?'错误

VSCode中无此问题，尝试过本地安装@typescript-eslint/parser、更换ESLint解析器、修改.prettierrc配置均无效，推测是解析器使用了不支持ES2020空值合并运算符的ECMAScript版本。

解决方案 #

1. 切换WebStorm使用的Node.js版本 #

WebStorm默认内置的Node.js版本可能过低（低于v14.0.0，ES2020的空值合并运算符从v14开始支持），需切换到项目本地或全局安装的高版本Node：

• 打开WebStorm设置（File > Settings / WebStorm > Settings）
• 进入Languages & Frameworks > Node.js and NPM
• 在Node interpreter下拉菜单中选择本地项目根目录下的node_modules/.bin/node，或你的全局Node.js安装路径（确保版本≥v14.0.0）
• 若未显示本地版本，点击...按钮手动选择路径

2. 强制ESLint使用项目本地依赖 #

WebStorm可能默认使用全局ESLint，导致和项目依赖版本不兼容：

• 打开设置Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
• 勾选Automatic ESLint configuration，或手动设置ESLint package为项目根目录下的node_modules/eslint
• 确保相关运行选项基于本地依赖

3. 明确ESLint的解析器和ECMAScript版本配置 #

修改.eslintrc.json，指定支持ES2020的解析器：

{
  "extends": "next/core-web-vitals",
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "2020",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

同时安装所需依赖：

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

4. 配置Prettier使用TypeScript解析器 #

创建或修改.prettierrc文件，明确指定解析器：

{
  "parser": "typescript",
  "singleQuote": true,
  "semi": true
}

并确保WebStorm的Prettier使用项目本地包：

• 打开设置Languages & Frameworks > JavaScript > Prettier
• 选择项目根目录下的node_modules/prettier作为Prettier package

5. 清理缓存并重启WebStorm #

旧缓存可能导致配置不生效：

• 点击File > Invalidate Caches...
• 勾选Invalidate and Restart，等待WebStorm重启完成

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