Я пытаюсь использовать Prettier для форматирования в VS Code вместе с ESLint в приложении Gatsby React, и они, кажется, борются друг с другом. Например, у меня есть следующий код JavaScript / React:
Made with
{' '}
<Link
to="https://kontent.ai/"
target="_blank"
rel="noopener noreferrer"
>
Kentico Kontent
</Link>
, который Prettier в VS Code настаивает на изменении на это:
Made with{' '}
<Link
to="https://kontent.ai/"
target="_blank"
rel="noopener noreferrer"
>
Kentico Kontent
</Link>
, который затем нарушает реакцию ESLint / jsx -one-expression-per-line, поэтому я получаю бесконечное l oop. У меня есть то, что я считаю довольно стандартной конфигурацией, с eslint-plugin-prettier и настройкой ESLint для расширения prettier. Вот мой .eslintr c:
{
"parser": "babel-eslint",
"extends": ["prettier", "airbnb"],
"plugins": ["import", "jsx-a11y", "react", "prettier"],
"globals": {
"graphql": true,
"window": true
},
"rules": {
"arrow-body-style": [
"error",
"as-needed",
{ "requireReturnForObjectLiteral": true }
],
"arrow-parens": ["error", "as-needed"],
"comma-dangle": ["error", "always-multiline"],
"function-paren-newline": "off",
"no-console": "off",
"prefer-destructuring": "off",
"prettier/prettier": "error",
"semi": ["error", "always"],
"import/extensions": "off",
"import/no-extraneous-dependencies": "off",
"jsx-a11y/anchor-is-valid": "off",
"react/jsx-filename-extension": "off",
"react/prefer-stateless-function": "off",
"react/prop-types": "off"
}
}
, а это мой .prettirr c:
{
"printWidth": 80,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"parser": "babel",
"semi": true
}
Как мне настроить prettier и ESLint, чтобы они не боролись постоянно друг друга?