create custom .editorconfig, .eslintrc.json and .prettierrc in new nx workspace

Question

When I create a new nx-workspace from the angular preset I would like to insert custom (company wide) configs of .editorconfig, .eslintrc.json and .prettierrc instead of copying them every time.

Is there a way to customize create-nx-workspace?

As a fallback I would be satisfied with some kind of "ng add ..." (or the right nx alternative) which overwrites the mentioned files.

score 0 · Accepted Answer · answered Oct 09 '21 at 09:01

I took this opportunity to look into Angular Schematics.

I have a small "ng-add" schematics, which overwrites the files with my own and installs the needed dependencies.

Since these are all files in the root directory, the schematic rule is as simple as (with all templates in the folder files like suggested):

import {
  Rule,
  SchematicContext,
  Tree,
  apply,
  url,
  mergeWith,
  template,
  MergeStrategy,
} from "@angular-devkit/schematics";

export function ngAdd(options: any): Rule {
  return (tree: Tree, context: SchematicContext) => {
    const templateSource = apply(url("./files"), [template(options)]);
    const merged = mergeWith(templateSource, MergeStrategy.Overwrite);
    return merged(tree, context);
  };
}

So after I created the workspace with npx create-nx-workspace --preset=angular I can just nx add my-schematics and it has the shape I need.

create custom .editorconfig, .eslintrc.json and .prettierrc in new nx workspace

1 Answers1