全新CRA项目中VSCode里Prettier报错无法格式化问题

问题情况 #

用Create React App（CRA）新建项目后，安装了ESLint、Prettier及兼容插件，ESLint可正常运行，但Prettier无法完成代码格式化，终端报错：

Error: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''

项目package.json配置如下：

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^8.20.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.30.1",
    "prettier": "^2.7.1"
  }
}

解决方法 #

1. 卸载手动安装的eslint-plugin-react
   CRA的react-app ESLint配置已经内置了适配版本的eslint-plugin-react，手动安装的独立版本会和内置版本冲突，导致插件加载时出现参数错误。执行卸载命令：

npm uninstall eslint-plugin-react

2. 确认Prettier运行命令
   使用正确的命令触发Prettier格式化：

npx prettier --write .

3. 保持ESLint配置的正确性
   确保eslintConfig中的extends顺序不变，prettier放在最后，用于覆盖ESLint中与Prettier冲突的规则。

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