Configuration for angular eslint

 ### Install Angular ESLint
`ng add @angular-eslint/schematics`


### Install Prettier and Prettier-ESLint dependencies
`npm i prettier prettier-eslint eslint-config-prettier eslint-plugin-prettier -D`


### ESLint configuration
Filename: `.eslintrc.json`
```json
{
    "root": true,
    "ignorePatterns": ["projects/**/*", "src/**/*.spec.ts"],
    "overrides": [
      {
        "files": ["*.ts"],
        "parserOptions": {
          "project": ["tsconfig.json"],
          "createDefaultProgram": true
        },
        "extends": [
          "plugin:@angular-eslint/recommended",
          "plugin:@angular-eslint/template/process-inline-templates",
          "plugin:prettier/recommended"
        ],
        "rules": {
          "@angular-eslint/component-class-suffix": [
            "error",
            {
              "suffixes": ["Page", "Component"]
            }
          ],
          "@angular-eslint/component-selector": [
            "error",
            {
              "type": "element",
              "prefix": "app",
              "style": "kebab-case"
            }
          ],
          "@angular-eslint/directive-selector": [
            "error",
            {
              "type": "attribute",
              "prefix": "app",
              "style": "camelCase"
            }
          ],
          "@angular-eslint/use-lifecycle-interface": [
            "error"
          ],
          "prettier/prettier": ["error",{
            "endOfLine": "auto"}
          ],
          "comma-dangle": "off",
          "@typescript-eslint/member-ordering": 0,
          "@typescript-eslint/naming-convention": 0
        }
      },
      {
        "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" }]
        }
      }
    ]
  }

```


### Prettier Configuration
Filename: `.prettierrc`
```json
{
   "tabWidth": 2,
   "useTabs": false,
   "singleQuote": true,
   "semi": true,
   "bracketSpacing": true,
   "arrowParens": "avoid",
   "trailingComma": "none",
   "bracketSameLine": true,
   "printWidth": 80,
   "endOfLine": "auto"
}
```

Filename: `.prettierignore`
```
dist
node_modules
```


### VSCode extensions:
```
dbaeumer.vscode-eslint
esbenp.prettier-vscode
```

### Add the following to your .vscode/settings.json file:
```
"[html]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
   "editor.formatOnSave": true
},
"[typescript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
 },
 "editor.formatOnSave": true
},
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.inlineSuggest.enabled": true
```

### Add Fix Lint and Prettier errors command in package.json
`"lint:fix": "ng lint --fix"`


### Replacing or editing the "lint" block in your angular.json file with
"lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "eslintConfig": ".eslintrc.json",
            "lintFilePatterns":  ["src/**/*.ts", "src/**/*.html"]
          }
        }