Prettier とは

Prettier は、JavaScript、TypeScript、CSS などのコードを自動整形するツールです。コードの書式を一貫して保つことで、可読性を向上させ、チームでの開発効率を高めることができます。

Prettier のインストール

まずは、プロジェクトに Prettier をインストールしましょう。プロジェクトのルートディレクトリで以下のコマンドを実行してください。

npm install --save-dev prettier

Prettier の設定ファイルの作成

プロジェクトのルートディレクトリに .prettierrc ファイルを作成し、以下の内容を記述します。

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

これにより、以下の設定が適用されます。

• semi: セミコロンを使用します。
• singleQuote: シングルクォートを使用します。
• trailingComma: 末尾のカンマをすべての多重行リストに使用します。

設定項目については、Prettier の公式ドキュメントを参照してください。

ESLint と Prettier の連携

ESLint と Prettier を連携させることで、コードの品質と整形を同時に管理できます。次の手順で ESLint と Prettier を連携させましょう。

必要なパッケージのインストール

プロジェクトのルートディレクトリで以下のコマンドを実行して、必要なパッケージをインストールします。

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

ESLint の設定ファイルの更新

.eslintrc ファイルを以下のように更新して、ESLint と Prettier の連携を設定します。

{
  "extends": ["next", "plugin:prettier/recommended"],
  "plugins": ["react"],
  "rules": {
    "eqeqeq": "error",
    "no-console": "warn",
    "react/jsx-uses-vars": "error",
    "react/jsx-uses-react": "error",
    "prettier/prettier": "error"
  }
}

これにより、ESLint の実行時に Prettier の整形ルールも適用されます。

Prettier の実行方法

プロジェクトのルートディレクトリで以下のコマンドを実行することで、Prettier によるコード整形が実行されます。

npx prettier --write "./**/*.{js.jsx,.ts,.tsx,.json,.css}"

スクリプトの追加

毎回コマンドを手動で入力するのは面倒ですので、package.json に以下のスクリプトを追加しましょう。

{
  "scripts": {
    "lint": "eslint --ext .js,.jsx,.ts,.tsx ./",
    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --fix ./",
    "format": "prettier --write \"./**/*.{js,.jsx,.ts,.tsx,.json,.css}\""
  }
}

これにより、以下のコマンドで Prettier を実行できるようになります。

npm run format

以上で、Next.js と TypeScript のプロジェクトにおける Prettier の設定方法について解説しました。この設定を活用し、一貫したコード整形を行い、可読性を向上させましょう。また、ESLint と連携させることで、コードの品質も同時に管理できます。これにより、開発効率とチームでの開発品質を向上させることができます。