当 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 }],
条线,观察到完全相同的效果。