Is there a way to lint handlebars?

I was looking for a way to lint handlebars files in discourse. I did find a command that seems to run but doesn’t make any changes or list issues.

yarn ember-template-lint --fix path/to/files

I’m not sure if its even supposed to work at this point.

4 Likes

yarn ember-template-lint <dir> should be the correct command.

8 Likes

Thanks. But doesn’t seem to report anything back. I tried to run it on a broken file but it doesn’t display errors or fix them.

1 Like

@cvx you just implemented this on our plugin workflows – is there something special we need to do to use this?

3 Likes

No magic required :slightly_smiling_face: but make sure you run the command in the root directory of Discourse. This got me a couple times already.

Compare:

# in [discourse]/app/assets/javascripts
$ yarn ember-template-lint .
✨  Done in 2.57s.
# in [discourse]
$ yarn ember-template-lint app/assets/javascripts
app/assets/javascripts/discourse/app/templates/tags.hbs
  4:0  error  Unexpected {{debugger}} usage.  no-debugger
  4:0  error  Usage of triple curly brackets is unsafe  no-triple-curlies
  3:15  error  Incorrect indentation for `d-section` beginning at L1:C0. Expected `{{/d-section}}` ending at L3:C15 to be at an indentation of 0 but was found at 1.  block-indentation
  2:4  error  Incorrect indentation for `{{outlet}}` beginning at L2:C4. Expected `{{outlet}}` to be at an indentation of 2 but was found at 4.  block-indentation
  1:23  error  you must use double quotes in templates  quotes

✖ 5 problems (5 errors, 0 warnings)
error Command failed with exit code 1.

Also, keep in mind it will use our config (.template-lintrc.js) so it might not report all expected issues as some rules are currently disabled.


@justin I just realized that our plugin GitHub Actions workflows currently don’t share this config. We should change that at some point. :smiley:

9 Likes

Will this run in plugins/? I’m betting that’s where @fzngagan is interested in using this.

5 Likes

If the plugin is located in plugins directory, sure! :smiley:

$ yarn ember-template-lint plugins
plugins/poll/assets/javascripts/discourse/templates/modal/poll-breakdown.hbs
  1:22  error  you must use double quotes in templates  quotes
4 Likes

I’m pretty sure I’m doing the same thing, but will try again and let you know.

Ember template lint cant fix everything, just like eslint, and actually ember template lint can only fix a few things, unlike eslint.

It will mostly report errors, but you manually have to fix them.

3 Likes

Here’s what I’ve tried.

I tried by breaking a rule with discourse itself. Works

I tried by breaking a rule with discourse-custom-wizard plugin which was in the discourse directory as a symlink. Doesn’t work

I tried the same with the poll plugin which is the part of the discourse repo. I also tried it with other plugins which are shipped with discourse. Works

I tried by breaking a rule with discourse-custom-wizard plugin again, this time copying it to the discourse’s plugin folder. Doesn’t work

I tried by breaking a rule with discourse-assign plugin placing the folder in plugins. Doesn’t work

1 Like

For me:

works

yarn ember-template-lint plugins/discourse-pfaffmanager/assets/javascripts/discourse/templates/user/servers/show.hbs 

does not work

yarn ember-template-lint plugins/discourse-pfaffmanager/assets/javascripts/discourse/templates/user/servers/

And should my assets be inside of app?

1 Like

Ah, yes. The issue is that ember-template-lint automatically takes .gitignore into account. And non-bundled plugins are ignored.

So, to run template linting on all plugins:

yarn ember-template-lint --no-ignore-pattern plugins

# or any other directory, e.g. a single plugin:
yarn ember-template-lint --no-ignore-pattern plugins/discourse-calendar
5 Likes

Thanks. Works like a charm.

3 Likes

Thanks for that! Also, is there a way to get it to auto fix stuff? I tried adding --fix to no avail.

It works, but:

  1. there are only a handful of rules that are auto-fixable (see: GitHub - ember-template-lint/ember-template-lint: Linter for Ember or Handlebars templates)
  2. of those only two are in the “recommended” ruleset (link-rel-noopener and require-button-type)
2 Likes