Skip to content

feat(eslint-plugin-next): Support flat config, ship with types, and export in both ESM & CJS formats #76935

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: canary
Choose a base branch
from

Conversation

drake-nathan
Copy link

@drake-nathan drake-nathan commented Mar 9, 2025

Description

eslint-plugin-next doesn't support the ESLint flat config. In this PR, I refactor the plugin to ship with types out of the box, support both legacy and flat config, and support ESM and CJS. This plugin is currently being used via some "compat" utils. This upgrade improves everyone's DX while still maintaining backward compatibility.

To approach the conversion, I first let Claude have a go at it, but I didn't like the direction it was going. So I based most of this on eslint-plugin-perfectionist, which does a great job of support legacy/flat configs with minimal code repetition.

NOTE: I'm submitting as is to make sure this is something the Next.js team will want to merge. If so, I'll update the docs before merge. This plugin can be used as is, but I'd like to also update eslint-config-next, and create-next-app. It may make sense to release all of those changes together. Please let me know if I should make those changes on the same PR.

Changes Made

  • The plugin was already using TypeScript, but very loosely. I added a much stricter tsconfig setup. I handled types where they were obvious and added any everywhere else. It's not ideal, but I didn't want to risk changing functionality. This essentially just explicitly acknowledges existing behavior.
  • I refactored the index file to support both legacy and flat configs.
  • I added tsup for the build. I tried using swc, but tsup makes it 10x easier to export types, ESM, and CJS all at once.
  • I adjusted the tests for the new setup.

Issues Resolved

TODO list

  • Update documentation
  • Convert eslint-config-next to flat config
  • Update create-next-app with the changes

@ijjk ijjk added Font (next/font) Related to Next.js Font Optimization. tests type: next labels Mar 9, 2025
@ijjk
Copy link
Member

ijjk commented Mar 9, 2025

Allow CI Workflow Run

  • approve CI run for commit: 2ad7b0b

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@darthmaim
Copy link
Contributor

@drake-nathan
Copy link
Author

Aw shit. I thought I searched, but not well enough apparently. That PR's a nice, minimal solution. I don't believe it will fix the types issue, however. I'm happy to fast follow with that upgrade separately when it gets merged.

@drake-nathan
Copy link
Author

Until this PR gets merged (or another much better PR), I published a fork of this plugin for my own use. I thought someone else might find it useful.

It supports TypeScript, ESM, and ESLint v9 with a single config (all rules on as warnings).

https://www.npmjs.com/package/eslint-plugin-nextjs

// eslint.config.js/mjs
import nextjs from "eslint-plugin-nextjs";

export default [
  // ... other configs
  nextjs.configs.recommended,
];

@CHC383
Copy link

CHC383 commented Apr 10, 2025

cc @devjiwonchoi

@JSONRice
Copy link

cc @devjiwonchoi would be super nice to get flat config support ASAP

@devjiwonchoi
Copy link
Member

Hi, this is a breaking change and would require us to publish on v16. Does #73873 not resolve the use case for flat config ATM?

@drake-nathan
Copy link
Author

@devjiwonchoi I think it does, yes. That PR provides a proper flat config without much fuss. It doesn't ship the plugin with types, but that could be added with the config as it is now. I would close my PR, and I'll try to find time to resubmit one that just provides types.

@violabg
Copy link

violabg commented Apr 24, 2025

I still a problems with 15.3.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Font (next/font) Related to Next.js Font Optimization. tests type: next
Projects
None yet
7 participants