prettier-plugin-ember-template-tag

prettier-plugin-ember-template-tag

A Prettier plugin for formatting Ember template tags in both .gjs and .gts files. See also Ember Template Imports.

Usage

1. Install:

   NPM:

   npm install --save-dev prettier prettier-plugin-ember-template-tag
   

   Yarn:

   yarn add --dev prettier prettier-plugin-ember-template-tag
   

   PNPM:

   pnpm add --save-dev prettier prettier-plugin-ember-template-tag
   

2. Configure with prettierrc:

   // .prettierrc.js
   module.exports = {
     // ...
     plugins: ['prettier-plugin-ember-template-tag'],
   };
   

3. Run npm prettier --write .

Opinions

This plugin works by weaving together Prettier's standard babel-ts and glimmer parsers, so it doesn't have many opinions of its own.

With that said, I did have to make some decisions about when and where to include or omit semicolons. You can read more about and comment on my decision process on this RFC.

Configuration

These configuration options are available in addition to Prettier's standard config for JavaScript and Handlebars files.

Name	Default	Description
templateExportDefault	false	If true, default export template tags will be prepended with export default.
templateSingleQuote	undefined	Same as in Prettier but affecting only template tags. If undefined, will fall back to whatever is set for the global singleQuote config.

Editor integration

VSCode

1. Install Prettier and this plugin as shown above.

2. Install the Prettier - Code Formatter VSCode Extension.

3. Reload your VSCode window.

4. The format command and format-on-save should now work for .gjs and .gts files. You might need to wait a few seconds for the Prettier extension to register the plugin. If this does not work, you can manually set Prettier as the default formatter for .gjs and .gts as shown below, like so, but please file an issue if you need to do this:

   // .vscode/settings.json
   {
     "[gjs]": {
       // "editor.formatOnSave": true,
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
   
     "[gts]": {
       // "editor.formatOnSave": true,
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
   }
   

Ignoring code

Because gts/gjs files include both JavaScript and Glimmer template code, you'll need to use the appropriate prettier-ignore comment for the code you are ignoring:

export default class MyComponent extends Component {
  // prettier-ignore
  cells = matrix(
    1, 0, 0,
    0, 1, 0,
    0, 0, 1
  )

  <template>
    {{! prettier-ignore }}
    {{#each this.cells as |cell|}}{{cell.contents}}{{/each}}
  </template>
}

To ignore the entire template, use a JavaScript //prettier-ignore comment before the opening <template> tag:

export default class MyComponent extends Component {
  // prettier-ignore
  <template>
    This whole template is ignored
    <MyUglyComponent     "shall"     be="preserved">
      <ThisPart
        is  =  "also preserved as is"
      />
    </MyUglyComponent>
  </template>
}

Bugs

If you find a bug, please file a bug report! See CONTRIBUTING.md for more details.