Eslint对React jsx的标签属性换行空格数量校验问题

Question

Expected indentation of 18 space characters but found 20

JSX代码

render() {
        const { tel, inputCode } = this.state
        return (
            <div>
                <input 
                    name="tel"
                    placeholder="账号"
                    onChange={this.handleChange.bind(this)}
                    value={tel}
                />
            </div>
        )
    }

在这里，input的 name="tel" 就开始报空格数量检测错误。这里我应该怎么配置
怎么算20个都应该是正确的才对

贴上Eslint配置代码

module.exports = {
    parser: 'babel-eslint',
    env: {
        browser: true,
        es6: true,
        node: true,
    },
    parserOptions: {
        ecmaVersion: 6,
        sourceType: 'module',
    },
    extends: [
        'airbnb',
    ],
    plugins: ['react-hooks'],
    rules: {
        indent: ['error', 4],
        'react/jsx-indent': ['error', 4],
        'react-hooks/rules-of-hooks': 'error', // 检查 Hook 的规则
        'react-hooks/exhaustive-deps': 'warn', // 检查 effect 的依赖
        semi: ['off'],
        'comma-dangle': ['error', 'always-multiline'],
        'react/prefer-stateless-function': ['error', { extensions: ['.js', '.jsx'] }], //Component纯函数要求检测
        'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    },
}

贴上.editorconfig配置代码

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = false
trim_trailing_whitespace = true

贴上..prettierrc配置代码

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 使用 4 个空格缩进
    tabWidth: 4,
    tabSize: 4,
    // 行尾需要有分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号 'es5'  none
    trailingComma: 'es5',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf 结尾是 \n \r \n\r auto
    endOfLine: 'lf',
}

希望帮忙看下到底哪里的配置需要调整eslint才能正常检测

问题解决方法。暂时还不清楚太具体是哪一步解决了问题，迟点研究下再重新整理该答案。
主要是做了插件安装与配置，现在已经正确验证。

vscode安装eslint、Prettier - Code formatter，.vscode setting.js 添加配置

{
    "files.autoSave": "onFocusChange",
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "eslint.autoFixOnSave": true,
    "eslint.enable": true
}

eslint.js 配置添加

{
    ...
    extends: [
        'airbnb',
        // "plugin:react-hooks/recommended"
        "plugin:prettier/recommended"
    ],
    plugins: ['react','react-hooks'],
    ...
}

Answer 1

用 eslint-prettier 插件