npm - @jkba/eslint-config-angular - Versions diffs - 1.7.1 → 2.0.0 - Mend

@jkba/eslint-config-angular 1.7.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -5,25 +5,21 @@
 Opinionated ESLint config for Angular projects
-> ⚠️ **Support for ESLint v9**: See issue https://github.com/jmeinlschmidt/eslint-config-angular/issues/17
 ## Installation
 ```sh
 npm i -D \
   prettier \
-  @angular-eslint/eslint-plugin \
-  @angular-eslint/eslint-plugin-template \
-  @angular-eslint/template-parser \
-  @typescript-eslint/eslint-plugin \
-  @typescript-eslint/parser \
+  angular-eslint \
   eslint-plugin-import \
   eslint-config-prettier \
   eslint-plugin-prettier \
   eslint-plugin-rxjs \
   eslint-plugin-rxjs-angular \
   eslint-import-resolver-typescript \
+  @eslint/js \
+  typescript-eslint \
   @jkba/eslint-config-angular
 ```

package/eslint.config.js CHANGED Viewed

@@ -1,194 +1,68 @@
-module.exports = {
-  overrides: [
-    {
-      files: [
-        '*.ts'
-      ],
-      parser: '@typescript-eslint/parser',
-      parserOptions: {
-        ecmaVersion: 2019,
-        project: './tsconfig.json',
-        sourceType: 'module',
-      },
-      extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/stylistic-type-checked',
-        'plugin:@typescript-eslint/strict-type-checked',
-        'plugin:@angular-eslint/recommended',
-        'plugin:@angular-eslint/template/process-inline-templates',
-        'plugin:rxjs/recommended', // For some unknown weird reason, this plugin needs to be installed in child project as well.
-        'plugin:import/recommended',
-        'plugin:import/typescript',
+// @ts-check
-        // Prettier rule must always be the very last!
-        // This rule might intentionally disable some rules declared above due to conflicts
-        'plugin:prettier/recommended',
-      ],
-      plugins: ['@typescript-eslint', '@angular-eslint', 'rxjs', 'rxjs-angular', 'import'],
-      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,
-        }
-      },
-      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'],
+const eslint = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const angular = require('angular-eslint');
+const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
+const importPlugin = require('eslint-plugin-import');
-        /**
-         * Declaration sort is handled by import/order rule.
-         * This rule handles order within {}-brackets only.
-         */
-        'sort-imports': [ 'error', { 'ignoreDeclarationSort': true }],
+const config = tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  {
+    files: ['**/*.ts'],
+    processor: angular.processInlineTemplates,
+    extends: [
+      eslint.configs.recommended,
+      tseslint.configs.stylisticTypeChecked,
+      tseslint.configs.strictTypeChecked,
+      angular.configs.tsRecommended,
+      // '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,
+    ],
+    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,
+      }
+    }
+  },
+  {
+    files: ['**/*.html'],
+    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
+      ],
+      '@angular-eslint/template/i18n': 'error',
+      '@angular-eslint/template/no-any': 'error',
+      '@angular-eslint/template/no-duplicate-attributes': 'error',
+      '@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'
+    },
+  },
+  // Prettier rule must always be the very last!
+  // This rule might intentionally disable some rules declared above due to conflicts
+  eslintPluginPrettierRecommended
+);
-        /**
-         * 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',
+module.exports = config;
-        'rxjs-angular/prefer-async-pipe': 'warn',
-        'rxjs-angular/prefer-composition': 'off', // I prefer takeUntilDestroyed() operator
-        'rxjs-angular/prefer-takeuntil': [
-          'warn',
-          {
-            alias: ['takeUntilDestroyed'],
-            checkDestroy: false,
-            checkComplete: false,
-          }
-        ],
+// notes
-        // 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/sort-ngmodule-metadata-arrays': 'error',
-        '@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-component': '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'
-      ],
-      parser: '@angular-eslint/template-parser',
-      extends: [
-        'plugin:@angular-eslint/template/accessibility',
-        'plugin:@angular-eslint/template/recommended',
+// these two are not supported anymore
+// "eslint-plugin-rxjs": ">=5",
+// "eslint-plugin-rxjs-angular": ">=2",
-        // Prettier rule must always be the very last!
-        // This rule might intentionally disable some rules declared above due to conflicts
-        'plugin:prettier/recommended',
-      ],
-      plugins: ['@angular-eslint/template'],
-      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
-        ],
-        '@angular-eslint/template/i18n': 'error',
-        '@angular-eslint/template/no-any': 'error',
-        '@angular-eslint/template/no-duplicate-attributes': 'error',
-        '@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'
-      }
-    },
-  ],
-}
+// todo, test if we really need peer deps

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jkba/eslint-config-angular",
-  "version": "1.7.1",
+  "version": "2.0.0",
   "description": "Opinionated ESLint config for Angular projects",
   "main": "index.js",
   "scripts": {
@@ -32,19 +32,15 @@
   },
   "homepage": "https://github.com/jmeinlschmidt/eslint-config-angular#readme",
   "peerDependencies": {
-    "@angular-eslint/eslint-plugin": ">=16",
-    "@angular-eslint/eslint-plugin-template": ">=16",
-    "@angular-eslint/template-parser": ">=16",
-    "@typescript-eslint/eslint-plugin": ">=6",
-    "@typescript-eslint/parser": ">=6",
-    "eslint": "^8",
+    "angular-eslint": "^19",
+    "eslint": "^9",
+    "@eslint/js": "^9",
     "eslint-config-prettier": ">=8",
     "eslint-import-resolver-typescript": ">=3.5.5",
     "eslint-plugin-import": ">=2.27.0",
     "eslint-plugin-prettier": ">=5",
-    "eslint-plugin-rxjs": ">=5",
-    "eslint-plugin-rxjs-angular": ">=2",
     "prettier": ">=3",
-    "typescript": ">=4"
+    "typescript": ">=4",
+    "typescript-eslint": "^8"
   }
 }