'How to Resolve Failed to load config "prettier" to extend from. in react Js

I am very new to React JS, and now i am using Core-ui template for study purpose.

here im facing the issue like

Failed to load config "prettier" to extend from.

enter image description here

enter image description here

Package.json

},
  "devDependencies": {
    "eslint": "^5.8.0",
    "eslint-plugin-prettier": "^3.4.0",
    "prettier": "2.3.2"
  }

.eslintrc.js

  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', { endOfLine: 'auto' }], // Use our .prettierrc file as source
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    // 'simple-import-sort/imports': 'error',
    // 'simple-import-sort/exports': 'error',
  },
}
javascripthtmlreactjs


Solution 1:[1]

Try adding eslint-config-prettier.

npm install --save-dev eslint-config-prettier

In your .eslintrc you'll need to add "prettier" to the extends array as the last item.

Solution 2:[2]

I fixed this by installing eslint-config-prettier as a dev dependency

npm install --save-dev eslint-config-prettier

Solution 3:[3]

there are two type of packages per say plugins and configs them plugins go into the plugins section they have all the rules and stuff and the configs they go into the extends section

module.exports = {
    extends: ["eslint:recommended","eslint-config-prettier"],
    env: {
        node: true,
        commonjs: true,
        es6: true,
    },
    parser: "babel-eslint",
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: "module",
        ecmaFeatures: {
            impliedStrict: true,
            jsx: true,
        },
    },
    settings: {
        polyfills: ["promises"],
        "import/resolver": {
            node: {
                moduleDirectory: "node_modules",
            },
        },
    },
    plugins: ["import", "babel","eslint-plugins-prettier"],
    rules: {
        indent: ["error", "tab"],
        quotes: ["error", "double"],
        semi: ["error", "always"],
        "space-before-function-paren": ["error", "always"],
        "keyword-spacing": [
            "error",
            {
                before: true,
                after: true,
            },
        ],
        "arrow-body-style": ["error", "as-needed"],
        "arrow-parens": ["error", "always"],
        "comma-spacing": [
            "error",
            {
                before: false,
                after: true,
            },
        ],
        "object-curly-spacing": [
            "error",
            "always",
            {
                arraysInObjects: false,
            },
        ],
        "template-curly-spacing": ["error", "always"],
        "comma-dangle": [
            "error",
            {
                arrays: "never",
                objects: "always",
                imports: "never",
                exports: "never",
                functions: "ignore",
            },
        ],
        "block-spacing": ["error", "always"],
        "no-else-return": "error",
        "no-nested-ternary": "error",
        "require-await": "error",
        "arrow-spacing": [
            "error",
            {
                before: true,
                after: true,
            },
        ],
        "prefer-const": "error",
        "no-var": "error",
        "no-use-before-define": "error",
        "linebreak-style": ["error", "unix"],
    },
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 deadlyhifi
Solution 2 elad BA
Solution 3 Ernesto

Related Questions