VSCode (Angular) - EsLint Prettier 问题

Question

I have a super annoying problem EsLint and Prettier are doing different things... Prettier on format is formatting the code different then expected by EsLint I have prettier as default formatter enabled on save

Eg this line of code

   const actionAbove = findNodeInForm(this.form, (nodeAbove.data as FlowChartData).key.replace('Group', '').replace('Root', ''));

is marked red with a lint error when I resolve it it looks like:

 const actionAbove = findNodeInForm(
      this.form,
      (nodeAbove.data as FlowChartData).key.replace('Group', '').replace('Root', '')
    );

On save it is formatted back to be in on line

Prettier Config:

    {
  "singleQuote": true,
  "printWidth": 120
}

EsLint Config

    {
  "root": true,
  "ignorePatterns": ["projects/**/*", "src/models/*"],
  "plugins": ["prettier"],

  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json", "e2e/tsconfig.e2e.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:prettier/recommended",
        "prettier"
      ],
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "endOfLine": "auto"
          }
        ],
        "@typescript-eslint/array-type": [
          "error",
          {
            "default": "array"
          }
        ],
        "@typescript-eslint/consistent-type-definitions": "error",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "off",
          {
            "accessibility": "explicit"
          }
        ],
        "@typescript-eslint/no-empty-function": "error",
        "@typescript-eslint/no-this-alias": "error",
        "@typescript-eslint/no-unused-vars": "error",
        "@typescript-eslint/no-var-requires": "error",
        "arrow-parens": ["off", "always"],
        "brace-style": ["error", "1tbs"],
        "id-blacklist": "off",
        "id-match": "off",
        "import/no-extraneous-dependencies": "off",
        "import/no-internal-modules": "off",
        "linebreak-style": "off",
        "max-classes-per-file": ["error", 1],
        "new-parens": "off",
        "newline-per-chained-call": "off",
        "no-duplicate-case": "error",
        "no-duplicate-imports": "error",
        "no-empty": "error",
        "no-extra-bind": "error",
        "no-extra-semi": "off",
        "no-irregular-whitespace": "off",
        "no-new-func": "error",
        "no-redeclare": "error",
        "no-return-await": "error",
        "no-sequences": "error",
        "no-sparse-arrays": "error",
        "no-template-curly-in-string": "error",
        "no-underscore-dangle": "off",
        "prefer-object-spread": "error",
        "quote-props": "off",
        "react/jsx-curly-spacing": "off",
        "react/jsx-equals-spacing": "off",
        "react/jsx-wrap-multilines": "off",
        "space-before-function-paren": "off",
        "space-in-parens": ["off", "never"]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended", "prettier"],
      "rules": {}
    }
  ]
}

Answer 1

Installeslint-config-prettier

From: https://prettier.io/docs/en/install.html#eslint-and-other-linters

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier.