Eslint + Prettier + React。道具缩进

Question

我想使用这种格式，其中第一个道具位于标签所在的行中

<strong className={`list__item_price${props.price ? '' : ' empty'}`}

        itemProp="offers"

        itemScope

        itemType="http://schema.org/Offer">

我想使用更漂亮和 eslint。但它们相互冲突。Prettier 说第一个道具应该在下一行，而 Eslint 说它应该在第一行。这是选项：

.prettierrc.json：

{

  "printWidth": 120,

  "tabWidth": 4,

  "useTabs": false,

  "semi": true,

  "singleQuote": true,

  "trailingComma": "all",

  "bracketSpacing": false,

  "jsxBracketSameLine": true,

  "arrowParens": "avoid",

  "endOfLine": "lf"

}

.eslintrc.json：

{

    "env": {

        "browser": true,

        "es2020": true

    },

    "ecmaFeatures": {

        "modules":true,

        "arrowFunctions":true,

        "classes":true

    },

    "extends": [

        "plugin:react/recommended",

        "airbnb",

        "prettier",

        "prettier/react"

    ],

    "parser": "babel-eslint",

    "parserOptions": {

        "ecmaFeatures": {

            "jsx": true

        },

        "ecmaVersion": 11,

        "sourceType": "module"

    },

    "settings": {

        "import/resolver": "webpack"

    },

    "plugins": [

        "react",

        "prettier"

    ],

    "rules": {

        "no-plusplus": "off",

        "prettier/prettier": "error",

        "prettier/tabWidth": "off",

        "react/jsx-indent": ["error", 4],

        "react/jsx-indent-props": ["error", "first"],

        "react/jsx-props-no-spreading": ["error", {

            "html": "ignore"

        }],

        "react/jsx-closing-bracket-location": ["error", "after-props"],

        "react/jsx-first-prop-new-line": ["error", "never"],

        "jsx-a11y/no-static-element-interactions": "off",

        "jsx-a11y/click-events-have-key-events": "off"

    }

}

如您所见，我试图关闭一些更漂亮的选项，但没有帮助。可以解释一下，我该怎么做？

Answer 1

Prettier 不支持这种风格。您有几个备选方案：在 ESLint 之前运行 Prettier，以便 ESLint 覆盖你想要的格式在没有这种风格的情况下使用 Prettier不使用 Prettier 就使用这种风格