[Next.js] Prettierの導入

はじめに

この記事では、Prettierの導入方法をまとめております。

参考資料

1. Prettier をインストール

Prettier（プリティア）とは

コードのフォーマット（整形）を自動的に行ってくれるツールです。
下記コマンドでインストールする

npm install prettier --save-dev

2. .prettierrc の作成

プロジェクトのディレクトリー配下に下記コマンドで作成

touch .prettierrc

3. .prettierrc の編集

.prettierrc

{
  "semi": false,  // コードの末尾にセミコロンを入れるか
  "trailingComma": "none",  // オブジェクト定義の最後のカンマを無しにするか
  "singleQuote": true,  // 文字列の定義などクオートにシングルクオートを使用するか
  "printWidth": 120 // 行を改行する際の文字数
}

4. package.json を更新する

package.json

{
"scripts": {
  ...
  "prettier": "prettier --config .prettierrc --write .",
  }
}

5. Prettier を適応させる

下記コマンドでsrc配下のコードに適応する事が出来る

npm run prettier-format