🍭
[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
Discussion