如何通过 Eslint 设置更漂亮的自动格式化代码？

Question

In order to focus our development time on the actual code instead of arguing about coding style and careless mistake, we are trying to configure our Angular project using ESLint and Prettier. Based on https://github.com/angular-eslint/angular-eslint#notes-for-eslint-plugin-prettier-users , *.ts and .html can be configured by setting:

.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": {}
    },

    // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },

    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        // NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
}

However, there are other file types in the project besides *.ts and *.html , eg *.js , *.json , *.yaml ...etc.

Question : How can I use the similar approach to make Prettier auto-format other file types when I run ng lint ? Here is what I have added to .eslintrc.json but running ng lint has no effect. Note, I have added the file types in angular.json

More items in.eslintrc.json

   // JSON: https://www.npmjs.com/package/eslint-plugin-json
    {
      "files": ["*.json"],
      "extends": [
        "plugin:json/recommended-with-comments",
        "plugin:prettier/recommended"
      ]
    },

    // JavaScript
    {
      "files": ["*.js"],
      "excludedFiles": ["karma.conf.js"], // out-of-the-box karma.conf.js has known lint errors
      "extends": ["eslint:recommended", "plugin:prettier/recommended"]
    },

    // YAML
    {
      "files": ["*.yaml", "*.yml"],
      "plugins": ["yaml"],
      "extends": ["plugin:yaml/recommended", "plugin:prettier/recommended"]
    },

    // Markdown
    {
      "files": ["*.md"],
      "plugins": ["markdown"],
      "extends": ["plugin:markdown/recommended", "plugin:prettier/recommended"]
    }

angular.json

       "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html",
              "**/*.json",
              "**/*.js",
              "**/*.yaml",
              "**/*.md"
            ]
          }

Answer 1

This is the initial setup I use for NG repositories. You're welcome to reuse it and extend it with additional rules. It allows to auto format and --fix on each save.

.eslintrc:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "prettier"
  ],
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "lib",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "lib",
            "style": "kebab-case"
          }
        ],
        "prettier/prettier": [
          "error",
          {
            "arrowParens": "always",
            "bracketSameLine": true,
            "bracketSpacing": true,
            "printWidth": 120,
            "semi": true,
            "singleQuote": true,
            "tabWidth": 2,
            "trailingComma": "es5",
            "endOfLine": "auto",
            "useTabs": false
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

(For VSCode) settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "editor.rulers": [
    120
  ],
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true
}

.editorconfig:

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Nevertheless, if you have Prettier plugin enabled in VSCode it might format differently to eslint local config. To solve it - go to "Extensions", find Prettier and select Disable(Workspace)