きれいなフォーマットのGlimmerテンプレート

Prettier は、コードフォーマッタです.これは、開発者やチームのコーディングスタイルについての心配を停止することができます.Prettyは、開発者が手動で読みやすくすることなくコードを書くことができます.代わりに、開発者が機能を実装しているコードを書き直して、多くのアプリケーションによってテストされた独裁規則のセットを書き直します.
Ember プロジェクトは、箱からの準備が整った構成をする準備ができています.エンズCLIv3.24 , これは、今年の最初の日にリリースされたアプリケーションとアドオンの青写真の中できれいに含まれています.新しいプロジェクトは、1日からそれを使用します.既存のプロジェクトは、使用して青写真を更新することによってEmber CLI Update .
デフォルトでは、JavaScriptファイルの場合のみ有効です.Glmmerテンプレートに対しては適切ではありません.よりきれいなものに含まれるグリマーパーサーは、まだ公式にリリースされません.まだいくつかのマイナーなバグが含まれます.しかし、多くのプロジェクトはそれにもかかわらず、正常にそれを使用しています.
このブログのポストは、よりきれいなテンプレートをフォーマットするためにどのようにきれいに設定できるかについて説明します.さらに、それはvscodeが保存の上できれいなGlimmerテンプレートをフォーマットするために構成される必要がある方法について説明します.

きれいな格子のグリマーテンプレート

ECLI CLIはeslintプラグインとして実行するように設定します.しかし、eslintは、glimmerテンプレートのために使われません.燃えさしの生態系は、それがglimmerテンプレートのための専用のリンターを開発したということです:Ember Template Lint 両方のeslintと残忍なテンプレートのリントが含まれ、構成され、デフォルトでのMINIプロジェクトの有効になります.
JavaScriptファイルのeslintプラグインとして実行される方法に似ています.Evenコミュニティは、そうするための公式プラグインを提供しますember-template-lint-plugin-prettier .
プラグインはテンプレートlintルールとして追加されます.ルールは、任意のglimmerテンプレートがテンプレートのリンギングに失敗することを保証します*.hbs ) がフォーマットされていない.
プロジェクトによって使用されるパッケージマネージャーに依存してインストールされます.

# if using yarn
yarn add -D prettier ember-template-lint-plugin-prettier

# if using NPM
npm install --save-dev ember-template-lint-plugin-prettier

また、プロジェクトのテンプレートlintの設定で設定する必要があります.

diff --git a/.template-lintrc.js b/.template-lintrc.js
index 3b0b9af..73c6c78 100644
--- a/.template-lintrc.js
+++ b/.template-lintrc.js
@@ -1,5 +1,6 @@
 'use strict';

 module.exports = {
-  extends: 'octane',
+  plugins: ['ember-template-lint-plugin-prettier'],
+  extends: ['octane', 'ember-template-lint-plugin-prettier:recommended'],
 };

その後yarn lint:hbs 任意のglimmerテンプレートがきれいにフォーマットされていない場合に文句を言うでしょう.
Enter CLIによって作成されたアプリケーションテンプレートは、きれいにフォーマットされません.テンプレートテンプレートLINTに成功したプラグインを設定した場合は、REST CLI V 3で作成された新しいアプリケーションに対して、次のような隠蔽違反が表示されます.24

$ yarn lint:hbs
yarn run v1.22.5
$ ember-template-lint .
app/templates/application.hbs
  1:13  error  Replace `"EmberProjectUsingPrettierForTemplates"` with `'EmberProjectUsingPrettierForTemplates'`  prettier
  3:3  error  Replace `--·The·following·component·displays·Ember's·default·welcome·message.·--` with ` The following component displays Ember's default welcome message. `  prettier
  5:3  error  Replace `--·Feel·free·to·remove·this!·--` with ` Feel free to remove this! `  prettier

