Когда ESLint и Prettier встречают следующий код:
@classDecorator([
{
initialState: ({ mutation }) => (
<>
<button type="button" onClick={() => mutation({ variables: { param1: 'success' } })}> // Line 33
Test Mutation Success
</button>
<button type="button" onClick={() => mutation({ variables: { param1: 'error' } })}> // Line 36
Test Mutation Fail
</button>
</>
),
successState: () => 'Success - component state changed',
},
])
, он генерирует следующие ошибки:
33:9 error Expected indentation of 2 space characters but found 8 react/jsx-indent
36:9 error Expected indentation of 2 space characters but found 8 react/jsx-indent
Кроме того, когда eslint
запускается с --fix
, он делает это:
@classDecorator([
{
initialState: ({ mutation }) => (
<>
<button type="button" onClick={() => mutation({ variables: { param1: 'success' } })}>
Test Mutation Success
</button>
<button type="button" onClick={() => mutation({ variables: { param1: 'error' } })}>
Test Mutation Fail
</button>
</>
),
successState: () => 'Success - component state changed',
},
])
и затем выдает следующие ошибки:
33:9 error Expected indentation of 2 space characters but found 8 react/jsx-indent
33:94 error Expected indentation of 10 space characters but found 4 react/jsx-indent
34:5 error Insert `······` prettier/prettier
36:9 error Expected indentation of 2 space characters but found 8 react/jsx-indent
36:92 error Expected indentation of 10 space characters but found 4 react/jsx-indent
37:1 error Insert `······` prettier/prettier
Вот файл .eslintrc.js
:
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
'airbnb-typescript',
'airbnb/hooks',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 11,
sourceType: 'module',
project: './tsconfig.json',
},
plugins: [
'react',
'@typescript-eslint',
'jsx-a11y',
],
settings: {
react: {
version: 'detect' // Tells eslint-plugin-react to automatically detect the version of React to use
}
},
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. '@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/interface-name-prefix': ['error', { prefixWithI: 'always' }],
'react/prop-types': 'off',
'@typescript-eslint/require-await': 'off',
'import/prefer-default-export': 'off',
'@typescript-eslint/indent': ['error', 2],
'react/jsx-indent': ['error', 2, { checkAttributes: true, indentLogicalExpressions: true }],
},
};
Без 'react/jsx-indent': ['error', 2, { checkAttributes: true, indentLogicalExpressions: true }],
линия, точно такой же эффект наблюдается.