Search code examples
eslintprettiereslint-config-airbnb

Why does my linting configuration for a React app want double quotes instead of single?

I am having trouble diagnosing an oddity in my linting configuration. It wants me to use double quotes, which I wouldn't necessarily mind, but I can't understand why because as far as I can tell all my rules want singles.

This is for a React app. My setup uses ESLint with Airbnb and Prettier. I installed packages according to tutorials and the documentation for the involved plugins. I am editing with VSCode.

I have the following relevant packages in package.json (in project root):

    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-import-resolver-webpack": "^0.11.1",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "prettier": "^1.17.1",

And I have the following in .eslintrc.json (also in the project root). This includes some custom rules I have specified for my project.

{
    "extends": ["airbnb", "prettier", "prettier/react"],
    "plugins": ["react", "jest", "prettier"],
    "rules": {
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [".js", "jsx"]
            }
        ],
        "prettier/prettier": "error",
        "class-methods-use-this": 0,
        "no-else-return": 0,
        "no-plusplus": [2, { "allowForLoopAfterthoughts": true }],
        "no-param-reassign": 0,
        "no-use-before-define": ["error",  { "functions": false }],
        "import/no-named-as-default": 0

My primary question: why does it show single quotes as errors?

Is this due to a rule somewhere in my configuration that I am unaware of? Did I fail to include one of the plugins properly?

I know some rules might want double quotes in JSX, but this complains about double quotes anywhere.

Currently, I am not using any .jsx files.

Screenshots:

example1

example2

Complete project on GitHub

[Edit 6/3/19] I might have found some info, but I'm still a little confused... Reading the eslint-config-prettier documentation, does this mean that double quotes are actually the default? But according to official Prettier docs, single quotes should be the default, right? Am I reading this right?

Solution

  • This is, I believe, a fundamental misunderstanding of the Prettier defaults; it does want double quotes, not singles, but I had misread it as the opposite.