[英]Eslint (Airbnb) indentation issues with React code(JSX)
我正在与我的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上安装得更漂亮,似乎现在他们到了同一页面,但我需要修复缩进问题。
更新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}不应该有其他属性。
更新2正如@ matt-dell所说,我用来手动运行的命令是:
./node_modules/.bin/eslint --fix --format unix --config my-eslint/index.js
这肯定是我的配置,因为当我改变一些规则时它会做出反应。
我有同样的问题,我用一些软件包修复它:通过使用eslint插件并扩展react-app eslint,它被修复了。
的package.json
"babel-eslint": "^7.2.3",
"eslint": "^4.19.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.50.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.11.1",
.eslintrc.js
"env": {
"browser": true,
"es6": true
},
"extends": ["react-app", "eslint:recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"globals": {
"React": true
},
"plugins": [
"react"
],
"rules": {/* define your rules here...*/}
祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.