Eslint + Prettier + React. Отступы реквизита - PullRequest
Новая
       267

Eslint + Prettier + React. Отступы реквизита

1 голос
/ 12 июля 2020

Я хочу использовать этот формат, где первая опора находится в строке с тегом 

<strong className={`list__item_price${props.price ? '' : ' empty'}`}
        itemProp="offers"
        itemScope
        itemType="http://schema.org/Offer">

Я хочу использовать prettier и eslint. Но они конфликтуют друг с другом. Prettier говорит, что первая опора должна быть на следующей строке, а Eslint говорит, что она должна быть на первой строке. Вот варианты:

.prettierr c. json: 

{
  "printWidth": 120,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

.eslintr c. 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"
    }
}

Как видите, я пытался отключить какие-то более красивые параметры, но это не помогло. Мог бы объяснить, как я могу это сделать?

1 Ответ

1 голос
/ 12 июля 2020

Prettier не поддерживает этот стиль. У вас есть несколько альтернативных вариантов:

  1. Запуск Prettier перед ESLint, чтобы ESLint переопределил формат, который вы хотите
  2. Использовать Prettier без этого стиля
  3. Использовать этот стиль без Prettier
...