VSCode (Angular) - EsLint Prettier 問題

Question

我有一個超級煩人的問題 EsLint 和 Prettier 正在做不同的事情... Prettier on format 格式化的代碼與 EsLint 預期的不同 我在保存時啟用了 prettier 作為默認格式化程序

比如這行代碼

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

當我解決它時，它被標記為紅色並帶有 lint 錯誤，它看起來像：

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

保存時它被格式化回在線

更漂亮的配置：

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

EsLint 配置

    {
  "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

安裝eslint-config-prettier

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

如果您使用 ESLint，請安裝 eslint-config-prettier 以使 ESLint 和 Prettier 相互配合。 它會關閉所有不必要或可能與 Prettier 沖突的 ESLint 規則。