RemixにPrettierを追加する手順

Remixでアプリを実装する際にPrettierを後から追加する方法を簡単にまとめました。必要なパッケージのインストールと設定、npmスクリプトの追加、ESLint設定の更新、そしてPrettierの実行方法が含まれます。コマンドを使って簡単に設定できますが、忘れがちなので手順をまとめました。

広告ここから

広告ここまで

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

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

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

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

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

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

node_modules
build
public

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

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

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

{
  "extends": ["prettier"]
}

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

npm run format

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