Remixでアプリを実装する際に、Prettierを後から追加する方法を簡単にまとめました。

必要なパッケージのインストール

まず、PrettierとESLintの設定パッケージをインストールします。

npm install --save-dev prettier eslint-config-prettier

Prettier設定ファイルの作成

.prettierrcファイルを作成し、以下の内容を追加します。

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "printWidth": 80
}

.prettierignoreファイルの作成

Prettierが無視すべきファイルやディレクトリを指定します。Cloudflare / AWS Amplifyなどが生成するファイルも適宜除外しましょう。

node_modules
build
public

npm scriptの追加

package.jsonに以下のスクリプトを追加します。

"scripts": {
  "format": "prettier --write ."
}

ESLint設定の更新

.eslintrcファイルを更新し、Prettierとの競合を避けます。

{
  "extends": ["prettier"]
}

Prettierの実行

設定が完了したら、以下のコマンドでPrettierを実行し、既存のファイルをフォーマットします。

npm run format

やり方はシンプルなのですが、高確率で忘れるので、思い出しやすくするためにもここにまとめます。