+-
Eslint对React jsx的标签属性换行空格数量校验问题
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" 就开始报空格数量检测错误。这里我应该怎么配置image.png
怎么算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才能正常检测

用 eslint-prettier 插件