🐥

CursorでPrettierの自動フォーマットが動かないときの対応

に公開
VS Code
Prettier
Cursor
tech

ファイル保存時などにコードを自動整形してくれるPrettierですが、
動いてくれないケースがあり解決にハマってしまったので備忘録として残しておきます。

結論として以下の2項目をチェックしてみてください。

  1. Cursor上での自動フォーマット設定が有効になっているか
  2. そのプロジェクトを以前VSCodeで使用していた場合は設定ファイルが残っているかどうか

今回の私のケースでは②が該当しており、
プロジェクトルートに.vscodeが存在しており設定が競合してしまっていました。

Cursorで自動フォーマットを有効にする設定

まずはCtrl + , (コントロール+カンマ)などで環境設定を出し、
検索欄に Format と入力して以下２つの設定を確認してください。

  1. Editor:Default Formatter
    Prettier - Code formatterとなっていればOKです
  2. Editor:Format On Save
    チェックが入っていればOKです

そして、プロジェクトルートにPrettier用の設定ファイル .prettierrc を作成します。
私の場合は以下のような設定になっています。

{
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "arrowParens": "always",
    "printWidth": 100
}

これでCursorで自動フォーマットを有効にする基本設定は完了です。

VSCodeの設定ファイルが競合していないかどうか

冒頭の通り、私のケースではこちらが原因でした。
そのプロジェクトを以前はVSCodeで使用していた場合はプロジェクトルートに.vscodeディレクトリが存在していると思うので確認してください。

ディレクトリ内の settings.json を確認して、formatterに関連する設定を見直してください。

私の場合は .vscode/settings.json に以下の設定が残っていてこちらが優先されてしまっていたようです。

解決方法としては、いずれかの対応を取ることで解決します。

  • Format関連の設定だけを.vscode/settings.jsonから削除する
  • もしくはCursor側とFormatの設定を合わせてあげる
  • VSCodeをもう使うつもりがないのであれば .vscode ディレクトリごと削除(自己責任)

以上になります！

Discussion