序章

特にチームで作業する場合、コードを一貫してフォーマットすることは困難な場合があります。 現代のWeb開発の利点は、ツールが大幅に改善されたことです。 この記事では、PrettyerをセットアップしてVisualStudioCodeでコードを自動的にフォーマットする方法について説明します。

サンプルコード

デモの目的で、フォーマットするサンプルコードを次に示します。 コードのフォーマットにこだわるなら、すぐにいくつかの明らかな失敗に気付くかもしれません。

  • シングル対のミックス。 二重引用符
  • 人物オブジェクトの最初のプロパティは、独自の行にある必要があります
  • 関数内のコンソールステートメントはインデントする必要があります
  • 矢印関数のパラメーターを囲むオプションの括弧が好きな場合と嫌いな場合があります

PrettierExtensionのインストール

Visual Studio CodeでPrettierを操作するには、拡張機能をインストールする必要があります。 Prettier-コードフォーマッターを検索します。 以下の拡張機能をご覧ください。 初めてインストールする場合は、私の場合に表示される「アンインストール」ボタンの代わりに「インストール」ボタンが表示されます。

ドキュメントのフォーマットコマンド

Prettier拡張機能をインストールすると、それを利用してコードをフォーマットできるようになります。 これについては後で詳しく説明しますが、 FormatDocumentコマンドを使用して開始できます。

コマンドパレットを開くには、次を使用できます。 Command + Shift + P Macまたは Control + Shift + P Windowsの場合。 コマンドパレットでformat、を検索し、 FormatDocumentを選択します。

次に、使用する形式を選択するように求められる場合があります。 これを行うには、構成ボタンをクリックします。

次に、よりきれい-コードフォーマッターを選択します。

そしてVOILA！ あなたのコードは素晴らしく、フォーマットされています。 すべての派手な改善に注意してください！

  • 間隔
  • 行の折り返し
  • 一貫した引用

これはCSSファイルでも機能します。 これから：

これに！

保存時に自動的にフォーマット

これまで、コードを手動でフォーマットするコマンドを実行する必要がありました。 代わりに、VS Codeで設定を選択して、ファイルを保存するときにファイルが自動的にフォーマットされるようにすることができます。 これにはいくつかの大きな利点があります。

コードを手動で再度フォーマットする必要はありません。

  • コードを考えずにフォーマットされていることを確認します
  • フォーマットされていないコードがチェックインされない

この設定を変更するには、 Command + , Macまたは Control + , Windowsで設定メニューを開きます。 次に、 Editor：Format on Save を検索し、チェックされていることを確認します。

この設定を行うと、すべてが自動的に処理されることを知っているので、私たち全員が行うように、だらしなくフォーマットされたコードを記述してビジネスを進めることができます。

VSCode設定でのよりきれいな構成

Prettierはデフォルトで多くのことを行いますが、設定をカスタマイズすることもできます。 最も一般的な設定のいくつかを次に示します。

  • 一重引用符-一重引用符と二重引用符のどちらかを選択します
  • セミ-行末にセミコロンを含めるかどうかを選択します
  • タブ幅-タブを構成するスペースの数

上記のように設定メニューを開きます。 次に、Prettyerを検索します。 これにより、エディターで変更できるすべての設定が表示されます。

たとえば、タブの幅を10に変更するとどうなりますか。

次に、ファイルを保存します。

これはおそらく保持したいタブ幅のサイズではありませんが、それはすべてあなた次第です！

よりきれいな構成ファイルの作成

VS Codeに組み込まれている設定メニューを使用することの欠点は、チームの開発者間で一貫性が保証されないことです。 VS Codeの設定を変更すると、他の誰かがまったく異なる設定のセットを持っている可能性があります。

構成ファイルを作成して、チーム全体で一貫したフォーマットを確立してください。

これを解決するために、Prettier構成ファイルを作成できます。 .prettierrc。（ ext ）というタイトルに、次のいずれかの拡張子を付ける必要があります。

  • yml、yaml、またはjson
  • js
  • toml
  • package.jsonファイルに含める（代替オプション）

私は通常、設定に key -> valueのペアを定義できるJSON構成ファイルを好みます。 VS Codeは、入力時にインテリセンスを提供します。

簡単な設定ファイルの例を次に示します。

構成ファイルの詳細については、よりきれいなドキュメントを確認してください。これらのいずれかを作成してプロジェクトにチェックインした後、すべてのチームメンバーが同じフォーマットルールに従うようにすることができます 。

結論

Prettierは、コードを手動でフォーマットするための便利なツールです。 より多くのコードを書くためによりよく費やすことができる時間はかかります。 そこにある驚くべき最新のツールを利用して、Prettierをセットアップしてください。