reactjs vscode和eslint上的缩进错误< Text>|JSX公司|React Native

pxiryf3j  于 2022-11-29  发布在  React
关注(0)|答案(3)|浏览(177)

原始文件如下所示:

保存后,它将更改为:

我的开发依赖项:

"devDependencies": {
"@babel/preset-flow": "^7.0.0-beta.56",
"babel-eslint": "^8.2.6",
"babel-jest": "23.4.2",
"babel-preset-react-native": "^5",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.10.0",
"flow-bin": "^0.78.0",
"jest": "23.4.2",
"prettier-eslint": "^8.8.2",
"react-test-renderer": "16.4.1"},

知道为什么会这样吗?
谢谢你的调查:)

wecizke3

wecizke31#

我认为这是因为空格配置(例如no-irregular-whitespace?)。我认为最安全的方法是将它们作为一行程序(并用大括号括起来):
<Text>{'Drawer'}</Text>

von4xj4u

von4xj4u2#

我没有安装eslint-plugin-prettier和eslint-config-prettier,然后我执行了以下操作:
1.在.“eslintrc”中的“插件”部分添加“prettier”
1.将“eslint-config-prettier”、“eslint-config-prettier/react”和“eslint-config-prettier/flow”添加到.“eslintrc”中的“扩展”部分
1.添加“'更漂亮/更漂亮':['错误',{结尾逗号:'es 5',单引号:true }]“添加到.”eslintrc”中的“规则”部分
然后删除了“prettier-eslint”包,以便prettier可以完全处理格式。“prettier-eslint”比eslint运行得更好,以便eslint可以更改prettier所做的格式。
我还在VScode上禁用了更漂亮扩展,并按照eslint-config-prettier https://www.npmjs.com/package/eslint-plugin-prettier上的建议添加了更漂亮的扩展
并按如下所示配置my .eslintrc:

{
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"parser": "babel-eslint",
"parserOptions":{
    "ecmaVersion": 8,
    "ecmaFeatures": {
        "experimentalObjectRestSpread": true,
        "impliedStrict": true,
        "classes": true
    }
},
"env": {
    "browser": true,
    "node": true,
    "jquery": true
},
"plugins": ["react", "prettier"],
"rules": {
    "react/jsx-filename-extension": [
    2,
    {
        "extensions": [".js", ".jsx"]
    }
    ],
    "react/forbid-prop-types": [0],
    "react/require-default-props": [0],
    "global-require": [0],
    "no-underscore-dangle": [0],
    "react/destructuring-assignment": 0,
    "ignoreClassFields": true,
    "no-unused-vars": 1,
    "react/prop-types": 1,
    "camelcase": 1,
    "max-len": 1,
    "prettier/prettier": ["error", { "trailingComma": "es5", "singleQuote": true }]
}

}
希望这对外面的人有帮助:)

laawzig2

laawzig23#

我通过添加以下内容解决了这个问题:

"react/jsx-indent": [
    "error",
    4
]

到我的.eslintrc.json

相关问题