无法加载配置“更漂亮”以从

Question

I am using Prettier as a formatter, so I configured eslint-plugin-prettier . I did everything from this guide but when I try to run ng lint I get this error:

An unhandled exception occurred: Failed to load config "prettier" to extend from.
Referenced from: ...\node_modules\eslint-plugin-prettier\eslint-plugin-prettier.js

This is my .eslintrc.json :

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json", "e2e/tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
  ]
}

From my package.json :

"devDependencies": {
    "@angular-devkit/build-angular": "^12.2.13",
    "@angular-eslint/builder": "12.7.0",
    "@angular-eslint/eslint-plugin": "12.7.0",
    "@angular-eslint/eslint-plugin-template": "12.7.0",
    "@angular-eslint/schematics": "12.7.0",
    "@angular-eslint/template-parser": "12.7.0",
    "@angular/cli": "~12.2.13",
    "@angular/compiler-cli": "~12.2.13",
    "@angular/language-service": "~12.2.13",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash-es": "^4.17.4",
    "@types/node": "^12.20.4",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "eslint": "^7.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.8",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ncp": "^2.0.0",
    "prettier": "^2.4.1",
    "protractor": "~7.0.0",
    "rimraf": "^3.0.2",
    "ts-node": "~8.3.0",
    "typescript": "^4.3.5"
}

Answer 1

I fixed this by installing eslint-config-prettier as a dev dependency (no code changes - it worked out of the box after installation).

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