我正在与我的 eslint 的一个小问题作斗争,它似乎在大多数情况下工作正常,但有些情况下,它与React代码无关 .
我们以此代码为例:
const cellPLay = (name, src) => (
<Table.Cell>
<Modal trigger={<Button icon><Icon name="video play" size="large" /></Button>}>
<Modal.Header>
{name}
</Modal.Header>
<Modal.Content image>
<Modal.Description>
<video src={src} controls style={{ width: 910 }} />
</Modal.Description>
</Modal.Content>
</Modal>
</Table.Cell>
);
给出这样的错误:
/my-path/MyFile.js:18:7:预期缩进8个空格字符但找到6. [Error / react / jsx-indent]
出于某种原因, eslint 认为 Modal.Content 应该在 Modal.Header 之后缩进,但即使我修复了所有缩进,它也要求它说某些结束标记的缩进是错误的:
预期结束标签以匹配开口缩进
我的eslint配置文件:
{
"extends": "./my-eslint/index.js"
}
实际的eslint代码:
module.exports = {
extends: require.resolve('eslint-config-airbnb'),
env: {
browser: true,
jest: true,
es6: true,
},
parserOptions: {
ecmaVersion: 8,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
rules: {
strict: 'error',
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
'no-plusplus': 'off',
'jsx-a11y/media-has-caption': 'off',
'jsx-a11y/anchor-is-valid': [
'error',
{
components: ['Link'],
specialLink: ['to'],
},
],
},
};
我尝试手动添加jsx缩进规则
'react/jsx-indent': [2, 2],
没有解决它 .
还有其他想法吗?
在旁注中,VSCode正在正确地进行缩进,但是当我手动运行 eslint 时它会失败,我需要修复它,因为有代码样式自动化运行 . 我跟着一些答案并在VSCode上安装得更漂亮,似乎现在他们到了同一页面,但我需要修复缩进问题 .
UPDATE 1 正如@ a-jar-of-clay所建议的那样,我尝试升级我的包,eslint为5.4.0,airbnb为17.1.0,airbnb-base为13.1.0
现在我收到了新的错误消息,可能是由于某些不兼容性:
错误:config-airbnb / rules / react.js:规则“react / jsx-no-bind”的配置无效:值{“ignoreRefs”:true,“allowArrowFunctions”:true,“allowFunctions”:false,“allowBind “:false,”ignoreDOMComponents“:true}不应该有其他属性 .
UPDATE 2 正如@ matt-dell所说,我用来手动运行的命令是:
./node_modules/.bin/eslint --fix --format unix --config my-eslint/index.js
这肯定是我的配置,因为当我改变一些规则时它会做出反应 .
1 回答
我有同样的问题,我用一些软件包修复它:通过使用eslint插件并扩展react-app eslint,它被修复了 .
package.json
.eslintrc.js
祝好运!