reactjs - eslintインデントルールが無効になっていない

Question

よりきれいに eslint を連携させようとしています。この記事に従いましたが、インデント ルールに問題がありますjsx。

const ResponseModule = ({ response }) => (
    <div>
        {response.code === 401 ? (
            <div className="response">
                <div className="response-content">
                    <h1> {response.message} </h1>
                    <button onClick={() => initLogout()}> Login to continue </button>
                </div>
            </div>
        ) : null}
    </div>
);

このようなインデントエラーを受け取りました

[eslint] Delete `..` [prettier/prettier]

自動修正を適用すると、これになります

const ResponseModule = ({ response }) => (
  <div>
    {response.code === 401 ? (
      <div className="response">
        <div className="response-content">
          <h1> {response.message} </h1>
          <button onClick={() => initLogout()}> Login to continue </button>
        </div>
      </div>
    ) : null}
  </div>
);

vsコードで保存（CTRL + S）を押すと、最初の形式に戻るだけなので、同じエラーが再び発生します..作業を続行できません..

これは私のeslint設定です

{
  "env": {
    "browser": true
  },
  "extends": [
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "parser": "babel-eslint",
  "rules": {
    "no-tabs": 0,
    "indent": 0,
    "no-underscore-dangle": 0,
    "react/prop-types": 0,
    "linebreak-style": [
      "error",
      "windows"
    ],
    "jsx-closing-tag-location": 0,
    "class-methods-use-this": 0,
    "import/no-named-as-default": 0,
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ]
  },
  "plugins": [
    "prettier"
  ]
}

これらは私が持っている eslint/prettier パッケージ関連です

"eslint": "^5.3.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^3.0.0",
"eslint-plugin-react": "^7.11.0",
"prettier": "1.14.3",