vscode 和 eslint 上的错误缩进<text> | JSX | 反应本机</text>

Question

The original file looks like this:

Then once I save, it changes to this:

My development dependencies:

"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"},

Any ideas why is that happening?

Thanks for looking into it:)

Answer 1

I think it's because of whitespace config (eg no-irregular-whitespace ?). I'd say the safest way would be having them as one-liner (and wrapped in curly brackets):

<Text>{'Drawer'}</Text>

Answer 2

I did not have eslint-plugin-prettier and eslint-config-prettier installed, then I did the following:

1. Add "prettier" to "plugins" section in ".eslintrc"
2. Add "'eslint-config-prettier", "'eslint-config-prettier/react" and "'eslint-config-prettier/flow" to "extends" section in ".eslintrc"
3. Add "'prettier/prettier': ['error', { trailingComma: 'es5', singleQuote: true }]" to the "rules" section in ".eslintrc"

And then removed "prettier-eslint" package so prettier can handle the formatting completely. "prettier-eslint" runs prettier then eslint so eslint can change the formatting made by prettier.

I also disable prettier extension on VScode and added prettier as suggested on eslint-config-prettier https://www.npmjs.com/package/eslint-plugin-prettier

And also config my .eslintrc as following:

{
"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 }]
}

}

Hope that helps someone out there :)

Answer 3

I solved this by adding:

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

to my.eslintrc.json