Quotes rule conflicting with prettier semicolons and brackets - breaks code which was valid

[Nerond32]

What version of eslint are you using?
6.6.0
What version of prettier are you using?
1.19.1
What version of eslint-plugin-prettier are you using?
3.1.1
Please paste any applicable config files that you're using (e.g. .prettierrc or .eslintrc files)
.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true,
        jest: true
    },
    plugins: ["import", "prettier", "jsx-a11y", "react", "react-hooks"],
    extends: [
       "eslint:recommended",
       "airbnb",
       "airbnb/hooks",
       "prettier/react",
       "plugin:prettier/recommended"],
    parser: "babel-eslint",
    parserOptions: {
        ecmaVersion: 2019
    },
    rules: {
       "linebreak-style": 0,
       "quotes": [2, "backtick"],
       "prettier/prettier": [2,
        {
            "endOfLine": "auto",
            "singleQuote": true
        }]
    },
    settings: {
        "import/resolver": {
            node: {
                extensions: [".js", ".jsx"],
                paths: "src"
            }
        }
    }
};

What source code are you linting?

export const SomeComponent = props => {
    const teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest =
        "test";
    const func = () => {
        return '<span>' + teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest
    }
};

What did you expect to happen?

const func = () => {
        return (
            "<span>" +     teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest
        );
    };

What actually happened?

const func = () => {
        return "<span>" + teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest
        ); // <-------------- This bracket has no beggining
    };

There seems to be 4 conditions necessary for this to happen:
1.Quotes not compliant with ones we want to enforce with 'quotes' rule.
2.Line being long enough.
3.There is no semicolon after the return statement.
4.There is no semicolon after the function ending bracket.

It seems there is a conflict with quotes. The ESLint wants to replace 'text' with "text", and Prettier wants to wrap it into () parentheses and add semicolon. However only the ending bracker is applied, which breaks the code, thus preventing me from applying autofix globally to my project. Also - action as simple as adding semicolon after the ending function bracket makes it behave correctly(although requires multiple save of a file).

Interestingly enough putting "semi":false in "prettier/prettier" config doesn't fix this issue. It appends ")" and "}" without semis instead, however still beginning "(" is gone and code is not compiling anymore. The issue is gone if I apply semicolon after the return or after function bracket though.

[BPScott]

Prettier's philosophy is that there are two categories of rules - formatting rules (like "what should my quotes be") and code-quality rules (like warn if have an unused variable). If you're using prettier then you should let prettier handle all the formatting rules instead of trying to configure them in eslint too. Otherwise prettier and eslint end up fighting.

You shouldn't specify quotes rule - in fact extending from plugin:prettier/recommended leverages https://github.com/prettier/eslint-config-prettier to disable it for you already.

Regarding you ending up with malformed code - that's probably because prettier needs to make a change in two separate lines in your code, and unfortunatly because of how we split up diffs there's not bulletproof guarentee they won't both be applied. This is the same root cause as #65 and I've got a big comment on that issue explaining why even though the current implementation is occasionally problematic it's better than the alternatives.

I'm going to close this issue as the quote issue is because you shouldn't use eslint's quotes setting, and the invalid code issue I'm not willing to put the time into fixing for reasons detailed in #65 (comment)