Reactjs 当JSX用于内嵌组件声明时,ESLint/TypeScript/Prettier缩进问题
当ESLint和Prettier遇到以下代码时:Reactjs 当JSX用于内嵌组件声明时,ESLint/TypeScript/Prettier缩进问题,reactjs,typescript,eslint,prettier,typescript-eslint,Reactjs,Typescript,Eslint,Prettier,Typescript Eslint,当ESLint和Prettier遇到以下代码时: @classDecorator([ { initialState: ({ mutation }) => ( <> <button type="button" onClick={() => mutation({ variables: { param1: 'success' } })}> // Line 33 Test Mutation Success
@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',
},
])
此外,当使用--fix
运行eslint
时,它会执行以下操作:
@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',
},
])
以下是.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,indentLogicalPressions:true}],
行,可以观察到完全相同的效果。使用
而不是
?尝试一下!--fix
实际上删除了
,并将其替换为
,它还产生了一些新的令人兴奋的缩进问题。虽然它确实将文本节点放在了正确的位置,但它将第33行和第36行上的缩进更改为2个空格(基本上与之前对两个文本节点所做的相同)。无论如何,如果您使用的是prettier,则应删除所有ESLint样式规则。他们会发生冲突。或者去掉更漂亮的。漂亮并不能帮助代码的可读性。哦,我明白了!一个人不同时使用这两者吗?我还以为他们是在恭维你呢!它们可以一起使用,但如果您定义了冲突规则,则不能一起使用。如果更漂亮的规则也强制执行ESLint缩进(缩进indent
规则),为什么还要测试它呢?只需禁用这些规则并仅保留功能规则(例如未使用的变量、定义前使用等)
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
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 }],
},
};