[Next.js] Prettierの導入

nextjs-prettier
INDEX

はじめに

Next.jsにPrettierの導入を導入する方法を学習しました。
その結果を執筆します。

Prettier(プリティア)とは

コードのフォーマット(整形)を自動的に行ってくれるツールです。

やり方

1. Prettier をインストール

下記コマンドでインストールする事が出来ます。
npm install prettier --save-dev

2. .prettierrc の作成

  1. プロジェクトのディレクトリー配下に.prettierrcを作成する
  2. .prettierrcの中身を下記にコードにする
{
  "semi": false,  // コードの末尾にセミコロンを入れるか
  "trailingComma": "none",  // オブジェクト定義の最後のカンマを無しにするか
  "singleQuote": true,  // 文字列の定義などクオートにシングルクオートを使用するか
  "printWidth": 120 // 行を改行する際の文字数
}

3. package.json を更新する

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

4. Prettier を適応させる

下記コマンドでsrc配下のコードに適応する事が出来ます。
npm run prettier-format
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

Born in 1994
Engineer's career is from 2020.10
Skill: Next.js, TypeScript, Django, Python, HTML, CSS

INDEX