feat(@angular/cli): ask to install angular-eslint when running ng lin…

…t 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

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;
+    }
+  }
 }

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) {