@jkba/eslint-config-angular 1.2.0 → 1.3.1

package/README.md

@@ -16,6 +16,7 @@ npm i -D \
   @angular-eslint/template-parser \
   @typescript-eslint/eslint-plugin \
   @typescript-eslint/parser \
+  @ngrx/eslint-plugin \
   eslint-plugin-import \
   eslint-config-prettier \
   eslint-plugin-prettier \
@@ -48,6 +49,20 @@ module.exports = require('@jkba/eslint-config-angular/prettier.config');
 ```
 
 
+### Enable Prettier
+
+In VSCode, add the following lines to your `settings.json`
+
+```json
+{
+  "prettier.enable": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
+```
+
 ### Modifying rules
 
 Modify (add/disable/override) specific rules via the `rules` property:
@@ -96,6 +111,11 @@ PRs are welcome but keep in mind this is an opinionated configuration.
 Reference [Share Configurations](https://eslint.org/docs/latest/extend/shareable-configs).
 
 
+## Release
+
+Use `npm version`, don't forget to push the tag and the CI will take care of the rest.
+
+
 ## License
 
 This project is licensed under [MIT License](http://opensource.org/licenses/MIT/).

package/eslint.config.js

@@ -19,6 +19,7 @@ module.exports = {
         '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',
+        'plugin:@ngrx/all',
 
         // Prettier rule must always be the very last!
         // This rule might intentionally disable some rules declared above due to conflicts
@@ -44,8 +45,14 @@ module.exports = {
          */
         'sort-imports': [ 'error', { 'ignoreDeclarationSort': true }],
 
-        'rxjs-angular/prefer-async-pipe': 'error',
-        'rxjs-angular/prefer-composition': 'error',
+        /**
+         * 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',
+
+        'rxjs-angular/prefer-async-pipe': 'warn',
+        'rxjs-angular/prefer-composition': 'off', // I prefer takeUntilDestroyed() operator
         'rxjs-angular/prefer-takeuntil': 'error',
 
         // Reference https://github.com/cartant/eslint-plugin-rxjs/blob/main/docs/rules/finnish.md
@@ -71,6 +78,7 @@ module.exports = {
         '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': [
@@ -80,10 +88,9 @@ module.exports = {
         '@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: Not working (does nothing)
+        '@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/contextual-decorator': 'error',
         '@angular-eslint/no-attribute-decorator': 'error',
         '@angular-eslint/no-conflicting-lifecycle': 'error',
         '@angular-eslint/no-empty-lifecycle-method': 'error',
@@ -94,8 +101,24 @@ module.exports = {
         '@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: 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 } ],
@@ -137,7 +160,6 @@ module.exports = {
       plugins: ['@angular-eslint/template'],
       rules: {
         // '@angular-eslint/template/attributes-order': 'error', // TODO: Bug present (https://github.com/angular-eslint/angular-eslint/issues/1456)
-        '@angular-eslint/template/button-has-type': 'warn', // For me, it is only a suggestion
         '@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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jkba/eslint-config-angular",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Opinionated ESLint config for Angular projects",
   "main": "index.js",
   "scripts": {
@@ -35,15 +35,16 @@
     "@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",
+    "@ngrx/eslint-plugin": "^16.2.0",
+    "@typescript-eslint/eslint-plugin": ">=5",
+    "@typescript-eslint/parser": ">=5",
     "eslint": ">=8",
     "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",
-    "eslint-import-resolver-typescript": ">= 3.5.5",
     "prettier": ">=3",
     "typescript": ">=4"
   }