プロのように Prettier を使用してコードをフォーマットする

この男のようにならないでください。くだらない人になってはいけません。

フォーマットされたコードが必要な理由

書式設定は、作成するコード行を構造化し、読みやすく理解しやすくするのに役立ちます。これは、コードの構造について独自のスタイルと好みを持つ複数の開発者がコードベースで作業する場合に非常に重要です。統一されたフォーマットのコードベースを使用すると、マージ時の頭痛の種を防ぐことができ、あなたとあなたのチームが構築できる標準を作成できます。

自分やチーム用に書式設定テンプレートを設定するには、いくつかの方法があります。この記事では、最も人気のあるオプションの 1 つである Prettier について説明します。

State of JS 2021 の調査によると、回答者の 83% がフォーマッタとして定期的に Prettier を使用しており、前年の調査から 13% 増加しています。 Facebook、Webflow、Jest、Dropbox、Spotify、PayPal などの多くの著名なチームは、コードベースの書式設定の一貫性を確保するために Prettier を使用しています。

Prettier は複数の方法で構成して実行できます。この例では、VS Code での自動化のために Git フックを使用して Prettier をセットアップする方法を示します。その他の例と構成については、Prettier のドキュメントを参照してください。

---

始める前に

必須ではありませんが、構成するオプションとその機能を理解しておくと役立ちます。 2 つのファイルを作成し、プロジェクトのルート レベルに配置する必要があります。これらの書式設定オプションはプロジェクト固有であるため、新しいプロジェクトごとにこのプロセスを繰り返す必要があることに注意してください。これらのファイルには選択できるオプションが含まれており、プロジェクトのニーズに合わないオプションを変更または削除できます。

---

.prettierrc

このファイルはプロジェクトのルート レベルにあり、Prettier の基本フォーマット ルールを定義します。 JSON 構造を使用しており、チームの標準に合わせて調整できます。以下に例を示します:

---

.editorconfig

このファイルは、Prettier を実行する前でもエディタ設定の一貫性を保証します。 .prettierrc にはないオプションについても説明します。以下に例を示します:

---

ワークフローのセットアップ

使いやすいように、両方のファイルを記事の最後にコピーできます。 .prettierrc ファイルと .editorconfig ファイルを作成して構成したら、次に進むことができます。フォーマット プロセスを合理化するには、次の 3 つの npm パッケージをインストールします。

npm install --save-dev よりきれいな lint-staged husky

次に、Husky を初期化します

npx ハスキー初期化

これらの手順により、次のことが実現されます:

• フォーマットのために Prettier をインストールします。
• lint-staged をインストールして、コミットする前にステージングされたファイルのみをフォーマットします。
• Husky をインストールして、自動化用の Git フックを設定します。
• Husky を初期化します。これにより、必要な依存関係とプリコミット ファイルが作成されます。

---

新しいファイルの構成

さらに 2 つのファイル (pre-commit と .lintstagedrc) の構成が必要です

事前コミット

このファイルは、Husky によって自動的に作成され、自動化プロセスをガイドします。これは、初期化中に作成された Husky フォルダー内にあります。以下に示すように設定します:

.lintstagedrc

このファイル (.editorconfig や .prettierrc のような拡張子なし) をルート プロジェクト フォルダーに作成します。 Git フックを通じて Prettier 形式のファイルの範囲を狭めます。以下は例ですが、プロジェクトのファイルタイプに基づいて調整できます:

---

ワークフローのテスト

4 つのファイル (.prettierrc、.editorconfig、.lintstagedrc、および pre-commit) がすべて配置されたら、ワークフローをテストできます。

1. .js ファイルに簡単な書式変更を加えます (たとえば、不要なスペースやインデントを追加します)。
2. 変更をステージングします: git add -A
3. テストメッセージでコミットする git commit -m "書式設定ワークフローのテスト"

すべてが正しく設定されていれば、端末に成功メッセージが表示され、書式設定の変更が自動的に適用されます。

---

それでおしまい！

これで、Prettier と git フックを利用してコードのフォーマットを自動化する、シンプルかつ効果的な方法が得られました。

ぜひご意見をお聞かせください。これが役に立った場合、または問題が発生した場合は、コメントでお知らせください。私がお手伝いします!

---

ファイルのコピー＆ペーストの例

.prettierrc

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

.editorconfig

# Top-most EditorConfig file
root = true

# Global settings
[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Overrides
[*.md]
trim_trailing_whitespace = false
max_line_length = off

[*.yml]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 4

[Makefile]
indent_style = tab

[*.html]
indent_size = 2

[*.json]
indent_size = 2

以上がプロのように Prettier を使用してコードをフォーマットするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。