eslint缩进规则未被禁用

Question

我正在努力使漂亮和eslint一起工作我跟着这个article但我有一个问题与缩进规则..基本上我有这个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 /更漂亮的包装

"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",

Answer 1

您还需要禁用react/jsx-indent，该规则由eslint-config-airbnb启用。