[英]Eslint + Prettier + React. Props indents
I want to use this format, where first prop located in the line with the tag我想使用这种格式,其中第一个道具位于标签所在的行中
<strong className={`list__item_price${props.price ? '' : ' empty'}`}
itemProp="offers"
itemScope
itemType="http://schema.org/Offer">
I want to use prettier and eslint.我想使用更漂亮和 eslint。 But they conflict with each other.
但它们相互冲突。 Prettier says first prop should be on the next line, while Eslint says it should be on the first line.
Prettier 说第一个道具应该在下一行,而 Eslint 说它应该在第一行。 Here's the options:
这是选项:
.prettierrc.json : .prettierrc.json :
{
"printWidth": 120,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": false,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"endOfLine": "lf"
}
.eslintrc.json : .eslintrc.json :
{
"env": {
"browser": true,
"es2020": true
},
"ecmaFeatures": {
"modules":true,
"arrowFunctions":true,
"classes":true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"prettier",
"prettier/react"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"settings": {
"import/resolver": "webpack"
},
"plugins": [
"react",
"prettier"
],
"rules": {
"no-plusplus": "off",
"prettier/prettier": "error",
"prettier/tabWidth": "off",
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", "first"],
"react/jsx-props-no-spreading": ["error", {
"html": "ignore"
}],
"react/jsx-closing-bracket-location": ["error", "after-props"],
"react/jsx-first-prop-new-line": ["error", "never"],
"jsx-a11y/no-static-element-interactions": "off",
"jsx-a11y/click-events-have-key-events": "off"
}
}
As you see, I tried to turn off some prettier options, but it didn't help.如您所见,我试图关闭一些更漂亮的选项,但没有帮助。 Could explain, how can I do that?
可以解释一下,我该怎么做?
Prettier doesn't support that style. Prettier 不支持这种风格。 You have several alternative options:
您有几个备选方案:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.