Dashboard: Introduce HTML formatter to the project

[bryk]

Like this one: https://www.npmjs.com/package/gulp-prettify

The formatter would save us code review time and produce consistent code.

The proposal is pretty similar to what we have with JS now. In gulp lint check that HTML formatter does not change the code.

@maciaszczykm Can you take it? :)

[maciaszczykm]

@bryk Sure, I can.

[maciaszczykm]

I think, that gulp-prettify might not be suitable for us, because of missing configuration options.

First of all it doesn't allow to define max line length, which makes some lines 200-300 characters long. It's too much and there is no option to fix it using gulp-prettify. I've made research and there are not too much HTML formatters for Gulp.

Second thing is formatting style, which seems to be strange, from this:

<md-input-container class="md-block" layout-wrap>
  <label>Image pull secret data</label>
  <textarea name="data" ng-model="ctrl.data" class="kd-secret-data"
            columns="1" rows="5"  ng-pattern="ctrl.dataPattern" required></textarea>
  <div ng-messages="ctrl.secretForm.data.$error" role="alert" multiple>
      <div ng-message="required">Data is required</div>
      <div ng-message="pattern">Data must be Base64 encoded</div>
  </div>
</md-input-container>

To this:

<md-input-container class="md-block" layout-wrap> <label>Image pull secret data</label> <textarea name="data" ng-model="ctrl.data" class="kd-secret-data" columns="1" rows="5" ng-pattern="ctrl.dataPattern" required></textarea>
   <div ng-messages="ctrl.secretForm.data.$error" role="alert" multiple>
      <div ng-message="required">Data is required</div>
      <div ng-message="pattern">Data must be Base64 encoded</div>
   </div>
</md-input-container>

Here is Gulp task, that I've used:

gulp.task('prettify', function() {
  gulp.src([path.join(conf.paths.frontendSrc, '**/*.html')])
      .pipe(prettify({
        indent_size: 2,
      }))
      .pipe(gulp.dest(conf.paths.frontendSrc))
});

Other possible configuration options are:

indent_handlebars: true,
indent_inner_html: true,
preserve_newlines: false,
max_preserve_newlines: 1,
brace_style: 'expand',
indent_char: ' ',
indent_size: 2

But none of them seems to solve mentioned issues. I'll do more research and let you know if I'll find anything useful :)

[maciaszczykm]

Okay, I missed some options. Will take a look on them: https://github.com/beautify-web/js-beautify

[floreks]

Try these settings:

indent_size: 2,
preserve_newlines: true,
max_preserve_newlines: 0,
end_with_newline: true,
 wrap_line_length: 100,

I think it looks quite good.

[maciaszczykm]

@floreks Thanks for spotting, that:

preserve_newlines: true,
max_preserve_newlines: 0,

Works fine, and:

preserve_newlines: false,

Does not.

[maciaszczykm]

Investigated in once more. It seems, that there isn't any good Gulp HTML formatter. Closing it for now.

We can use IDE built-in formatters.

[maciaszczykm]

Done in #1760.