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

Asked
Active3 hr before
Viewed126 times

5 Answers

resolveconfigprettierextendfailedreact
90%

Failed to load config "prettier" to extend from.,I am very new to React JS, and now i am using Core-ui template for study purpose.,In your .eslintrc you'll need to add "prettier" to the extends array as the last item.,Try adding eslint-config-prettier.

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

What source code are you linting? nodejs/express What did you expect to happen? show warnings a suggestion to solve problems What actually happened? not show any warning or suggestion and this error ,Did you found what's wrong? @marcosguti,I was getting this error due to not having installed eslint (only the plugin and config). :-), Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

  "env": {
     "es6": true,
     "node": true
  },
  "extends": ["standard", "prettier", "plugin:prettier/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
     "ecmaVersion": 2018
  },
  "plugins": ["prettier"],
  "rules": {
     "prettier/prettier": [
        "error",
        {
           "singleQuote": true,
           "semi": false,
           "jsxSingleQuote": true
        }
     ]
  }
  }
72%

Ask questionsError: Failed to load config "prettier" to extend from. ,version: "eslint-config-airbnb-typescript": "10.0.0",,I checked again, the error only appears when I open files of eslint-config-airbnb-typescript it self.,Maybe it is when I got some exception on linting my own files, then I try to find reason from lint dependencies, at this time, I opened eslint-config-airbnb-typescript's file and then vscode automatically lints it. Then it report an error.

[Error - 下午12:51:12] ESLint stack trace:
[Error - 下午12:51:12] Error: Failed to load config "prettier" to extend from.
Referenced from: D:\rs-test\minigrep\node_modules\eslint-config-airbnb-typescript\.eslintrc.js
at configInvalidError (D:\rs-test\minigrep\node_modules\eslint\lib\cli-engine\config-array-factory.js:295:9)
at ConfigArrayFactory._loadExtendedShareableConfig (D:\rs-test\minigrep\node_modules\eslint\lib\cli-engine\config-array-factory.js:876:23)
at ConfigArrayFactory._loadExtends (D:\rs-test\minigrep\node_modules\eslint\lib\cli-engine\config-array-factory.js:776:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (D:\rs-test\minigrep\node_modules\eslint\lib\cli-engine\config-array-factory.js:715:25)
at _normalizeObjectConfigDataBody.next (<anonymous>)
   at ConfigArrayFactory._normalizeObjectConfigData (D:\rs-test\minigrep\node_modules\eslint\lib\cli-engine\config-array-factory.js:660:20)
   at _normalizeObjectConfigData.next (<anonymous>)
      at ConfigArrayFactory.loadInDirectory (D:\rs-test\minigrep\node_modules\eslint\lib\cli-engine\config-array-factory.js:508:28)
      at CascadingConfigArrayFactory._loadConfigInAncestors (D:\rs-test\minigrep\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:367:46)
      at CascadingConfigArrayFactory.getConfigArrayForFile (D:\rs-test\minigrep\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:288:18)
65%

error: Insert `,`(prettier / prettier) at pkg / commons - atom / ActiveEditorRegistry.js: 22: 25:
   20 |
   import {
      21 | observeActiveEditorsDebounced,
      >
      22 | editorChangesDebounced |
      ^
      23 |
   } from './debounced';;
24 |
   25 |
   import {
      observableFromSubscribeFunction
   } from '../commons-node/event';

error: Delete `;`(prettier / prettier) at pkg / commons - atom / ActiveEditorRegistry.js: 23: 21:
   21 | observeActiveEditorsDebounced,
   22 | editorChangesDebounced >
   23 |
}
from './debounced';; |
^
24 |
   25 |
   import {
      observableFromSubscribeFunction
   } from '../commons-node/event';
26 |
   import {
      cacheWhileSubscribed
   } from '../commons-node/observable';

2 errors found.
load more v
75%

This Support Guide contains a ton of useful debugging tips that can likely help you solve your problem ,I’ve migrated a CRA app, from 3.4.0 to 4.0.1 and now I can’t build my app, due to Failed to load config "prettier" to extend from. error.,My .prettierrc is commited to the repo,We also recommend trying to search the forums with the build error you encountered - it’s likely your question was already asked by someone else!

load more v

Other "resolve-config" queries related to "How to Resolve Failed to load config “prettier” to extend from. in react Js"