[英]Eslint + Prettier + React. Props indents
我想使用這種格式,其中第一個道具位於標簽所在的行中
<strong className={`list__item_price${props.price ? '' : ' empty'}`}
itemProp="offers"
itemScope
itemType="http://schema.org/Offer">
我想使用更漂亮和 eslint。 但它們相互沖突。 Prettier 說第一個道具應該在下一行,而 Eslint 說它應該在第一行。 這是選項:
.prettierrc.json :
{
"printWidth": 120,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": false,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"endOfLine": "lf"
}
.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"
}
}
如您所見,我試圖關閉一些更漂亮的選項,但沒有幫助。 可以解釋一下,我該怎么做?
Prettier 不支持這種風格。 您有幾個備選方案:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.