RomeからPrettierに移行する

はじめに

2023 年 8 月 29 日現在、Rome の開発は止まったようです。
Biomeが後継になるようです。
これを機にフォーマッターを Prettier に乗り換えたので、手順を残していきます！(備忘録)

手順

Rome をアンインストール

以下のコマンドを入力して Rome をアンインストールします。

npm uninstall rome

以下も行なっていきます

• 拡張機能も削除します。「ワークスペースの推奨事項に追加」している場合は、ワークスペースの推奨事項から削除。
• package.json の scripts に Rome の記述がある場合は削除。
• .github/workflows に Rome の記述を記述がある場合は削除。
• devcontainer.json に Rome の記述を記述がある場合は削除。
• settings.json に Rome の記述を記述がある場合は削除。
• extensions.json に Rome の記述を記述がある場合は削除。
• rome.json を削除。

Prettier をインストール

以下のコマンドを入力して Prettier をインストールします。

npm install --save-dev --save-exact prettier

.prettierrc.json を作成します。

echo {}> .prettierrc.json

.prettierrc.json の中に Prettier の設定を記述していきます。設定についてはこちらをご覧ください。私は以下で設定しました。

.prettierrc.json

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false
}

以下を実行して既存のファイルのフォーマットします。

npx prettier . --write

拡張機能インストール&設定

Prettier の拡張機能をインストールします。あわせて「ワークスペースの推奨事項に追加」「devcontainer.json に追加」も行います。
設定(command + ,)から「formatter」と検索します。「default Formatter」で Prettier を選択します。
設定(command + ,)から「format on save」と検索します。「Format On Save」にチェックを入れます。
settings.json がある場合、それぞれの設定の左横の歯車マークを押して「JSON として設定をコピー」を押し、settings.json に貼り付けます。

eslint-config-prettier をインストール

以下を実行します。

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

.eslintrc.*という名前のファイルのextendsに"prettier"を追加します。

.eslintrc.js

extends: ["prettier"],

package.json にコマンド追加

ここは任意ですが、package.json にコマンドを追加します。

npm run prettierが Prettier によるフォーマットのチェックで、npm run prettier . --writeが Prettier のフォーマットを実行します。

.prettierrc.json

{
  "scripts": {
    // ...
    "prettier": "prettier . --check",
    "prettier-fix": "prettier . --write"
    // ...
  }
}

最後に

Rome から Prettier への乗り換え手順をまとめてみました。
どなたかの一助になれば幸いです。🙇