[英]Eslint (Airbnb) indentation issues with React code(JSX)
I'm fighting with a minor issue with my eslint , it seems to work fine most of the time, but there are some cases that it doesn't work weel with React code. 我正在与我的eslint争论一个小问题,它似乎在大多数情况下工作正常,但有些情况下,它与React代码不起作用。
Let take as example this code: 我们以此代码为例:
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>
);
Gives errors like that: 给出这样的错误:
/my-path/MyFile.js:18:7: Expected indentation of 8 space characters but found 6. [Error/react/jsx-indent]
/my-path/MyFile.js:18:7:预期缩进8个空格字符,但找到6. [Error / react / jsx-indent]
For some reason, eslint thinks Modal.Content should be indented in after Modal.Header , but even if I fix all indentation it asks it says the indentation of some closing tag is wrong: 出于某种原因, eslint认为Modal.Content应该在Modal.Header之后缩进 ,但是即使我修复了所有缩进它询问它说某些结束标记的缩进是错误的:
Expected closing tag to match indentation of opening
预期结束标记以匹配开口缩进
My eslint config file: 我的eslint配置文件:
{
"extends": "./my-eslint/index.js"
}
The actual eslint code: 实际的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'],
},
],
},
};
I have tried adding manually the rule for jsx indent 我尝试手动添加jsx缩进规则
'react/jsx-indent': [2, 2],
Didn't solve it. 没有解决它。
Any other idea? 还有其他想法吗?
On a side note, VSCode was doing it correctly regarding the indentation, but when I run eslint manually it fails, and I need to fix it because there is code style automation running. 在旁注中,VSCode正在正确地进行缩进,但是当我手动运行eslint时它会失败,我需要修复它,因为有代码样式自动化运行。 I followed some answers and installed prettier on VSCode, it seems that now they got to the same page, but I need to fix the indentation issue.
我跟着一些答案并在VSCode上安装得更漂亮,似乎现在他们到了同一页面,但我需要修复缩进问题。
UPDATE 1 As suggested by @a-jar-of-clay I tried to upgrade my packages, eslint to 5.4.0, airbnb to 17.1.0 and airbnb-base to 13.1.0 更新1正如@ a-jar-of-clay所建议的那样,我尝试升级我的包裹,eslint为5.4.0,airbnb为17.1.0,airbnb-base为13.1.0
Now I got new error messages, probably due to some incompatibility: 现在我收到了新的错误消息,可能是由于某些不兼容性:
Error: config-airbnb/rules/react.js: Configuration for rule "react/jsx-no-bind" is invalid: Value {"ignoreRefs":true,"allowArrowFunctions":true,"allowFunctions":false,"allowBind":false,"ignoreDOMComponents":true} should NOT have additional properties.
错误:config-airbnb / rules / react.js:规则“react / jsx-no-bind”的配置无效:值{“ignoreRefs”:true,“allowArrowFunctions”:true,“allowFunctions”:false,“allowBind” :false,“ignoreDOMComponents”:true}不应该有其他属性。
UPDATE 2 As asked by @matt-dell, the command that I'm using to run manually is: 更新2正如@ matt-dell所说,我用来手动运行的命令是:
./node_modules/.bin/eslint --fix --format unix --config my-eslint/index.js
It's definitely picking up my config, as it reacts when I change some rule. 这肯定是我的配置,因为当我改变一些规则时它会做出反应。
I had the same problem and I fixed it with some packages: By using the eslint plugins and extending the react-app eslint it was fixed. 我有同样的问题,我用一些软件包修复它:通过使用eslint插件并扩展react-app eslint,它被修复了。
package.json 的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 .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...*/}
Good luck! 祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.