feat(@angular/cli): ask to install angular-eslint when running ng lint in new projects

To improve the developer experience for the `ng lint` command in new projects, the lint command will now ask the developer if they wish to install `@angular-eslint/schematics` when no lint target has been configured for the specified project. `@angular-eslint/schematics` is currently the only option listed in the warning shown prior to the introduction of the prompt in this change. If additional example packages are added to the warning text in the future, the confirmation prompt should be changed to a list prompt which would allow the user to pick one of the potential future listed example packages.

Closes: #21387

Author: clydin

Diff for: packages/angular/cli/commands/lint-impl.ts

@@ -6,8 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import { spawnSync } from 'child_process';
+import * as path from 'path';
 import { ArchitectCommand } from '../models/architect-command';
 import { Arguments } from '../models/interface';
+import { askConfirmation } from '../utilities/prompt';
 import { Schema as LintCommandSchema } from './lint';
 
 const MissingBuilder = `
@@ -22,11 +25,33 @@ For example:
 export class LintCommand extends ArchitectCommand<LintCommandSchema> {
   override readonly target = 'lint';
   override readonly multiTarget = true;
-  override readonly missingTargetError = MissingBuilder;
 
   override async initialize(options: LintCommandSchema & Arguments): Promise<number | void> {
     if (!options.help) {
       return super.initialize(options);
     }
   }
+
+  override async onMissingTarget(): Promise<void | number> {
+    this.logger.warn(MissingBuilder);
+
+    const shouldAdd = await askConfirmation('Would you like to add ESLint now?', true, false);
+    if (shouldAdd) {
+      // Run `ng add @angular-eslint/schematics`
+      const binPath = path.resolve(__dirname, '../bin/ng.js');
+      const { status, error } = spawnSync(
+        process.execPath,
+        [binPath, 'add', '@angular-eslint/schematics'],
+        {
+          stdio: 'inherit',
+        },
+      );
+
+      if (error) {
+        throw error;
+      }
+
+      return status ?? 0;
+    }
+  }
 }

Diff for: packages/angular/cli/models/architect-command.ts

@@ -39,6 +39,23 @@ export abstract class ArchitectCommand<
   target: string | undefined;
   missingTargetError: string | undefined;
 
+  protected async onMissingTarget(projectName?: string): Promise<void | number> {
+    if (this.missingTargetError) {
+      this.logger.fatal(this.missingTargetError);
+
+      return 1;
+    }
+
+    if (projectName) {
+      this.logger.fatal(`Project '${projectName}' does not support the '${this.target}' target.`);
+    } else {
+      this.logger.fatal(`No projects support the '${this.target}' target.`);
+    }
+
+    return 1;
+  }
+
+  // eslint-disable-next-line max-lines-per-function
   public override async initialize(options: T & Arguments): Promise<number | void> {
     this._registry = new json.schema.CoreSchemaRegistry();
     this._registry.addPostTransform(json.schema.transforms.addUndefinedDefaults);
@@ -87,21 +104,12 @@ export abstract class ArchitectCommand<
       }
     }
 
-    if (targetProjectNames.length === 0) {
-      this.logger.fatal(
-        this.missingTargetError || `No projects support the '${this.target}' target.`,
-      );
-
-      return 1;
-    }
-
     if (projectName && !targetProjectNames.includes(projectName)) {
-      this.logger.fatal(
-        this.missingTargetError ||
-          `Project '${projectName}' does not support the '${this.target}' target.`,
-      );
+      return await this.onMissingTarget(projectName);
+    }
 
-      return 1;
+    if (targetProjectNames.length === 0) {
+      return await this.onMissingTarget();
     }
 
     if (!projectName && commandLeftovers && commandLeftovers.length > 0) {