VScodeのESlint拡張機能がNextプロジェクトで動作しない

Nextプロジェクトでnext lintコマンドからlintすると、以下の警告がでるコードがあります。

bash
1./src/app/layout.tsx
23:1  Warning: `next/font/local` import should occur before type import of `next`  import/order

本来であればVSCodeのESlint拡張機能によって、コードの該当箇所に黄色波線が表示されるものですが、実際には何も表示されていません。
拡張機能側で警告を認識していないためか、formarOnSaveオプションが効いていない状況です。

eslintはflat config形式で設定を記述しているため、settings.jsonに以下のオプションを追加しましたが、
解決しませんでした。

json
1"eslint.useFlatConfig": true

eslint自体は効いてはいるのですが、作業中に視覚的にエラーや警告が表示されないため
コマンドを叩くまで見落とされ続けるので、非効率で困っています。
お知恵を拝借できますと幸いです。

行動規範の内容に同意します

回答1件

自己解決

自己解決したので、顛末だけ記しておきます。

package.jsonに"type": "module"を追加
1に伴い対応しなくなった、CommonJS形式のファイルを下記のいずれかで変更対応
- ES module形式に変更
- ES moduleに対応していないものは、.cjs拡張子に変更
- postcssのみpostcss.config.jsonに変更（ Nextではpostcss.config.cjsに対応していなかったため）

投稿2024/12/08 13:35

総合スコア1