Feature: Update eslint configuration when generating a new app

[brandonroberts]

Which scope/s are relevant/related to the feature request?

platform

Information

When using nx g @analogjs/platform:app to generate a new app, a .eslintrc.json is generated. This should be updated to generate a eslint.config.js that extends the root config.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[mlc-mlapis]

Please, do it. I've hit that moment right now.

[mlc-mlapis]

Is something like this JS version:

// eslint.config.js
const nx = require('@nx/eslint-plugin');
const baseConfig = require('../../eslint.config.js');

module.exports = [
  ...baseConfig,
  ...nx.configs['flat/angular'],
  ...nx.configs['flat/angular-template'],
  {
    files: ['**/*.ts'],
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        {
          type: 'attribute',
          prefix: 'AnalogApp',
          style: 'camelCase'
        }
      ],
      '@angular-eslint/component-selector': [
          'error',
          {
            type: 'element',
            prefix: 'analog-app',
            style: 'kebab-case'
          }
        ]
    }
  },
  {
    files: ['**/*.html'],
    // Override or add rules here
    rules: {}
  }
];

correct transformation to the following default created JSON version?

// .eslintrc.json
{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@nx/angular",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "AnalogApp",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "analog-app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@nx/angular-template"],
      "rules": {}
    }
  ]
}

[s0h311]

@brandonroberts I'd like to work on this.

[brandonroberts]

angular-eslint can be added using the ng lint command if not previously configured. This runs the angular-eslint schematic for you to do the initial installation.

You can also run npx ng add angular-eslint directly.

One note is in the angular.json to temporarily set the project root to an empty string instead of . before running the command. Then change it back after it completes.