CODEWITHSUNDEEP
javascripthtmlreactjs
Joe
Joe

Reputation: 586

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

Upvotes: 8

Views: 15074

Answers (3)

elad BA
elad BA

Reputation: 1978

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

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

Upvotes: 2

Ernesto
Ernesto

Reputation: 4272

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

Upvotes: 0

deadlyhifi
deadlyhifi

Reputation: 607

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.

Upvotes: 10

Related Questions