✖ 3 problems (3 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

Glimmerテンプレートでの二重引用符の使用

Evenコミュニティには、JavaScriptファイル内の単一引用符を使用するという形式的な慣例があります.それは公式ガイドに反映され、新しいプロジェクトで使用されます.
Prettierは、新しいMenveプロジェクトの単一引用符を使用するように構成されます.これは.prettierrc.js 写真集青写真集

'use strict';

module.exports = {
  singleQuote: true,
};

この設定に従って、glimmerテンプレートで使用されるダブルクォートについても文句を言います.我々は、ミントコミュニティ慣例に従うと、JavaScriptファイル内の単一引用符を使用して、glimmerテンプレートで二重引用符を使用してきれいな設定を更新する必要があります.
デフォルト設定のオーバーライドを追加することができます*.hbs ファイル.

diff --git a/.prettierrc.js b/.prettierrc.js
index 534e6d3..09f6af7 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -2,4 +2,12 @@

 module.exports = {
   singleQuote: true,
+  overrides: [
+    {
+      files: '*.hbs',
+      options: {
+        singleQuote: false,
+      },
+    },
+  ],
 };

走るyarn lint:hbs 再び私たちの新しいプロジェクトでは、ダブル引用符を使用して不満を停止します.💪
しかし、まだ2つの場所で間違ったコメントスタイルを使用することについて不平を言います:

$ yarn lint:hbs
yarn run v1.22.5
$ ember-template-lint .
app/templates/application.hbs
  3:3  error  Replace `--·The·following·component·displays·Ember's·default·welcome·message.·--` with ` The following component displays Ember's default welcome message. `  prettier
  5:3  error  Replace `--·Feel·free·to·remove·this!·--` with ` Feel free to remove this! `  prettier

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

自動的にその違反を修正するためにきれいに走らせる方法を見つけましょう.

プリティを持つフォーマットのグリマーテンプレート

JavaScriptファイルは、きれいな実行でフォーマットできますyarn lint:js:fix . これはeslint with --fix フラグ.上記のようにeslintはプラグインとして動作し、JavaScriptファイルをフォーマットします.
類似のプロジェクトのサポートyarn lint:hbs:fix glimmerテンプレートのエラーを修正するコマンド.実行するember-template-lint with --fix フラグ.そして、私たちが以前に加えたMenry Template Lintのためのきれいなプラグインのおかげで、そのコマンドは、よりきれいなテンプレートをフォーマットするのをきれいに言います.

$ yarn lint:hbs:fix
yarn run v1.22.5
$ ember-template-lint . --fix
Done in 0.43s.

アフターランニングapp/templates/application.hbs がフォーマットされている.🎉

$ git diff app/templates/application.hbs
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 6f0ea67..298858c 100644
-------- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,7 +1,7 @@
 {{page-title "EmberProjectUsingPrettierForTemplates"}}

-{{!-- The following component displays Ember's default welcome message. --}}
+{{! The following component displays Ember's default welcome message. }}
 <WelcomePage />
-{{!-- Feel free to remove this! --}}
+{{! Feel free to remove this! }}

 {{outlet}}
\ No newline at end of file

JavaScriptファイルをフォーマットで保存する

私は怠け者です.走りたくないyarn lint:js:fix 手動で.したがって、私はファイルを保存するときに自動的にeslint違反を修正するためにvscodeを設定しました.私は、私が唯一の怠惰な開発者でないと思います.それで、それがどのようにされることができたかについて、あなたに説明させてください.
まず第一にインストールする必要がありますESLint extension for VSCode . あなたが入力している間、エクステンションがVSCodeで違反することを示す箱から.
デフォルトでは、自動的に保存時にエラーが修正されません.そのためには、設定を調整する必要があります.これを行うには、VSCode設定を開き、次の設定を追加します.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

どうぞofficial documentation 詳細はvscodeの拡張子のために.
どのようにglimmerテンプレートのために同じですか?

vscodeできれいな形式のglimmerテンプレート

私が知っている限り、Menuテンプレートlintの公式VSCode拡張はありません.しかし、我々は使うことができますPrettier for VSCode 同じことを達成する.
拡張モジュールをインストールした後に、それはglimmerテンプレートをフォーマットするために構成される必要があります.glimmerパーサーがまだ正式にリリースされていないので、デフォルトでは無効になります.したがって、私たちは明示的にそれをglimmerテンプレートのためにそれを使うように言う必要があります.そのためには、以下のような設定を更新する必要があります.

diff --git a/.prettierrc.js b/.prettierrc.js
index 09f6af7..919bd65 100644
-------- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -6,6 +6,7 @@ module.exports = {
     {
       files: '*.hbs',
       options: {
+        parser: 'glimmer',
         singleQuote: false,
       },
     },

また、vscode拡張子をアクティブにするためには.hbs ファイル.我々は設定することによって行うことができます prettier.documentSelectors vscode設定の設定オプション.

{
  "prettier.documentSelectors": ["**/*.hbs"],
}

その後、vscodeのglimmerテンプレートのフォーマッタとして利用できます.

しかし、手動で書式設定をトリガーする必要があります.また、明示的なフォーマッタを明示的に選択する必要があります.これらは、私が私が怠惰な開発者としてしたいより多くの手動のステップです.
JavaScriptファイルのためにすでにそれを持っているように、保存の上できれいにGlmmerテンプレートをフォーマットするために、VSCodeを構成しましょう.最初のステップとして、vscodeはglimmerテンプレートのデフォルトフォーマッタとして使用するように指示します.そのためには、vscode設定に別の行を追加する必要があります.

"[handlebars]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
},

明示的なフォーマッタを明示的に選択する必要はありません.しかし、まだ書式設定を手動で実行する必要があります.glimmerテンプレートの保存形式を追加的に有効にしましょう.

"[handlebars]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
},

JavaScriptファイルが保存されているコードアクションを使用してeslintによってフォーマットされるので、我々は有効にしたくありませんeditor.formatOnSave 世界的に.

概要

我々のプロジェクトのglimmerテンプレートは、現在、きれいにフォーマットされます.手動で実行できますyarn lint:hbs:fix . しかし、vtcodeでテンプレートを保存するとき、自動的にまた、きちんと実行されます.さらに、テンプレートテンプレートがきれいにフォーマットされていない場合は、テンプレートテンプレートlintが文句を言います.🎉

Gorgii Dolzhykovへの感謝@thornO ) 誰showed me よりきれいなテンプレートをフォーマットするためにきれいでvscode拡張を構成する方法.そしてもちろん、偉大なツールを作成し、すてきなサポートを追加するに取り組んでover the last three years .
何か質問がある場合は、潜在的な改善を知っているか、またはエラーを発見してくださいEmber Discord .