Update eslint + prettier to latest config combination

Based on documentation at https://github.com/angular-eslint/angular-eslint

Author: netzartist

client/.eslintrc.json

@@ -28,9 +28,8 @@
       },
       "extends": [
         "plugin:@angular-eslint/recommended",
-        "prettier/@typescript-eslint",
-        "plugin:prettier/recommended",
-        "plugin:@angular-eslint/recommended--extra"
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:prettier/recommended"
       ],
       "rules": {
         /**
@@ -54,13 +53,6 @@
             "prefix": "app",
             "style": "kebab-case"
           }
-        ],
-        "quotes": [
-          "error",
-          "single",
-          {
-            "allowTemplateLiterals": true
-          }
         ]
       }
     },
@@ -70,12 +62,14 @@
      * COMPONENT TEMPLATES
      * -----------------------------------------------------
      *
-     * If you use inline templates, make sure you read the notes on the configuration
-     * object after this one to understand how they relate to this configuration directly
-     * below.
+     * If you use inline templates, make sure you you have read the notes on the extends
+     * in the "*.ts" overrides above to understand how they relate to this configuration
+     * directly below.
      */
+
+     // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
     {
-      "files": ["*.component.html"],
+      "files": ["*.html"],
       "extends": ["plugin:@angular-eslint/template/recommended"],
       "rules": {
         /**
@@ -84,34 +78,15 @@
          */
       }
     },
-
-    /**
-     * -----------------------------------------------------
-     * EXTRACT INLINE TEMPLATES (from within .component.ts)
-     * -----------------------------------------------------
-     *
-     * This extra piece of configuration is necessary to extract inline
-     * templates from within Component metadata, e.g.:
-     *
-     * @Component({
-     *  template: `<h1>Hello, World!</h1>`
-     * })
-     * ...
-     *
-     * It works by extracting the template part of the file and treating it as
-     * if it were a full .html file, and it will therefore match the configuration
-     * specific for *.component.html above when it comes to actual rules etc.
-     *
-     * NOTE: This processor will skip a lot of work when it runs if you don't use
-     * inline templates in your projects currently, so there is no great benefit
-     * in removing it, but you can if you want to.
-     *
-     * You won't specify any rules here. As noted above, the rules that are relevant
-     * to inline templates are the same as the ones defined for *.component.html.
-     */
+    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
     {
-      "files": ["*.component.ts"],
-      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
+      "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" }]
+      }
     }
   ]
 }

client/README.md

@@ -6,15 +6,16 @@ This first version of the new frontend stack was introduced as an experimental f
 ([original issue](https://github.com/opendevstack/ods-provisioning-app/issues/518)). It can be activated for users with a
 `frontend.spa.enabled` feature flag in Spring Boot.
 
-OpenDevStack NEXT will include this new frontend activated by default (without featue flag).
+OpenDevStack NEXT will include this new frontend activated by default (without feature flag).
 
 To contribute to the further development, see section "Contributions welcome!" further down.
 
 ## Stack
 
-- [Angular](https://angular.io/) as single page application framework
-- [Jest](https://jestjs.io/) as unit testing framework
-- [Prettier](https://prettier.io/) as pre-commit-hook
+- [Angular](https://angular.io/)
+- [Jest](https://jestjs.io/)
+- [ESLint](https://eslint.org/)
+- [Prettier](https://prettier.io/) 
 
 See package.json for up-to-date version information.
 
@@ -58,7 +59,8 @@ behaves correctly. Although not ideal, we discovered this as the most effortless
 
 ### Build
 
-`npm run build`: The build artifacts will be stored in the `dist/` directory. `yarn build:prod` will be used for the pipeline.
+- `npm run build`: The build artifacts will be stored in the `dist/` directory.
+- `npm run build:prod` will be used for the pipeline.
 
 ### Tests
 
@@ -67,12 +69,7 @@ behaves correctly. Although not ideal, we discovered this as the most effortless
 
 ### Linting
 
-- `npm run lint`: Linting for Typescript and SCSS files.
-
-### Prettier
-
-Prettier is used as a pre-commit hook to format js, json, md, ts files. Formatting of html files has been temporarily removed due to
-inflexibility in context of Angular component markup.
+- `npm run lint`: Linting for Typescript (using [angular-eslint](https://github.com/angular-eslint/angular-eslint)) incl. Prettier as an eslint rule. This npm task also runs as a pre-commit hook.
 
 ## Contributions welcome!
 

client/package-lock.json

@@ -3,17 +3,14 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "prettier": "prettier --write \"**/*.{js,json,md,ts,component.html}\"",
-    "prettier:check": "prettier --check \"**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
     "start:dev": "ng serve --proxy-config proxy.conf.json",
     "start": "ng serve",
     "build": "ng build --baseHref=/nfe/",
     "build:prod": "ng build --baseHref=/nfe/ --configuration=production",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "ng lint",
-    "lint:fix": "ng lint --fix",
-    "format:fix:staged": "pretty-quick --staged --verbose --pattern \"**/*.{js,json,md,ts}\""
+    "lint:fix": "ng lint --fix"
   },
   "private": true,
   "dependencies": {
@@ -49,9 +46,9 @@
     "@typescript-eslint/eslint-plugin": "4.28.2",
     "@typescript-eslint/parser": "4.28.2",
     "bootstrap": "^4.4.1",
-    "eslint": "^7.26.0",
+    "eslint": "^7.31.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-prettier": "^3.4.0",
     "husky": "4.2.3",
     "jest": "^25.2.3",
     "jest-preset-angular": "8.1.2",
@@ -100,7 +97,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run format:fix:staged"
+      "pre-commit": "npm run lint"
     }
   }
 }