Conflict between airbnb and prettier

[Nerond32]

Hi, I've been trying to setup eslint with airbnb rules and prettier integrated along with other things, so we can use it with eslintfixonsave in our project. I've been trying to apply it without success to the project, but fixing globally causes project to crash. I've isolated the files which cause this and tried the reproduce the issue. I was trying to find out what exactly was causing the issue by trial and error and eliminated most of the candidates. It seems that the conflict is between Airbnb ruleset and Prettier, because even such a simple ruleset 'fixes' the code which compiles to one which does not.

module.exports = {
    plugins: ["prettier", "react"],
    extends: [
       "airbnb",
       "prettier",
       "prettier/react"
    ],
    rules: {
       "prettier/prettier": "error"
    },
    settings: {
        "import/resolver": {
            node: {
                extensions: [".js", ".jsx"],
                paths: "src"
            }
        }
    }
};

I've created a quick repo in CRA with code reproducing this issue. Basically what I did was to install eslint, prettier, airbnb the way they recommend it(npx install-peerdeps --dev eslint-config-airbnb) and eslint-config-prettier. I've basically copy-pasted the config which was on Your readme, so just airbnb+prettier+prettier/react with prettier:prettier:"error" rule. Repo is available here: https://github.com/Nerond32/eslint-airbnb-prettier-conflict

A friend of mine already cloned it and reproduced successfully, so I believe this is not an environment issue due to VSCode config or whatever.

The code causing this particular issue is:

const SomeComponent = () => {
    const veryLongFunctionNameOmgDogeSoLongWhyIsThisNotEndingWtfWhoNamesVariables = x => !x;
    return (
         <div
            someObjProp={{
            objProp: {
                internalProperty: {
                    someFunction: function() {
                        return veryLongFunctionNameOmgDogeSoLongWhyIsThisNotEndingWtfWhoNamesVariables(true);
                        },
                            style: {
                    whiteSpace: 'nowrap',
                        }
                    }
            },
            }}
        >HERE I AM, DE BUG</div>
    )
}

export default SomeComponent;

Just ctrl+S and it will add an additional closing "}" without an opening one and it no longer compiles. I've found it pretty amusing, as basically any change makes this issue non-existent: 1.If I import with "" instead of '' it's okay. 2.If I add semicolon after the import it's okay. 3.If I remove semicolon after export default it's okay. 4.If the function name is not long enough it's okay. 5.If the function has no parameter it's okay(even if I give it a longer name, so it's not about whitespace). 6.If I remove whitespace in some places it's okay.

I couldn't troubleshoot exactly what was causing an issue, because a lot of changes I've tried was making issue non-existing. I wonder if that's really some very specific issue(though there are like 5 instances of it in the project I want to add linting with autofix), or I've screwed up something with my config, but I've simplified the config as much as I could and I can't see anything wrong with it honestly.

[lydell]

Hi!

I played very quickly with your reproduction repo.

~/stuff
❯ git clone git@github.com:Nerond32/eslint-airbnb-prettier-conflict.git
Cloning into 'eslint-airbnb-prettier-conflict'...
remote: Enumerating objects: 33, done.
remote: Counting objects: 100% (33/33), done.
remote: Compressing objects: 100% (28/28), done.
remote: Total 33 (delta 2), reused 32 (delta 2), pack-reused 0
Receiving objects: 100% (33/33), 349.29 KiB | 1.09 MiB/s, done.
Resolving deltas: 100% (2/2), done.

~/stuff
❯ cd eslint-airbnb-prettier-conflict/

~/stuff/eslint-airbnb-prettier-conflict master
❯ npm ci
added 1508 packages in 7.796s

~/stuff/eslint-airbnb-prettier-conflict 8s master
❯ npx eslint .

/Users/lydell/stuff/eslint-airbnb-prettier-conflict/src/index.js
  1:19  error  Replace `'react'` with `"react"`               prettier/prettier
  2:22  error  Replace `'react-dom'` with `"react-dom"`       prettier/prettier
  3:8   error  Replace `'./index.css'` with `"./index.css"`   prettier/prettier
  4:17  error  Replace `'./App'` with `"./App"`               prettier/prettier
  6:17  error  JSX not allowed in files with extension '.js'  react/jsx-filename-extension
  6:26  error  'document' is not defined                      no-undef
  6:50  error  Replace `'root'` with `"root"`                 prettier/prettier

✖ 7 problems (7 errors, 0 warnings)
  5 errors and 0 warnings potentially fixable with the `--fix` option.

~/stuff/eslint-airbnb-prettier-conflict master
❯ npx eslint . --fix

/Users/lydell/stuff/eslint-airbnb-prettier-conflict/src/index.js
  6:17  error  JSX not allowed in files with extension '.js'  react/jsx-filename-extension
  6:26  error  'document' is not defined                      no-undef

✖ 2 problems (2 errors, 0 warnings)

~/stuff/eslint-airbnb-prettier-conflict master *
❯ npx eslint .

/Users/lydell/stuff/eslint-airbnb-prettier-conflict/src/index.js
  6:17  error  JSX not allowed in files with extension '.js'  react/jsx-filename-extension
  6:26  error  'document' is not defined                      no-undef

✖ 2 problems (2 errors, 0 warnings)

What am I missing?

[Nerond32]

Just checked. Then it seems like cli eslint works fine with it, but fixing on save from vscode doesn't. Is there any difference between those? Though these 2 are supposed to work the same way.

[lydell]

I opened the project in VSCode now. The ESLint integration seems to be working – I get red squigglies in the JS code. When I save, the ' turn into " (I have autofix on save enabled).

I’m sorry, but I don’t think I’m able to help you solve your issue. Either way there does not seem to be any problem with eslint-config-prettier. Good luck debugging and I hope you’ll be able to get it working!

[Nerond32]

I opened the project in VSCode now. The ESLint integration seems to be working – I get red squigglies in the JS code. When I save, the ' turn into " (I have autofix on save enabled).

I’m sorry, but I don’t think I’m able to help you solve your issue. Either way there does not seem to be any problem with eslint-config-prettier. Good luck debugging and I hope you’ll be able to get it working!

And You don't have any errors when saving SomeComponent.jsx?

[lydell]

After saving twice, there are no more red squigglies in SomeComponent.jsx.

[Nerond32]

Weird, though it's an issue because 3 people have it independently. I'll need to debug, possibly we all have something set up in our VSCodes. Thanks for checking.

[DILLIR]

I have this same issue. @Nerond32 have you solved it?