JSX的ESlint + Prettier

Question

I am frustrated about the right config of prettier to achieve normal style for jsx tags.
I want this :

const template = (
  <div>
    <h1> Hello world!</h1> 
    <p> This is some info</p>
  </div>
);

and I got this:

const template = (
  <div>
    <h1> Hello world! </h1> <p> This is some info </p>{' '}
  </div>
);

My .eslintrc is:

{
    "parser": "babel-eslint",
    "extends": [
        "airbnb",
        "prettier",
        "prettier/react"
    ],
    "env": {
        "browser": true
    },
    "plugins": [
        "react",
        "jsx-a11y",
        "import",
        "prettier"
    ],
    "rules": {
        "no-console": "off",
        "linebreak-style": "off",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [".js", ".jsx"]
            }
        ],
        "react/react-in-jsx-scope": 0,
        "prettier/prettier": [
            "error",
            {
                "trailingComma": "es5",
                "singleQuote": true,
                "printWidth": 120
            }
        ]
    }
}

I've been searching about this problem and I couldn't figure out what to do.
And If anyone has a good .eslintrc file please post it.

Answer 1

I can't find anything wrong with your configuration. There are a few options but I don't really know your setup.

I think there might be a configuration of Prettier in your IDE. So for example, if you use VSCode and have the Prettier extension installed you can override some of these settings.

Second thing is that I think the {' '} is because of a trailing space in your example. There really is no way for me to check or reproduce. I'd suggest installing an addon which removes trailing spaces. I use Trailing Spaces for VSCode.

The last thing you can check is by installing eslint-config-react-app and doing something like this:

"eslintConfig": {
    "extends": "react-app"
},

My rootnode is of course from my package.json and should be different for your . eslintrc . eslintrc but extending should be the same.

These are just a few things I can think of, hope they help and hope you get your linting solved, those issues also bug me a lot!

Answer 2

我遇到了同样的问题，可以通过删除Beatify扩展名来解决。