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

Answer 1

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