INDEX
はじめに
![](https://techlog.site/wp-content/uploads/2024/02/nwe_icon.jpeg)
Next.jsにPrettierの導入を導入する方法を学習しました。
その結果を執筆します。
Prettier(プリティア)とは
コードのフォーマット(整形)を自動的に行ってくれるツールです。
やり方
1. Prettier をインストール
下記コマンドでインストールする事が出来ます。
npm install prettier --save-dev
2. .prettierrc の作成
- プロジェクトのディレクトリー配下に.prettierrcを作成する
- .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