🈁

Prettierの導入手順

に公開
Prettier
tech

Prettierとは

  • コード整形ツール
  • 書き方の揺れを自動で統一してくれる
  • チーム開発で特に有効（誰が書いても同じスタイルに揃う）

導入方法

インストール

npm install --save-dev prettier

設定ファイルの作成

プロジェクト直下に .prettierrcを作成（JSON形式）.prettierrc.jsonでも可

{
  "semi": true, 
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

semi: true → 行末にセミコロンを付ける

true → 行末にセミコロンを付ける
false → 行末のセミコロンを削除（例: const a = 1 のようにする）

singleQuote: true → シングルクォートに統一

true → 文字列をシングルクォート ' ' に統一
false → ダブルクォート " " を使用

tabWidth: 2 → インデント幅

インデント幅（スペースの数）を設定
例: tabWidth: 4 にするとインデントが 4 スペースになる

trailingComma: "es5" → 配列・オブジェクト末尾のカンマ

配列やオブジェクトの末尾にカンマを付けるルール
    設定値の例:
    none → 末尾にカンマを付けない
    es5 → ES5 に対応したオブジェクト・配列で末尾カンマを付ける
    all → 関数の引数リストも含め、すべてに末尾カンマを付ける

.prettierignoreの作成

プロジェクト直下に .prettierignoreファイルを作成
ここで整形したくないファイル/フォルダを指定

node_modules
dist
build

package.json にスクリプトを追加

全員が同じコマンドで整形できるようにする。

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

実際の使い方

# プロジェクト全体を整形
npm run format

# ファイルを指定して整形
npx prettier --write src/index.ts

# 整形が必要かどうかチェック
npm run format:check

補足

.prettierrc.json の他にも .prettierrc.js / .prettierrc.yaml / package.json に書く方法もあります。
チーム全員が同じルールで整形できる状態です

Discussion