Opinionated Angular Config Overrides

.eslintrc.json

{
  ...
  "plugins": ["functional", "unused-imports" ],
   "overrides": [
     {
       "files": ["*.spec.ts", "*.ts"],
       "rules": {
         "no-console": ["error", { "allow": ["error"] }],
         "unused-imports/no-unused-imports": "error"
       }
     },
     {
      "files": ["*.ts"],
      "excludedFiles": ["*.spec.ts", "*.stories.ts"],
      "extends": [
        "plugin:functional/no-mutations",
      ],
      "rules": {
        "functional/immutable-data": [
          {
            "ignoreAccessorPattern": ["**._mutable*", "**.mutable*"]
          }
        ]
      }
     }
   ]
}

.stylelintrc.json

{
  "extends": "stylelint-config-standard-scss",
  "plugins": ["stylelint-no-px"],
  "rules": {
    "string-quotes": "single",
    "color-no-hex": true,
    "meowtec/no-px": [true],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["ng-deep"]
      }
    ]
  },
  "overrides": [
    {
      "files": ["**/*.ts"],
      "customSyntax": "postcss-styled",
      "rules": {
        "no-empty-first-line": null,
        "no-missing-end-of-source-newline": null,
        "no-eol-whitespace": null
      }
    }
  ]
}

angular.json

{
  ...
    "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "inlineStyle": true,
          "inlineTemplate": true,
          "changeDetection": "OnPush"
        },
  ...
}

I don't want to turn mutation into some sort of boogyman. I do feel if you avoid mutation by default you opt out of a class of issues and it can guide your hand to more readable code. Allowing mutation so long as you explicitly label mutable objects feels like a nice escape hatch from this default and hangs a lantern on the code I'm more likely to want to notice in a PR.

I'm less interested in "abolishing mutation" than I am interested in opting out of devs needing to consider "when is mutation safe?".

With respect to inline template and styles, I think there's a reason other frameworks have settled in on single file components. Instead of a recommendation like "all templates bigger than 3 lines get an html file" for readability reasons. It makes more sense to me to have a rule of thumb like "all components over 100 lines or so should probably be broken up into more components or business logic needs moved out to a service".

Devs complain about inline style not playing nice with syntax highlighting, but that just boils down to them not having their tools configured properly. Which makes sense because postcss config doesn't explicitly lay out how and I've read medium posts that state it's not possible.