chore: improve handlebars support in extension (#2246)

Author: lifeart

README.md

@@ -22,6 +22,11 @@
     · Vue
     · Angular
   </em>
+  <em>
+    HANDLEBARS
+    · Ember
+    · Glimmer
+  </em>
   <br />
   <em>
     GraphQL
@@ -187,6 +192,7 @@ typescript
 typescriptreact
 json
 graphql
+handlebars
 ```
 
 ### Format Document (Forced)

package.json

@@ -26,6 +26,7 @@
     "prettier",
     "formatter",
     "javascript",
+    "handlebars",
     "js",
     "jsx",
     "flow",
@@ -47,6 +48,8 @@
     "swift",
     "html",
     "vue",
+    "ember",
+    "glimmer",
     "angular",
     "graphql",
     "yaml",
@@ -65,7 +68,7 @@
     "clean": "node ./scripts/clean.js",
     "lint": "eslint -c .eslintrc.js --ext .ts .",
     "pretest": "yarn test-compile && cd test-fixtures/plugins && yarn install && cd ../outdated && yarn install && cd ../module && yarn install && cd ../specific-version && yarn install && cd ../explicit-dep && yarn install && cd implicit-dep && yarn install",
-    "prettier": "prettier --write '**/*.{ts,json,md,yml,js}'",
+    "prettier": "prettier --write '**/*.{ts,json,md,hbs,yml,js}'",
     "test-compile": "yarn clean && tsc -p ./ && yarn webpack",
     "test": "node ./out/test/runTests.js",
     "version": "node ./scripts/version.js && git add CHANGELOG.md",
@@ -77,7 +80,7 @@
     "chrome": "yarn webpack && vscode-test-web --browserType=chromium --extensionDevelopmentPath=. ."
   },
   "lint-staged": {
-    "**/*.{ts,json,md,yml,js}": [
+    "**/*.{ts,json,md,yml,hbs,js}": [
       "prettier --write"
     ],
     "src/**/*.ts": [
@@ -411,6 +414,15 @@
         "extensions": [
           ".vue"
         ]
+      },
+      {
+        "id": "handlebars",
+        "extensions": [
+          ".hbs",
+          ".gjs",
+          ".gts",
+          ".handlebars"
+        ]
       }
     ],
     "commands": [

src/PrettierEditService.ts

@@ -63,6 +63,7 @@ export default class PrettierEditService implements Disposable {
     "typescriptreact",
     "json",
     "graphql",
+    "handlebars",
   ];
 
   constructor(

src/test/suite/config.test.ts

@@ -33,6 +33,11 @@ suite("Test configurations", function () {
     /* cspell: disable-next-line */
     testConfig("jsfile/test.js", "jsfile/test.result.js")
   );
+  test(
+    "it uses config from .prettierrc.js file for hbs files",
+    /* cspell: disable-next-line */
+    testConfig("hbsfile/test.hbs", "hbsfile/test.result.hbs")
+  );
   test(
     "it uses config from .editorconfig file ",
     testConfig("editorconfig/test.js", "editorconfig/test.result.js")

src/test/suite/format.test.ts

@@ -120,4 +120,5 @@ suite("Test format Document", function () {
   test("it formats HTML with literals", () =>
     formatSameAsPrettier("formatTest/htmlWithLiterals.html"));
   test("it formats Vue", () => formatSameAsPrettier("formatTest/ugly.vue"));
+  test("it formats HBS", () => formatSameAsPrettier("formatTest/ugly.hbs"));
 });

test-fixtures/config/hbsfile/prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    singleQuote: false,
+    useTabs: false,
+    tabWidth: 3
+}

test-fixtures/config/hbsfile/test.hbs

@@ -0,0 +1,5 @@
+    {{my-component}}
+
+          <MyTemplate @foo="bar">
+    {{@foo.bar.baz}}
+</MyTemplate>              

test-fixtures/config/hbsfile/test.result.hbs

@@ -0,0 +1,5 @@
+{{my-component}}
+
+<MyTemplate @foo="bar">
+   {{@foo.bar.baz}}
+</MyTemplate>

test-fixtures/project/formatTest/ugly.hbs

@@ -0,0 +1,6 @@
+<template>
+    <p>Hello</p>
+
+
+
+</template>

test-fixtures/test.code-workspace

@@ -78,6 +78,9 @@
     "[html]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
+    "[handlebars]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
     "[vue]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
@@ -93,4 +96,4 @@
       "**/*.abc"
     ],
   }
-}
+}