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

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

書(shū)式設(shè)定は、作成するコード行を構(gòu)造化し、読みやすく理解しやすくするのに役立ちます。これは、コードの構(gòu)造について獨(dú)自のスタイルと好みを持つ複數(shù)の開(kāi)発者がコードベースで作業(yè)する場(chǎng)合に非常に重要です。統(tǒng)一されたフォーマットのコードベースを使用すると、マージ時(shí)の頭痛の種を防ぐことができ、あなたとあなたのチームが構(gòu)築できる標(biāo)準(zhǔn)を作成できます。

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

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

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

---

始める前に

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

---

.prettierrc

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

---

.editorconfig

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

---

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

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

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

次に、Husky を初期化します

npx ハスキー初期化

これらの手順により、次のことが実現(xiàn)されます:

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

---

新しいファイルの構(gòu)成

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

事前コミット

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

.lintstagedrc

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

---

ワークフローのテスト

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

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

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

---

それでおしまい！

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

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

---

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

.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 を使用してコードをフォーマットするの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。