Single/Double quote in prettier

Question

I'm having a funny behaviour with prettier and eslint. I want to use single quotes in strings in ts/js context and double quotes in jsx context.

If I use single quote (in .tsx file) I get this error:

  243:21  error  Replace `'Children\'s·Foundation·Trust'` with `"Children's·Foundation·Trust",`  prettier/prettier

If I use double quote in the same line:

  243:21  error  Strings must use singlequote  

This is my .prettier.js config

    {
      "printWidth": 120,
      "trailingComma": "es5",
      "singleQuote": true,
      "jsxSingleQuote": false,
      "arrowParens": "avoid"
    }

this is my eslint

    module.exports = {
      "extends": [
      "react-app",
      "plugin:prettier/recommended",
      "plugin:import/typescript"
    ],
      "rules": {
      "arrow-body-style": 0,
        "react/prop-types": 0,
        "@typescript-eslint/no-non-null-assertion": 0,
        "@typescript-eslint/no-explicit-any": 0,
        "@typescript-eslint/explicit-member-accessibility": 0,
        "@typescript-eslint/explicit-function-return-type": 0,
        "quotes": [2, "single"],
        "jsx-quotes": [2, "prefer-double"]  
      ],
        "camelcase": 0,
        "arrow-parens": ["error", "as-needed"]
    
      },
      "settings": {
      "polyfills": [
        "Promise",
        "fetch",
        "Object",
        "Array.from",
        "URLSearchParams",
        "AbortController",
        "Headers"
      ],
        "react": {
        "version": "detect"
      }
    }
    }

I can't work out which rule is conflicting with another?

Answer 1

Change the quotes rules in your .eslintrc to:

quotes: ["error", "single", { "avoidEscape": true }]