@jkba/eslint-config-angular 2.0.0 → 2.1.0

package/README.md

@@ -20,6 +20,7 @@ npm i -D \
   eslint-import-resolver-typescript \
   @eslint/js \
   typescript-eslint \
+  @smarttools/eslint-plugin-rxjs \
   @jkba/eslint-config-angular
 
 ```

package/eslint.config.js

@@ -5,10 +5,9 @@ const tseslint = require('typescript-eslint');
 const angular = require('angular-eslint');
 const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
 const importPlugin = require('eslint-plugin-import');
+const rxjs = require('@smarttools/eslint-plugin-rxjs');
 
 const config = tseslint.config(
-  eslint.configs.recommended,
-  tseslint.configs.recommended,
   {
     files: ['**/*.ts'],
     processor: angular.processInlineTemplates,
@@ -17,31 +16,141 @@ const config = tseslint.config(
       tseslint.configs.stylisticTypeChecked,
       tseslint.configs.strictTypeChecked,
       angular.configs.tsRecommended,
+      // TODO
       // 'plugin:rxjs/recommended', // For some unknown weird reason, this plugin needs to be installed in child project as well.
       importPlugin.flatConfigs?.recommended,
       importPlugin.flatConfigs?.typescript,
     ],
+    plugins: { rxjs },
     settings: {
       // Reference https://www.npmjs.com/package/eslint-plugin-import
       'import/resolver': {
         // You will also need to install and configure the TypeScript resolver
         // See also https://github.com/import-js/eslint-import-resolver-typescript#configuration
-        'typescript': true,
-        'node': true,
-      }      
-    }
+        typescript: true,
+        node: true,
+      },
+    },
+    rules: {
+      'no-implicit-coercion': 'error',
+      'no-self-compare': 'error',
+      'no-unmodified-loop-condition': 'error',
+      'no-unreachable-loop': 'error',
+      'default-case': 'warn',
+      eqeqeq: 'error',
+      'max-classes-per-file': 'error',
+      'no-warning-comments': ['error', { terms: ['todo', 'fixme'], location: 'anywhere' }],
+      'no-console': 'error',
+      'prefer-template': 'error',
+      'arrow-body-style': ['error', 'as-needed'],
+
+      /**
+       * Declaration sort is handled by import/order rule.
+       * This rule handles order within {}-brackets only.
+       */
+      'sort-imports': ['error', { ignoreDeclarationSort: true }],
+
+      /**
+       * Handled by https://typescript-eslint.io/rules/no-unused-vars/
+       * You must disable the base rule as it can report incorrect errors
+       */
+      'no-unused-vars': 'off',
+
+      // Reference https://github.com/cartant/eslint-plugin-rxjs/blob/main/docs/rules/finnish.md
+      'rxjs/finnish': [
+        'error',
+        {
+          functions: false,
+          methods: false,
+          names: {
+            '^(canActivate|canActivateChild|canDeactivate|canLoad|intercept|resolve|validate)$': false,
+          },
+          parameters: true,
+          properties: true,
+          strict: false,
+          types: {
+            '^EventEmitter$': false,
+            '^Store$': false,
+          },
+          variables: true,
+        },
+      ],
+      'rxjs/no-exposed-subjects': ['error', { allowProtected: true }],
+      'rxjs/no-compat': 'error',
+      'rxjs/throw-error': 'error',
+
+      '@typescript-eslint/no-unused-vars': ['error', { args: 'after-used' }],
+      '@typescript-eslint/unbound-method': ['error', { ignoreStatic: true }], // Ignore `Validators.required` etc.
+      '@typescript-eslint/no-confusing-void-expression': 'off', // I just simply disagree with this rule
+      '@typescript-eslint/explicit-member-accessibility': [
+        'error',
+        { overrides: { constructors: 'no-public' } },
+      ],
+      '@typescript-eslint/prefer-optional-chain': 'error',
+
+      '@angular-eslint/no-input-rename': 'off', // I just simply disagree with this rule. Especially while using "transform" property.
+      '@angular-eslint/prefer-on-push-component-change-detection': 'error',
+      '@angular-eslint/use-component-view-encapsulation': 'warn', // For me, it is only a suggestion
+      '@angular-eslint/prefer-output-readonly': 'error', // TODO: https://github.com/jmeinlschmidt/eslint-config-angular/issues/14
+      '@angular-eslint/contextual-decorator': 'error',
+      '@angular-eslint/component-max-inline-declarations': ['error', { template: 20 }],
+      '@angular-eslint/no-attribute-decorator': 'error',
+      '@angular-eslint/no-conflicting-lifecycle': 'error',
+      '@angular-eslint/no-empty-lifecycle-method': 'error',
+      '@angular-eslint/no-forward-ref': 'warn', // For me, it is only a suggestion
+      '@angular-eslint/no-input-prefix': 'error',
+      '@angular-eslint/no-lifecycle-call': 'error',
+      '@angular-eslint/no-pipe-impure': 'error',
+      '@angular-eslint/no-queries-metadata-property': 'error',
+      '@angular-eslint/prefer-standalone': 'error',
+      '@angular-eslint/prefer-signals': 'error',
+      '@angular-eslint/relative-url-prefix': 'error',
+      // '@angular-eslint/require-localize-metadata': 'error', // TODO: https://github.com/jmeinlschmidt/eslint-config-angular/issues/13
+      '@angular-eslint/use-component-selector': 'error',
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'kebab-case', // I just don't really agree with using camelCase. Material isn't using it neither.
+        },
+      ],
+
+      'import/no-absolute-path': 'error',
+      'import/newline-after-import': ['error', { count: 1 }],
+      'import/order': [
+        'error',
+        {
+          groups: [['builtin', 'external'], 'internal', 'parent', 'sibling', 'index'],
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
+      'import/no-useless-path-segments': ['error', { noUselessIndex: true }],
+      // 'import/no-deprecated': 'error', // Throws false-positive for RxJS,
+      'import/no-self-import': 'error',
+    },
   },
   {
     files: ['**/*.html'],
-    extends: [
-      ...angular.configs.templateRecommended,
-      ...angular.configs.templateAccessibility,
-    ],
+    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
     rules: {
       '@angular-eslint/template/attributes-order': 'error',
       '@angular-eslint/template/no-inline-styles': 'warn', // For me, it is only a suggestion
       '@angular-eslint/template/conditional-complexity': [
-        'error', { 'maxComplexity': 3 } // Max 3 is enough, create derived variable with proper naming
+        'error',
+        { maxComplexity: 3 }, // Max 3 is enough, create derived variable with proper naming
       ],
       '@angular-eslint/template/i18n': 'error',
       '@angular-eslint/template/no-any': 'error',
@@ -49,12 +158,12 @@ const config = tseslint.config(
       '@angular-eslint/template/no-interpolation-in-attributes': 'error',
       '@angular-eslint/template/prefer-self-closing-tags': 'error',
       '@angular-eslint/template/use-track-by-function': 'error',
-      '@angular-eslint/template/prefer-control-flow': 'error'
+      '@angular-eslint/template/prefer-control-flow': 'error',
     },
   },
   // Prettier rule must always be the very last!
   // This rule might intentionally disable some rules declared above due to conflicts
-  eslintPluginPrettierRecommended
+  eslintPluginPrettierRecommended,
 );
 
 module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jkba/eslint-config-angular",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Opinionated ESLint config for Angular projects",
   "main": "index.js",
   "scripts": {
@@ -41,6 +41,7 @@
     "eslint-plugin-prettier": ">=5",
     "prettier": ">=3",
     "typescript": ">=4",
-    "typescript-eslint": "^8"
+    "typescript-eslint": "^8",
+    "@smarttools/eslint-plugin-rxjs": "^1.0.0"
   }
 }