feat(eslint): add nextjs rules#285
Conversation
mheob
added
enhancement 📈
|
🦋 Changeset detectedLatest commit: b53fb6b The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis change introduces official Next.js support to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant mheobConfigFactory
participant NextjsConfigModule
participant ESLint
User->>mheobConfigFactory: Call mheob({ nextjs: true/overrides, ... })
mheobConfigFactory->>NextjsConfigModule: Import and invoke nextjs(options)
NextjsConfigModule->>NextjsConfigModule: Ensure @next/eslint-plugin-next is installed
NextjsConfigModule->>NextjsConfigModule: Dynamically import plugin, build config array
NextjsConfigModule-->>mheobConfigFactory: Return Next.js config items
mheobConfigFactory->>ESLint: Provide aggregated config array (including Next.js)
User->>ESLint: Run linting with generated config
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
Scope: all 2 workspace projects This error happened while installing a direct dependency of /tmp/eslint/packages/eslint-config Packages found in the workspace: Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
.changeset/two-badgers-serve.md (1)
1-5: Consider expanding the changeset summaryThe description
"add nextjs config"is technically correct but very terse. A one-liner that briefly states what the new config does (e.g. “expose recommended & core-web-vitals rules vianextjs()option”) makes the changelog more helpful for consumers skimming releases.packages/eslint-config/README.md (1)
392-392: Fix hard tab formatting issue.Static analysis detected a hard tab character that should be replaced with spaces for consistency.
- nextjs: true, + nextjs: true,
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
.changeset/two-badgers-serve.md(1 hunks)packages/eslint-config/README.md(18 hunks)packages/eslint-config/package.json(3 hunks)packages/eslint-config/scripts/typegen.ts(2 hunks)packages/eslint-config/src/cli/constants.ts(3 hunks)packages/eslint-config/src/cli/versions-map.generated.ts(1 hunks)packages/eslint-config/src/configs/index.ts(1 hunks)packages/eslint-config/src/configs/nextjs.ts(1 hunks)packages/eslint-config/src/factory.ts(3 hunks)packages/eslint-config/src/typegen.d.ts(3 hunks)packages/eslint-config/src/types.ts(2 hunks)pnpm-workspace.yaml(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
packages/eslint-config/scripts/typegen.ts (1)
packages/eslint-config/src/configs/nextjs.ts (1)
nextjs(12-53)
packages/eslint-config/src/configs/nextjs.ts (3)
packages/eslint-config/src/types.ts (3)
OptionsFiles(35-38)OptionsOverrides(65-67)TypedFlatConfigItem(19-33)packages/eslint-config/src/globs.ts (1)
GLOB_SRC(2-2)packages/eslint-config/src/utils/package.ts (2)
ensurePackages(34-54)interopDefault(16-22)
packages/eslint-config/src/factory.ts (1)
packages/eslint-config/src/configs/nextjs.ts (1)
nextjs(12-53)
packages/eslint-config/src/types.ts (1)
packages/eslint-config/src/typegen.d.ts (1)
RuleOptions(5-7314)
🪛 markdownlint-cli2 (0.17.2)
packages/eslint-config/README.md
392-392: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🔇 Additional comments (21)
pnpm-workspace.yaml (1)
17-17: Verify single-source version management
@next/eslint-plugin-nextnow appears in the workspace catalog. Double-check that the same version range (^15.4.3) is declared in every place we manage this dependency (packages/eslint-config/package.json,versions-map.generated.ts, etc.) to avoid drift.packages/eslint-config/scripts/typegen.ts (2)
14-15: Import looks correct — no issues found
The newnextjsimport is placed alphabetically with the other config imports and matches the export path (../src).
46-47: Confirmcombine()resolves async configs
nextjs()returns aPromise<TypedFlatConfigItem[]>(same asastro(),react(), etc.). Because you pass it directly intocombine()and thenawait combine(...), the helper must internallyawaiteach element or accept promises. It already worked for the existing async configs, so this is likely fine, but ifcombine()ever changes to expect plain arrays this would silently break.packages/eslint-config/src/cli/versions-map.generated.ts (1)
3-3: Map entry added – keep list alphabetisedGood catch adding
@next/eslint-plugin-next. The list remains alphabetically sorted, so nothing further.packages/eslint-config/src/configs/index.ts (1)
12-12: Export completes public surfaceExporting
./nextjshere exposes the new config through the package’s main entry – looks good.packages/eslint-config/package.json (1)
82-82: LGTM! Dependency configuration follows established patterns.The Next.js ESLint plugin is correctly added following the same pattern as other optional framework dependencies (React, Astro, Svelte) with catalog versioning in devDependencies, specific version constraint in peerDependencies, and marked as optional.
Also applies to: 102-102, 117-119
packages/eslint-config/src/cli/constants.ts (1)
81-81: LGTM! Next.js dependency mapping correctly added.The
nextjsentry independenciesMapcorrectly maps to the required@next/eslint-plugin-nextpackage, following the established pattern for framework dependencies.packages/eslint-config/src/configs/nextjs.ts (2)
5-10: LGTM! Helper function correctly normalizes rule formats.The
normalizeRulesfunction properly handles the conversion of string rule values to arrays, ensuring consistent rule formatting across different ESLint rule configurations.
12-53: LGTM! Next.js configuration implementation follows established patterns.The implementation correctly:
- Uses
ensurePackagesto verify plugin availability- Follows the two-config pattern (setup + rules) consistent with other framework configs
- Properly enables JSX parsing and applies recommended Next.js rules
- Merges both recommended and core-web-vitals rule sets
- Supports user overrides and React version detection
- Uses appropriate TypeScript typing with
OptionsFiles & OptionsOverridespackages/eslint-config/src/factory.ts (3)
18-18: LGTM! Next.js config import properly added.The import follows the established pattern for framework configurations.
59-59: LGTM! Plugin renaming entry correctly added.The
'@next/next': 'next'renaming entry provides consistent plugin prefix naming, following the same pattern as other framework plugins.
182-188: LGTM! Next.js config integration follows established patterns.The conditional inclusion of the Next.js config correctly:
- Uses the same pattern as other framework configs (React, Astro, Svelte)
- Defaults to
falserequiring explicit enablement- Properly passes overrides using the
getOverrideshelper- Maintains consistency with the overall factory design
packages/eslint-config/README.md (3)
10-11: LGTM! Feature list correctly updated to include Next.js support.The bullet point accurately reflects the new Next.js support alongside other framework options.
383-400: LGTM! Next.js documentation section follows established patterns.The Next.js configuration section correctly:
- Follows the same format as other framework sections (React, Svelte, Astro)
- Provides accurate code examples using TypeScript extensions
- Includes proper installation instructions for the required dependency
- Uses consistent formatting and structure
250-250: LGTM! Plugin renaming table correctly updated.The table entry accurately documents the
next/*prefix renaming for the Next.js ESLint plugin, maintaining consistency with the established documentation format.packages/eslint-config/src/types.ts (3)
12-12: LGTM! Well-designed type intersection for ESLint rules.The combination of a flexible record type with strongly typed
RuleOptionsprovides both type safety for known rules and flexibility for custom or future rules.
14-33: Excellent documentation and type safety improvements.The comprehensive JSDoc comments and explicit property definitions enhance the developer experience while maintaining type safety. The approach of omitting and redefining properties from
Linter.Configis a solid TypeScript pattern.
162-170: Perfect integration following established patterns.The
nextjsoption implementation is consistent with other framework options in the codebase. The JSDoc documentation clearly specifies dependencies and the type allows both simple enablement and advanced configuration.packages/eslint-config/src/typegen.d.ts (3)
1301-1404: LGTM! Comprehensive Next.js ESLint rule definitions.The Next.js rule definitions are well-structured and complete. Each rule includes proper JSDoc documentation with descriptions and links to Next.js documentation. The type definitions correctly use
Linter.RuleEntry<[]>for rules without options andNextNoHtmlLinkForPagesfor the rule that accepts configuration.
8919-8920: Correct type definition for Next.js rule options.The
NextNoHtmlLinkForPagestype correctly defines the options for thenext/no-html-link-for-pagesrule, allowing either no configuration or a single parameter that can be a string or array of strings (representing page directory paths).
16161-16161: Config names follow established naming conventions.The addition of
'mheob/nextjs/setup'and'mheob/nextjs/rules'to theConfigNamesunion type is consistent with the existing naming pattern and maintains alphabetical ordering.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @mheob/eslint-config@8.12.0 ### Minor Changes - [#286](#286) ([@mheob](https://github.com/mheob)): sorts `id` to the top of objects in JSON files - [#285](#285) ([@mheob](https://github.com/mheob)): add nextjs config - [#281](#281) ([@mheob](https://github.com/mheob)): update allowed exports for `react-router` ### Patch Changes - [#287](#287) ([@renovate](https://github.com/apps/renovate)): update all non-major deoendencies ## @mheob/commitlint-config@1.2.4 ### Patch Changes - [#287](#287) ([@renovate](https://github.com/apps/renovate)): update all non-major deoendencies ## @mheob/prettier-config@3.3.4 ### Patch Changes - [#287](#287) ([@renovate](https://github.com/apps/renovate)): update all non-major deoendencies
1 participant
Summary by CodeRabbit
New Features
Documentation
Chores