Use Prettier to format YAML

[Fydon]

Added formatting of YAML files to Prettier, formatted comments in YAML files so that they end up in the correct indentation and changed YAML files that are formatted with an indent of 2 space to 4

Fix #8805

• Please make sure the below checklist is followed for Pull Requests.

• Travis tests are green

• Tests are added where necessary

• Documentation is added/updated where necessary

• Coding Rules & Commit Guidelines as per our CONTRIBUTING.md document are followed

[DanielFran]

@Fydon can you also include yaml files to format for example Helm files available in Kubernetes folder? Thanks

Edit: forget, yaml files were already updated to yml.

[murdos]

Changes in packages.json.ejs is fine. But the change of formatting in templates is not required.
Instead, you should add the yml extension to this line: https://github.com/jhipster/generator-jhipster/blob/master/generators/generator-base-private.js#L1304 so YAML files will be prettified during the project generation.

It's way better to let Prettier fix our templates on the fly than to maintain prettified templates ;)

[Fydon]

@DanielFran my current pull request focuses on the current definition of applying Prettier to the src folder. In my project I've extented formatting to the entire project, but with the Prettier ignore file slightly tweaked.

@murdos Some of the formatting is for consistency, so technically unnecessary, but other formatting is due to Prettier formatting comments in such a way that puts them at the wrong indentation so that the YAML is now incorrect, potentially leaving a new user lost when their project is broken when they uncomment. Therefore I felt it worth testing the output and tweaking the comments to be positioned where we would expect them to be, rather then where Prettier has put them. This is why leaving Prettier as a post process could cause problems. Also converting files from 2 space indentation to 4 to match the Prettier configuration, might help having future comments indent to the correct level.

[Fydon]

Is the generator using the Prettier from the package.json at the root? The React and Angular package.json files are now using the latest versions, so I don't know why the builds started failing with the error No parser could be inferred for file: src/main/docker/app.yml when I added this change to have Prettier run after generation.

[murdos]

Is the generator using the Prettier from the package.json at the root?

Yes. So I guess we should update to the latest version here too.
Could you do that? Thanks.

[Fydon]

Yes I'll update that.

Should I update eslint-config-prettier and eslint-plugin-prettier as well? Would that mean that I should also update eslint and the other related dependencies?

As a result of updating Prettier for React, I also updated tslint and tslint-config-prettier, which makes them the same as Angular.

[murdos]

Should I update eslint-config-prettier and eslint-plugin-prettier as well? Would that mean that I should also update eslint and the other related dependencies?

Yeah, please update them too.

[Fydon]

Sure. Updated them. I've looked through the change logs, but didn't see any problems: eslint, eslint-config-prettier, eslint-plugin-import and eslint-plugin-prettier.

[Fydon]

What is the reason for setting eslint-plugin-prettier to error on files not conforming to the Prettier formatting? I thought the Prettier formatting would be applied as a post process to "fix" any files. I assume that this is resulting in this test failing.

[Fydon]

1. Following on from my previous comment, should we use something like lint-staged to force running eslint --fix or Prettier on commit?
2. Should I include .yml in package.json so that .travis.yml and azure-pipeliness.yml are formatted by Prettier?

I've now run eslint --fix so that the tests should pass.

[murdos]

1. Following on from my previous comment, should we use something like `lint-staged` to force running `eslint --fix` or Prettier on commit?

We don't do that for other files, so no.

2. Should I include `.yml` in [package.json](https://github.com/jhipster/generator-jhipster/pull/9281/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R39) so that `.travis.yml` and `azure-pipeliness.yml` are formatted by Prettier?

I'm not sure.
@pascalgrimaud : what do you think?

I've now run eslint --fix so that the tests should pass.

Great! Could you also resolve the conflicts? Then we should be able to merge.

[pascalgrimaud]

I'm ok for formatting the Travis and Azure file, used for our Continuous Integration, if it doesn't break anything :-)

[Fydon]

I've now also applied the formatting to the Travis and Azure files.

@murdos I only suggested lint-staged because that is what the Angular and React projects generated by this project use, but sure I'll leave it as is.

I've resolved the conflicts, which included package-lock.json. I can't tell for certain what the result of dependencies are for package-lock.json, so I instead used npm to provide a valid package-lock.json with the resolved package.json file. I'll wait for the tests to complete, but probably should rather merge current changes into my branch and then push my branch again to minimise the differences.

[Fydon]

I've rebased my changes to the latest master even though all the tests passed, as it probably results in a better package-lock.json.

[murdos]

Thanks Fydon ! 👍