feat: allow prettier configuration in yaml (#2388)

Prettier doesn't support comments in it's json configuration file and emits a warning on unknown field (i.e. `//`) key in config, so the only option to have a marker in the generated config is to either use json5 or yaml for the config.

This PR proposes to follow [ESlint component design](https://github.com/projen/projen/blob/main/src/javascript/eslint.ts#L85) and adds `yaml` option to the `prettierSettings` that will output Prettier config in YAML format with appropriate generation marker.

---
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

src/javascript/prettier.ts

@@ -4,6 +4,7 @@ import { NodeProject } from "../javascript";
 import { JsonFile } from "../json";
 import { Project } from "../project";
 import { SourceCode } from "../source-code";
+import { YamlFile } from "../yaml";
 /**
  * Options for Prettier
  *
@@ -29,6 +30,12 @@ export interface PrettierOptions {
    * @see https://prettier.io/docs/en/configuration.html#configuration-overrides
    */
   readonly overrides?: PrettierOverride[];
+
+  /**
+   * Write prettier configuration as YAML instead of JSON
+   * @default false
+   */
+  readonly yaml?: boolean;
 }
 /**
  * Options to set in Prettier directly or through overrides
@@ -375,10 +382,17 @@ export class Prettier extends Component {
       ...options.settings,
     };
 
-    new JsonFile(project, ".prettierrc.json", {
-      obj: () => ({ ...this.settings, overrides: [...this._overrides] }),
-      marker: false,
-    });
+    if (options.yaml) {
+      new YamlFile(project, ".prettierrc.yml", {
+        obj: () => ({ ...this.settings, overrides: [...this._overrides] }),
+        marker: true,
+      });
+    } else {
+      new JsonFile(project, ".prettierrc.json", {
+        obj: () => ({ ...this.settings, overrides: [...this._overrides] }),
+        marker: false,
+      });
+    }
   }
 
   /**

test/javascript/prettier.test.ts

@@ -103,4 +103,21 @@ describe("prettier", () => {
       [override]
     );
   });
+
+  test("can output yml instead of json", () => {
+    // GIVEN
+    const project = new NodeProject({
+      name: "test",
+      defaultReleaseBranch: "main",
+      prettier: true,
+      prettierOptions: {
+        yaml: true,
+      },
+    });
+
+    // THEN
+    const output = synthSnapshot(project);
+    expect(output[".prettierrc.yml"]).toBeDefined();
+    expect(output[".prettierrc.json"]).toBeUndefined();
+  });
 });