Prettierでコードを綺麗にしよう

ここではPrettierについて詳しく学んでいきます。

Prettierとは？

PrettierはNode環境で開発を行う上で欠かせない存在で、ソースコードを自動で整形してくれるツールです。 様々なフロントエンドのライブラリの言語などに対応しています。

ソースコードの品質を保つためには、セミコロンをつけるかつけないか、一行は何文字までなどといった体裁を整えておく必要があります。しかし、何百もあるファイルに対してそれらのルールに基づいているかを手動でチェックを行うというのは現実的とはいえません。

複数人で開発する時の共通認識部分をルール化しておくことで、同じ「書き方」でコードを統一することができます。 Prettierの自動整形のおかげで、誰が書いてもコーディングルールにのっとったコーディングが出来ます。

Prettierのインストール方法

ディレクトリを作成して、初期化を行い、prettierを導入してみましょう。--save-exact オプションを追加することで、packge.jsonの依存関係として、バージョンを明確化することができ、複数人開発時でもコードフォーマットの結果を一致させることが可能です。

mkdir envader-prettier-test #ディレクトリ作成
cd envader-prettier-test # ディレクトリへ移動
npm init -y # 初期化
npm install prettier --save-dev --save-exact #インストール

オプションをつけると以下のようにpackage.jsonに依存関係が記述されます。バージョンの2.5.1の前の「^（キャレット）」が外れます。キャレットがあると「2.x」の「x」の部分が一致していれば良いということになります。ですので、「2.5.y」の「y」の部分は「2」であろうが、「3」であろうが気にしないよ〜という設定になってしまいます。

"devDependencies": {
    "prettier": "2.5.1"
  }

コマンド設定

フォーマットを実行するためにpackage.jsonのscriptsに設定を追加します。

"scripts": {
    "format": "prettier --write 'src/**/*.js'"
},

Prettierでフォーマットする

フォーマットするには以下のコマンドを実行します。

npm run format

まとめ

今回はprettierの使い方について解説しました。

昨今のフロントエンド開発においてPrettierは必須とも言える存在です。

チーム開発だけでなく一人で開発を行う上でもとても便利なので、簡単な使い方は覚えておきましょう。