🐻‍❄️

Prettierの利用を仕組み化し、チーム開発を円滑に【VSCodeの設定共有も】

2024/12/30に公開

React

VS Code

Prettier

tech

前置き

2024年12月現在、Progakuのメンバーと少人数で React勉強会兼チーム開発 を行っており、そこで得た学びをこの記事では共有します。

◎ 今回やりたいこと

チーム開発における プロジェクト単位でのPrettier設定 を行います。最終的には各メンバーの開発環境に左右されずチーム全体でコード品質を統一することを目指します。そのためメンバー全員で共有するVSCode設定なども行っていきます。

◎ さっそくやってみよう

1. Prettier設定ファイルを作成

まずは、プロジェクトのルートディレクトリにPrettierの設定ファイルを作成します。

ファイル名は下記のどれかを採用します。

.prettierrc
.prettierrc.json
.prettierrc.js
.prettierrc.cjs
prettier.config.js
prettier.config.cjs
.prettierrc.yml
.prettierrc.yaml

もしくはpackage.jsonの中の"prettier"キーに記述することも可能です。

私は今回コメントを記述したかったので、.prettierrc.cjs を採用しました。

2. コードの整形ルールを記述

Prettier設定のオプションはこちらの公式ドキュメントから確認できます。

以下は一例です。

.prettierrc.cjs

// package.jsonに"type": "module"と設定されている場合、
// 今回のようにjsで記述するなら.cjs拡張子を付ける必要がある

/** @type {import("prettier").Config} */
const config = {
  trailingComma: 'all',   // 配列やオブジェクトの末尾にカンマ
  tabWidth: 2,            // インデント幅は2スペース
  useTabs: false,         // スペースを使用
  semi: true,             // ステートメント末尾にセミコロン
  singleQuote: true,      // 文字列はシングルクォート
  jsxSingleQuote: false,  // JSXはダブルクォート
  arrowParens: 'always',  // アロー関数の引数は常に括弧で囲む
  printWidth: 100,        // 1行の最大文字数
  bracketSpacing: true,   // オブジェクトリテラルの括弧内にスペース
  overrides: [            // ファイル種別ごとの設定
    {
      files: '*.html',
      options: {
        printWidth: 360,  // HTMLは長めの行を許容
      },
    },
  ],
};

module.exports = config;

3. 整形対象外のファイルを指定

一部ファイルやディレクトリをPrettierから対象外にするため、専用のignoreファイルをルートディレクトリに作成します。

以下は一例です。

.prettierignore

# ビルド関連
dist
build
coverage

# 依存関係
node_modules
package-lock.json
yarn.lock
pnpm-lock.yaml

# 環境設定
.env
.env.*
*.local

# エディタ設定
.vscode
.idea

# バージョン管理
.git
.gitignore

# ドキュメント
README.md
LICENSE
*.md

# 設定ファイル
vite.config.ts
tailwind.config.js
tsconfig.json
eslint.config.js

# ログ
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# テスト関連
**/__tests__/**
**/*.test.ts
**/*.test.tsx
**/*.spec.ts
**/*.spec.tsx

4. VSCodeの設定ファイルでPrettier使用を統一

メンバーの開発環境に左右されずPrettierの使用を統一するため、VSCodeの設定ファイルを作成します。

`.vscode/settings.json` を作成する

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": true,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

続いて、上記設定をプロジェクトメンバーで共有したいので.gitignore から settings.json を除外します。

.gitignore

.vscode/*
!.vscode/settings.json

これでプロジェクトメンバーが Prettier - Code formatter をインストールすると、自動的にプロジェクト全体の設定が優先的に適用され、チームみんなで同じコードフォーマットが使用されるようになりました。

５. Prettier実行コマンドを追加

最後に開発をよりスムーズにするため、Prettierの実行コマンドをスクリプトとして設定します。これによりターミナルから、より簡単なコマンドでコード整形を実行できるようになります。

package.json

  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "lint": "eslint .",
+   "format": "prettier --write .",
+   "format:check": "prettier --check .",
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {

追加した2つのコマンドの使い方

npm run format：プロジェクト内の全対象ファイルを自動整形します
npm run format:check：ファイルがPrettierの設定通りに整形されているかをチェックします（整形は実行しません）

以上が、メンバー全員でPrettierの設定を統一し、チーム開発の生産性を高める方法です。ぜひ参考にしてみてください。