3.Prettier

Prettier はコードフォーマッターです。 コードに紛れ込んだ無駄な改行やスペースなどを良い感じに修正してくれます。 自分でルールを定義して、コードの自動修正もしてくれます。

例えば、<p >test</p>みたいな記述があった場合 preitter はpタグの無駄なスペースを削除します。

インストールと設定

プロジェクト内で下のコマンドからインストールします。

pnpm add -D prettier

プロジェクトのトップディレクトリに設定ファイルを作成し、以下を記述します。

touch .prettierrc.yml

# https://prettier.io/docs/en/options.html
printWidth: 120
semi: false
singleQuote: true
trailingComma: all
endOfLine: lf

次にフォーマットを無視したいディレクトリやファイルを定義する.prettierignore を用意します。 ファイルを作成し、.nextディレクトリを加えましょう。

touch .prettierignore

.next

prettier を使う環境が整いました。

VSCode から利用

Visual Studio CodeでPrettierを使用するには、拡張機能をインストールします。 VS Code の左のメニューにある拡張機能から Prettier を検索します。 Prettierの画面で、インストールボタンを押します。

挙動を確かめるために、app/page.tsxを開いて、適当に改行などを入れてから保存します。

保存時に改行が削除されたら、prettier が機能しています。 何も起こらない場合は、COMMAND + SHIFT + Pキーを押し、 「ドキュメントのフォーマット」英語の場合は「Format Document」をクリックします。

このような、ウィンドウが出てきたら、「構成..」 を押します。

prettierを選びますます。

毎回コードフォーマットを呼び出すのは面倒なので、保存したら自動的にフォーマットされる様にします。

COMMAND + ,で設定画面を開きます。

「User」タブの「Text Editor」の「Formatting」 をクリックします。

そこにある「Format On Save」にチェックを入レます。

これで、保存時に prettier のフォーマットが走る様になります。

コミットして prettier の設定完了します。

git add .
git commit -m "Setup prettier"