Automatically run a formatter command after `ng generate`

[supdegrave]

Versions

Angular CLI: 6.0.0
Node: 9.5.0
OS: darwin x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.0
@angular-devkit/build-angular      0.6.0
@angular-devkit/build-ng-packagr   0.6.0
@angular-devkit/build-optimizer    0.6.0
@angular-devkit/core               0.6.0
@angular-devkit/schematics         0.6.0
@angular/cdk                       6.0.1
@angular/material                  6.0.1
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.0
@schematics/angular                0.6.0
@schematics/update                 0.6.0
ng-packagr                         3.0.0-rc.3
rxjs                               6.1.0
typescript                         2.7.2
webpack                            4.6.0

Repro steps

• $ ng new ng6-test
• $ cd ng6-test
• Open .editorconfig and change indent_size = 2 to indent_size = 4, and save.
• Open angular.json in VSCode and run 'Format Document', and save.
• $ ng generate library fnord
• Open ./ng6-test/projects/fnord/src/lib/fnord.component.ts.

Observed behavior

• angular.json is restored default indent size
• fnord.component.ts is generated with indent_size = 2 as well

Both files ignore .editorconfig setting.

Desired behavior

• Generated files should honor .editorconfig settings.
• Files should not be restored to default indent_size after setting is changed to a different value.

Mention any other details that might be useful (optional)

[clydin]

The file is provided purely for IDE usage and as a convenience thereof. The CLI does not otherwise use it. Post-generation formatting is currently at the discretion of the developer.

[supdegrave]

Post-generation formatting is currently at the discretion of the developer.

I understand that, even though I think that generating files with respect to .editorconfig would be a nice-to-have feature.

However, post-generation formatting isn't respected in the repro I described. angular.json gets reset to the CLI's internal generation default on ng new library ..., even if post-generation formatting has previously been applied.

[ThYpHo0n]

Even if there is no .editorconfig Angular CLI should respect the existing indent it finds in the package.json

Yes, this is minor but still annoying. Npm does respect the codestyle therefore I would expect that tools who change it follow the same.

[zihotki]

Editorconfig was created to unify settings for all editors so that files will be uniformly formatted with proper line endings, identation, etc. And it's widely adopted.

Since angular-cli creates/modifies files, it'd be great if it would also respect the setting.

[akialapiha]

Still waiting for this to happen 🤔

[saxicek]

I would not bother Angular development team with this. It would only polute their code and I imagine they have some real features to work on.

Code formatting from my perspective should be left to machines - what prevents you to run Prettier or whatever tool you use (https://github.com/htmlacademy/editorconfig-cli?) after the migration?

[dgp1130]

Discussed this with the tooling team today and the issue really comes down to dependency management. It would be great for ng generate to respect any conventions your team has agreed on, however making that happen is more complicated. .editorconfig is one means of defining this, but many teams use Prettier or other tools directly. Even if there is a tool that will just format a file based on the .editorconfig (I haven't looked), it probably wouldn't be reasonable to depend on that tool from the CLI. We don't have a first-class integration with formatters or any specific way to integrate and set up them up beyond the way it usually works for TypeScript. In many ways, that's a good thing to reduce coupling between these systems, but also adds friction between the tools, such as ng generate creating non-compliant files.

A better approach might be to make things more flexible to allow developers to configure their project according to their own processes and tools without creating a hard dependency between the CLI and any specific formatting tools. Our initial idea would be to add some kind of formatter: "./code-formatter --format" option to angular.json, which would allow teams to define a command to format files in a way that Angular understands. Then ng generate could automatically run that formatter after generating a file. This would allow devs to specify whatever formatter they want, which could just follow their .editorconfig setup or any other config file they use.

Long term, it would be super cool for ng add prettier to automatically add "formatter": "prettier" to your angular.json, so users don't need to worry about it. That has other complexity as we would want to be flexible for many different formatters and also don't want special knowledge or treatment of specific ones. Probably out of scope for this issue, but a possible future to keep in mind.

I'm going to rescope this issue to supporting an explicit formatter configuration, as that feels like the right abstraction for addressing this kind of use case.