How to Resolve Failed to load config “prettier” to extend from. in react Js

Question

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.

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', }, }

Answer 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.

Answer 2

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"],
    },
};