use Prettier for Glimmer templates (#731)

.template-lintrc.js

@@ -1,7 +1,8 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended',
+  plugins: ['ember-template-lint-plugin-prettier'],
+  extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
   rules: {
     'no-implicit-this': {
       allow: ['scroll-first-invalid-element-into-view-port'],

app/components/language-select.hbs

@@ -1,5 +1,5 @@
 {{! template-lint-disable require-input-label }}
-<select class='language-select' {{on 'change' this.handleChange}}>
+<select class="language-select" {{on "change" this.handleChange}}>
   {{#each-in this.locales as |localeKey localeName|}}
     <option value={{localeKey}} selected={{eq localeKey this.currentLocale}}>
       {{localeName}}

package-lock.json

@@ -64,6 +64,7 @@
         "ember-sinon-qunit": "^7.4.0",
         "ember-source": "~5.4.0",
         "ember-template-lint": "^5.11.2",
+        "ember-template-lint-plugin-prettier": "^5.0.0",
         "ember-test-selectors": "^6.0.0",
         "ember-truth-helpers": "^4.0.0",
         "eslint": "^8.49.0",
@@ -9626,6 +9627,18 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@prettier/sync": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.2.1.tgz",
+      "integrity": "sha512-7ls1R6//+GPYD9vof1XaL5psViv83CwpdwlS8oUkWldYgbPhzZ3WgxIQMWqGyBmWPmoBfQg8C7jj7KI/ZuDHhQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/prettier/prettier-synchronized?sponsor=1"
+      },
+      "peerDependencies": {
+        "prettier": "^3.0.0"
+      }
+    },
     "node_modules/@release-it-plugins/lerna-changelog": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@release-it-plugins/lerna-changelog/-/lerna-changelog-6.0.0.tgz",
@@ -38949,6 +38962,23 @@
         "node": "^14.18.0 || ^16.0.0 || >= 18.0.0"
       }
     },
+    "node_modules/ember-template-lint-plugin-prettier": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ember-template-lint-plugin-prettier/-/ember-template-lint-plugin-prettier-5.0.0.tgz",
+      "integrity": "sha512-aXUYM4yuIdPZ80+AsAU8QBwGSJJ/aAkRsNcQ5vI5HmXiBjzHlDc/ZhmP6iVcYuCmoA/3iKcssMAYwIDbuby4pg==",
+      "dev": true,
+      "dependencies": {
+        "@prettier/sync": "^0.2.1",
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "ember-template-lint": ">= 4.0.0",
+        "prettier": ">= 3.0.0"
+      }
+    },
     "node_modules/ember-template-lint/node_modules/chalk": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",

package.json

@@ -83,6 +83,7 @@
     "ember-sinon-qunit": "^7.4.0",
     "ember-source": "~5.4.0",
     "ember-template-lint": "^5.11.2",
+    "ember-template-lint-plugin-prettier": "^5.0.0",
     "ember-test-selectors": "^6.0.0",
     "ember-truth-helpers": "^4.0.0",
     "eslint": "^8.49.0",

tests/integration/components/create-options-test.js

@@ -16,14 +16,12 @@ module('Integration | Component | create options', function (hooks) {
   test('shows validation errors if options are not unique (makeAPoll)', async function (assert) {
     this.set('options', new TrackedSet());
 
-    await render(hbs`
+    await render(hbs`<CreateOptions
-      <CreateOptions
+  @options={{this.options}}
-        @options={{this.options}}
+  @isDateTime={{false}}
-        @isDateTime={{false}}
+  @isFindADate={{false}}
-        @isFindADate={{false}}
+  @isMakeAPoll={{true}}
-        @isMakeAPoll={{true}}
+/>`);
-      />
-    `);
 
     assert
       .dom('.form-group')
@@ -55,14 +53,12 @@ module('Integration | Component | create options', function (hooks) {
   test('shows validation errors if option is empty (makeAPoll)', async function (assert) {
     this.set('options', new TrackedSet());
 
-    await render(hbs`
+    await render(hbs`<CreateOptions
-      <CreateOptions
+  @options={{this.options}}
-        @options={{this.options}}
+  @isDateTime={{false}}
-        @isDateTime={{false}}
+  @isFindADate={{false}}
-        @isFindADate={{false}}
+  @isMakeAPoll={{true}}
-        @isMakeAPoll={{true}}
+/>`);
-      />
-    `);
 
     assert.dom('.form-group.has-error').doesNotExist();
 

tests/integration/helpers/mark-as-safe-html-test.js

@@ -10,7 +10,7 @@ module('Integration | Helper | mark-as-safe-html', function (hooks) {
   test('it renders', async function (assert) {
     this.set('inputValue', '1234');
 
-    await render(hbs`{{mark-as-safe-html "<p>foo</p>"}}`);
+    await render(hbs`{{mark-as-safe-html '<p>foo</p>'}}`);
 
     assert.dom('p').exists();
     assert.dom('p').hasText('foo');