Eslint,prettier+airbnb 样式指南，它不会根据我在 .prettierrc 中给出的规则进行格式化

如何解决Eslint,prettier+airbnb 样式指南，它不会根据我在 .prettierrc 中给出的规则进行格式化

这里是 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,es2021: true,},extends: ['airbnb','plugin:prettier/recommended'],parserOptions: {
    ecmaFeatures: {
      jsx: true,ecmaVersion: 12,sourceType: 'module',plugins: ['react'],rules: {
    'react/react-in-jsx-scope': 'off',};

在 .prettierrc 中，我只给出以下样式：

{
    "tabWidth": 4
}

现在，我的代码可以检测错误并使用默认设置自动修复样式问题。但是，它并没有从prettier 中获取任何规则。看起来更漂亮在这里不起作用。 为了给更漂亮的自定义规则，我必须在 .eslintrc.js 中更改规则。通过这样做，我可以使用 tabwith 将代码格式化为 4。谁能帮我弄清楚为什么我以前的方法不起作用。哪个部分我设置不正确？

    rules: {
        'react/react-in-jsx-scope': 'off','prettier/prettier': [
            'error',{
                tabWidth: 4,],

这是我的 package.json 文件：

  "devDependencies": {
    "eslint": "^7.23.0","eslint-config-airbnb": "^18.2.1","eslint-config-prettier": "^8.1.0","eslint-plugin-import": "^2.22.1","eslint-plugin-jsx-a11y": "^6.4.1","eslint-plugin-prettier": "^3.3.1","eslint-plugin-react": "^7.23.1","eslint-plugin-react-hooks": "^4.2.0","prettier": "^2.2.1"
  }