Visual Studio Code - "[eslint] Insert `··` (prettier/prettier)"

What version of eslint are you using? 5.6.0

What version of prettier are you using? 1.14.2

What version of eslint-plugin-prettier are you using? 2.6.2

Please paste any applicable config files that you’re using (e.g. .prettierrc or .eslintrc files) // .eslintrc { “parser”: “babel-eslint”, “plugins”: [“react”, “jest”, “prettier”], “extends”: [“airbnb”, “plugin:prettier/recommended”, “prettier/react”], “globals”: { “React”: true, “document”: true, “window”: true, “jQuery”: true, “$”: true, “localStorage”: true, “fetch”: true }, “root”: true, “rules”: { “indent”: [“error”, 2], “react/prefer-stateless-function”: “warn”, “react/self-closing-comp”: [ “warn”, { “component”: true, “html”: false } ], “react/sort-comp”: [ 1, { “order”: [ “static-methods”, “lifecycle”, “everything-else”, “rendering” ], “groups”: { “rendering”: [“/^render.+$/”, “render”] } } ], “jest/no-disabled-tests”: “warn”, “jest/no-focused-tests”: “error”, “jest/no-identical-title”: “error”, “jest/prefer-to-have-length”: “warn”, “jest/valid-expect”: “error”, “react/require-default-props”: 0, “jsx-a11y/href-no-hash”: “off”, “jsx-a11y/anchor-is-valid”: [“warn”, { “aspects”: [“invalidHref”] }], “react/jsx-boolean-value”: [“warn”, “never”], “react/jsx-closing-bracket-location”: [“warn”, “after-props”], “react/jsx-curly-spacing”: [“warn”, “never”], “react/jsx-filename-extension”: [“warn”, { “extensions”: [“.js”, “.jsx”] }], “react/jsx-first-prop-new-line”: [“warn”, “multiline”], “react/jsx-handler-names”: [ “warn”, { “eventHandlerPrefix”: “handle”, “eventHandlerPropPrefix”: “on” } ], “react/jsx-indent”: [“warn”, 2], “react/jsx-key”: “error”, “react/jsx-wrap-multilines”: [“warn”], “react/jsx-indent-props”: 0, “no-trailing-spaces”: [2, { “skipBlankLines”: true }], “prefer-template”: 0, “import/prefer-default-export”: 0, “import/no-unresolved”: 0, “import/no-extraneous-dependencies”: 0, “import/extensions”: 0, “babel/object-curly-spacing”: 0 }, “env”: { “es6”: true, “jest”: true, “browser”: true, “node”: true } }

// .prettierrc { “singleQuote”: true, “trailingComma”: “all” }

What source code are you linting? A react component with the foloowing jsx:

        <div className={styles.contentWrapper}>
          {!isComplete &&
            !isErrored && (
            <div className={styles.loading}>
              <p>Loading...</p>
            </div>
          )}
        </div>

What did you expect to happen? Using Visual Studio Code, Eslint / Prettier warned me to insert line breaks to the ‘loading’ div. I expected adding line breaks would fix the issue.

What actually happened? The warning persists but the instructions are unclear: [eslint] Insert ·· (prettier/prettier)

What is it asking me to insert?