feat(@angular/cli): automatic formatting files modified by schematics

This change introduces automatic formatting of files generated or modified during a schematic execution.

When a schematic is executed, the CLI will now attempt to find and use the project's local Prettier installation to format all created or updated files. This ensures that generated code adheres to the project's established coding style without requiring developers to manually run a formatting command.

If Prettier is not installed in the user's workspace, the formatting step will be gracefully skipped. This avoids adding a direct dependency on Prettier to the CLI and respects the user's project setup. The implementation leverages the Prettier CLI directly for a more robust and reliable formatting process.

Closes #10777

Author: alan-agius4

packages/angular/cli/src/command-builder/schematics-command-module.ts

@@ -29,6 +29,7 @@ import {
   OtherOptions,
 } from './command-module';
 import { Option, parseJsonSchemaToOptions } from './utilities/json-schema';
+import { formatFiles } from './utilities/prettier';
 import { SchematicEngineHost } from './utilities/schematic-engine-host';
 import { subscribeToWorkflow } from './utilities/schematic-workflow';
 
@@ -361,7 +362,16 @@ export abstract class SchematicsCommandModule
 
       if (executionOptions.dryRun) {
         logger.warn(`\nNOTE: The "--dry-run" option means no changes were made.`);
+
+        return 0;
+      }
+
+      if (files.size) {
+        // Note: we could use a task executor to format the files but this is simpler.
+        await formatFiles(this.context.root, files);
       }
+
+      return 0;
     } catch (err) {
       // In case the workflow was not successful, show an appropriate error message.
       if (err instanceof UnsuccessfulWorkflowExecution) {
@@ -376,8 +386,6 @@ export abstract class SchematicsCommandModule
     } finally {
       unsubscribe();
     }
-
-    return 0;
   }
 
   private getProjectName(): string | undefined {

packages/angular/cli/src/command-builder/utilities/prettier.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { execFile } from 'node:child_process';
+import { createRequire } from 'node:module';
+import { dirname, extname, join, relative } from 'node:path';
+import { promisify } from 'node:util';
+
+const execFileAsync = promisify(execFile);
+let prettierCliPath: string | null | undefined;
+
+/**
+ * File types that can be formatted using Prettier.
+ */
+const fileTypes: ReadonlySet<string> = new Set([
+  '.ts',
+  '.html',
+  '.js',
+  '.mjs',
+  '.cjs',
+  '.json',
+  '.css',
+  '.less',
+  '.scss',
+  '.sass',
+]);
+
+/**
+ * Formats files using Prettier.
+ * @param cwd The current working directory.
+ * @param files The files to format.
+ */
+export async function formatFiles(cwd: string, files: Set<string>): Promise<void> {
+  if (prettierCliPath === undefined) {
+    try {
+      const prettierPath = createRequire(cwd + '/').resolve('prettier/package.json');
+      prettierCliPath = join(dirname(prettierPath), 'bin/prettier.cjs');
+    } catch {
+      // Prettier is not installed.
+      prettierCliPath = null;
+    }
+  }
+
+  if (!prettierCliPath) {
+    return;
+  }
+
+  await execFileAsync(prettierCliPath, [
+    '--write',
+    ...[...files].filter((f) => fileTypes.has(extname(f))).map((f) => relative(cwd, f)),
+  ]);
+}