VS Code保存代码触发ESLint配置错误：prettier/prettier规则加载失败

你遇到的报错如下：

Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
Occurred while linting G:\quiz-app\src\index.js

根本原因 #

该报错由eslint-plugin-prettier和ESLint的版本不兼容导致：

• context.getPhysicalFilename()是ESLint v7.28.0版本才正式新增的API
• v4.1.0及以上版本的eslint-plugin-prettier会默认调用该API完成规则校验
• 如果你的项目本地安装的ESLint版本低于v7.28.0，就会触发该函数不存在的报错

修复方案 #

• 方案1：升级项目ESLint到符合要求的版本
  执行以下命令安装对应版本依赖即可：

  npm install eslint@^7.28.0 --save-dev
  

  如果你使用yarn或者pnpm，替换为对应包管理工具的安装命令即可。
• 方案2：降级eslint-plugin-prettier到兼容旧版ESLint的版本
  如果你暂时不打算升级ESLint，可以把eslint-plugin-prettier回退到v4.0.0，该版本不会调用新增API：

  npm install eslint-plugin-prettier@4.0.0 --save-dev
  

• 如果依赖更新完成后VS Code仍然报错，可尝试重启ESLint服务：按下ctrl+shift+p呼出命令面板，执行ESLint: Restart ESLint Server即可。

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