チームで作業する場合、コードを一貫してフォーマットすることは困難な場合があります。現代のWeb開発の利点は、ツールが大幅に改善されたことです。この記事では、PrettyerをセットアップしてVisualStudioCodeでコードを自動的にフォーマットする方法について説明します。サンプルコードデモの目的で、フォーマットするサンプルコードを次に示します。コードのフォーマットにこだわるなら、すぐにいくつかの明らかな失敗に気付くかもしれません。シングル対のミックス。CodeでPrettierを操作するには、拡張機能をインストールする必要があります。Prettier-コードフォーマッターを検索します。以下の拡張機能をご覧ください。インストールする場合は、私の場合に表示される「アンインストール」ボタンの代わりに「インストール」ボタンが表示されます。ドキュメントのフォーマットコマンドPrettier拡張機能をインストールすると、それを利用してコードをフォーマットできるようになります。FormatDocumentコマンドを使用して開始できます。コマンドパレットを開くには、次を使用できます。Windowsの場合。FormatDocumentを選択します。次に、使用する形式を選択するように求められる場合があります。これを行うには、構成ボタンをクリックします。次に、よりきれい-コードフォーマッターを選択します。あなたのコードは素晴らしく、フォーマットされています。行の折り返し一貫した引用これはCSSファイルでも機能します。これから:これに!保存時に自動的にフォーマットこれまで、コードを手動でフォーマットするコマンドを実行する必要がありました。Codeで設定を選択して、ファイルを保存するときにファイルが自動的にフォーマットされるようにすることができます。これにはいくつかの大きな利点があります。コードを手動で再度フォーマットする必要はありません。Windowsで設定メニューを開きます。検索し、チェックされていることを確認します。この設定を行うと、すべてが自動的に処理されることを知っているので、私たち全員が行うように、だらしなくフォーマットされたコードを記述してビジネスを進めることができます。VSCode設定でのよりきれいな構成Prettierはデフォルトで多くのことを行いますが、設定をカスタマイズすることもできます。一般的な設定のいくつかを次に示します。上記のように設定メニューを開きます。次に、Prettyerを検索します。これにより、エディターで変更できるすべての設定が表示されます。タブの幅を10に変更するとどうなりますか。次に、ファイルを保存します。Codeに組み込まれている設定メニューを使用することの欠点は、チームの開発者間で一貫性が保証されないことです。Codeの設定を変更すると、他の誰かがまったく異なる設定のセットを持っている可能性があります。構成ファイルを作成して、チーム全体で一貫したフォーマットを確立してください。これを解決するために、Prettier構成ファイルを作成できます。.prettierrc。)というタイトルに、次のいずれかの拡張子を付ける必要があります。valueのペアを定義できるJSON構成ファイルを好みます。Codeは、入力時にインテリセンスを提供します。簡単な設定ファイルの例を次に示します。構成ファイルの詳細については、よりきれいなドキュメントを確認してください。これらのいずれかを作成してプロジェクトにチェックインした後、すべてのチームメンバーが同じフォーマットルールに従うようにすることができます。結論Prettierは、コードを手動でフォーマットするための便利なツールです。多くのコードを書くためによりよく費やすことができる時間はかかります。そこにある驚くべき最新のツールを利用して、Prettierをセットアップしてください。Joseモバイルバージョンに。