Create React App搭建DApp时eslint加载prettier插件失败求助

• 清理冲突依赖
  首先卸载错误安装的不兼容包，删除手动添加的低版本eslint配置：

npm uninstall eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-import

打开package.json文件，删除手动写入的"eslint": "^5.8.0"配置项。

• 安装适配版本的校验依赖
  安装和create-react-app默认配置兼容的prettier相关依赖：

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier@latest

• 调整.eslintrc.js配置
  替换原有.eslintrc.js内容为以下配置，解决ES module语法不支持、规则冲突问题：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    "react-app",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error"
  }
}

• 新增prettier规则配置
  在项目根目录新建.prettierrc文件，写入以下配置统一格式规则，避免无意义的格式报错：

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}

• 清理缓存验证修复
  删除本地缓存后重启开发服务验证问题是否解决：

rm -rf node_modules/.cache
npm start

如果仍有报错，删除node_modules文件夹和package-lock.json文件后重新执行npm install即可。

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