【Remix】Prettierを導入する | エンジニアの参考書

ゴール参考 1. インストール 2. 設定ファイルを作成 3. フォーマット用のコマンドを作成 4. VSCodeの設定 4-1. 拡張機能のインストール 4-2. 拡張機能に設定ファイルを参照させる

ゴール

コマンドでフォーマットを実行できること
VSCodeの設定ができること

npx create-remix@latestを使って作成したアプリケーションには、ESLintは既に入っている。

参考

公式ドキュメント：Install · Prettier
ESLintとの違い：📄ESLint/Prettierとは何か、両者の違いについて解説

1. インストール

まずはPrettierをインストール。

yarn add --dev --exact prettier

2. 設定ファイルを作成

Configuration File · Prettier

上記によるといろいろな拡張子をサポートしているが、
コメントを残せたりサジェストが効きやすい .jsの拡張子が個人的におすすすめ。

touch .prettierrc.js

中身は空でもデフォルトの設定が使われるので問題ない。

3. フォーマット用のコマンドを作成

yarnから実行できるコマンドを package.jsonに作成する。

{
  "name": "sample",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc",
    "format": "prettier app --write" // これを追加
  },
// 略