Incorrect indentation of htmlAttribute

1

Hi all,

I do not understand this message in the new ember.

incorrect-indentation
incorrect-indentation2150×1048 342 KB

First line:

4:10  error  Incorrect indentation of htmlAttribute 'type' beginning at L4:C10. Expected 'type' to be at L5:C4.  attribute-indentation

I try to migrate an old project from Ember 2.14.0 to Ember 3.5.0 and this template is only copied from old to new project. I search for days but I do not understand what’s wrong…

Hope for help :slight_smile:

Best regards Mario

2

Template linting is turned on by default in the newest versions of Ember. This is simply the template linter suggesting (at least I think) that instead of having all of the HTML attributes for the button on the same line like this:

<button type="button" class="..." ...>

That you write it more like this:

<button
  type="button"
  class="..."
  ...
>

If you dont’ want to bother with all this you can probably change the template linting rules or just disable template linting altogether.

2 Likes
3

Many thanks for this tipp. I try to disable this “attribute-indentation ( indent - ESLint - Pluggable JavaScript Linter )” in the .eslintrc.js by:

rules: {
    "indent": "off"
  }

… but nothing happens. :frowning:

What means the .template-lintrc.js ?

4

eslint is the library for linting .js files, so that’s not what you want.

.template-lintrc.js is a file added to newer ember projects and it configures the template linter. That’s where you want to put your rule configuration. If you don’t have that file it may not have run all the blueprints correctly when upgrading 3.5. I just started a 3.5 project and the file looks like this:

'use strict';

module.exports = {
  extends: 'recommended'
};
5

Hi dknutsen,

Thanks for your tipp last days. I tried it but also nothin happens here.

This is my .template-lintrc.js

'use strict';

module.exports = {
  extends: 'recommended',
  rules: {
    "indent": "off"
  }
};

The errors for Incorrect indentations are still in log by starting the app.

Greeetings, Mario

6

That looks like the wrong rule name, I think you want “attribute-indentation” (see the docs for details) like so:

module.exports = {
  extends: 'recommended',
  rules: {
    "attribute-indentation": false
  }
};
1 Like
7

Ok… it runs. This is my current file:

'use strict';

module.exports = {
  extends: 'recommended',
  rules: {
    "attribute-indentation": false,
    "block-indentation": false
  }
};

But one last question so far: I search a documentation about all available possible “ember linting” errors because I do not find any rules like “attribute-indentation” for eslint ( Rules - ESLint - Pluggable JavaScript Linter ). …Ok… now I found this: https://github.com/ember-template-lint/ember-template-lint/tree/master/docs/rule

But why ember do not use the original rules from eslint?

8

Like I mentioned above eslint and the template linter are two different things. ESLint is meant to lint javascript files (es => ecmascript which is javascript) and the template linter is meant to lint your htmlbars hbs files. Separate libraries, separate rules.

9

This is the type of default that scares people away from Ember : (

1 Like
10

yeah IMO it’s a VERY aggressive linting rule and probably shouldn’t be on by default but :man_shrugging:

2 Likes
11

This kind of errors does not cause any problems in running the program., The reason for the indentation error is Ember templates( handlebars ) prefer indentation of 2 spaces, but when we use most IDEs, it automatically indent to 4 spaces. So what you have to do is, use sublime text and at the right bottom, you can see an option tab-size, make it 2 when you use handlebars

12

OK … Now I understand it. :slight_smile:

Best regards,

Mario