🧌
Prettierの基本的な導入方法
はじめに
今回はPrettierをインストールして、対象のファイルをフォーマットするまでの流れを紹介します。フレームワークや他のツールは登場しません。
公式ドキュメントはこちらです。
最終的なプロジェクト構成
myproject/
├── node_modules
├── .prettierignore
├── .prettierrc
├── index.js
├── package-lock.json
└── package.json
手順
今回のプロジェクトを作成し、そこに移動します。
mkdir myproject
cd myproject
package.jsonを作成します。
npm init -y
Prettierをプロジェクトにインストールします。
npm i -D prettier
Prettierの設定ファイルである.prettierrcを作成します。このファイルはJSONまたはYAMLとして書くことができます。今回は何も書かずにデフォルトのままにします。
.prettierrc
{
// 本来はここに設定を書く
}
Prettierはディレクトリに設定ファイルがあればそれを読み込み、そこに書かれている設定に従ってコードを整形します。設定ファイルがなかったり、何も書かれていない場合はデフォルト設定が適用されます。
次に.prettierignoreを作成します。このファイルに書かれたファイルはフォーマットの対象外になります。フォーマットしてほしくないファイルまで整形するとパフォーマンスが下がったり、思わぬバグに繋がるためこのファイルは作成しておきましょう。
以下は例です。.prettierrcとnode_modulesをフォーマットの対象外にします。
.prettierignore
.prettierrc
node_modules
フォーマット対象として適当なコードを書きます。
index.js
const users=['alice',"bob","charlie"]
Prettierを実行します。
npx prettier . --write
成功するとターミナルにフォーマットしたファイル名や、整形が完了するまでにかかった時間などが表示されます。先ほど作成したindex.jsを確認してみてください。以下のようにコードが変化しているはずです。
index.js
// フォーマット前
const users=['alice',"bob","charlie"]
// フォーマット後
const users = ["alice", "bob", "charlie"];
おわりに
PrettierはESLintなど他のツールと併用することが一般的ですが、単体で使うことによって理解を深めることができると思います。
最後までお読みいただきありがとうございました！
Discussion