Prettierを一瞬で試す方法（1分で導入 画像あり）

概要

本記事の対象者

• コードを綺麗に保ちたい人
• formatterに興味を持ち始めた人
• Prettierを簡単に導入してみたい人

この記事でできること

• VSCodeでPrettierを導入することができます

Prettierとは？

公式HPには以下のように紹介されています。

What is Prettier?
An opinionated code formatter
Supports many languages
Integrates with most editors
Has few options
参考:https://prettier.io

なんとなく分かったような分からなかったような感じですね。

簡単に一言で言うと、「保存と同時にコードを綺麗に整形してくれるツール」 です。

とても便利なので本記事では、その便利さとその簡単な導入方法についてご紹介していきます。

何が便利なの？

具体的なメリット

公式HPによると、

Why?
You press save and code is formatted
No need to discuss style in code review
Saves you time and energy
参考:https://prettier.io

ここで書かれている最大のメリットは、「チーム開発時に開発者同士で不要な差分を出さないために、レビューの時間も削れるよ」 ということです。
つまり、Prettierを使うことで自動的にチームのルール通りのコードスタイルに整形してくれるので、開発効率の向上につながります。

対応している言語

以下の画像にある通りHTML/CSS/JSなどしっかりカバーされています。

(参考：https://prettier.io)

導入方法は？

導入方法についてはいくつかありますが、今回は簡単に試すということでVScodeの設定からPrettierを使えるようにしてみましょう。

以下の５枚の画像に沿って進めてみてください。

導入の5ステップ

1. VScodeを開き、「cmd + ,(カンマ)」で設定ページを表示させます
   

2. 検索窓に「onsave」と入力し、ワークスペースを選択
   

3. 上から2番目の「Editor:Format On Save Mode」にチェックを入れる
   

4. 生成された「.vscode/settings.json」を開く
   

5. 「"editor.defaultFormatter": "esbenp.prettier-vscode"」の項目を追加する
   

ここまで設定すると保存時に、コードが自動で整形されるようになります。

まとめ

今回は初学者に向けて、formatterであるPrettierの簡単な導入方法について紹介しました。
Prettierはこの他にもESLintやTSなどと一緒に使われる機会も多いので、今後そのような設定方法なども紹介していこうと思っていますので、興味のある方はフォローください。

ここまで読んでいただきありがとうございました。
感想や間違っている箇所などなんでも良いのでコメント頂けると嬉しいです。