Add @tcd-devkit/eslint-preset-react ESLint flat config preset #206
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
📝 WalkthroughWalkthroughAdds a new package, @tcd-devkit/eslint-preset-react, containing a composable ESLint v9+ flat-config preset for React (TypeScript + a11y + import + Prettier), plus package manifest, build config, TypeScript configs, and README. No changes outside this new package. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Developer
participant ESLint as ESLint (v9+)
participant Preset as @tcd-devkit/eslint-preset-react
participant Configs as Included configs (base, ts, react, hooks, a11y, import-ts)
participant Prettier as eslint-config-prettier
Dev->>ESLint: Run lint (uses top-level eslint.config.js)
ESLint->>Preset: Import/Spread preset (default export)
Preset->>Configs: Compose multiple config objects
Preset->>Prettier: Merge formatting overrides
Note right of Preset: Adds global ignores (dist, build, node_modules)
Preset-->>ESLint: Return Linter.Config[] (flat config)
ESLint-->>Dev: Linting executed with composed config
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (6)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (5)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
coderabbitai
bot
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (6)
packages/eslint-presets/eslint-preset-react/src/react-preset.linter.ts (1)
12-14: Optional: broaden ignores for common React outputs.
Consider ignoring .next, coverage, and storybook-static to reduce noise in typical React/Next setups.-const ignoresConfig = globalIgnores( - ['**/dist/**', '**/node_modules/**', '**/build/**'], +const ignoresConfig = globalIgnores( + ['**/dist/**', '**/node_modules/**', '**/build/**', '**/.next/**', '**/coverage/**', '**/storybook-static/**'],packages/eslint-presets/eslint-preset-react/package.json (5)
33-39: Tighten exports map for broader tooling compatibility.Add "default" and expose "package.json" for metadata consumers.
"exports": { ".": { "types": "./dist/react-preset.linter.d.ts", "require": "./dist/react-preset.linter.cjs", - "import": "./dist/react-preset.linter.js" + "import": "./dist/react-preset.linter.js", + "default": "./dist/react-preset.linter.js" } - }, + , + "package.json": "./package.json" + },
58-66: Prefer caret ranges for third-party deps; let Renovate manage updates.Aligns with repo practice and avoids manual bumps.
- "eslint-config-prettier": "10.1.8" + "eslint-config-prettier": "^10.1.8"
67-73: Loosen devDependency pins to caret for smoother Renovate flows.Keeps local tooling current across the monorepo.
- "@types/node": "22.17.2", - "tsup": "8.5.0" + "@types/node": "^22.17.2", + "tsup": "^8.5.0"
77-79: Engines: avoid endorsing EOL Node 21; simplify the range.Node 22+ is covered by >=22.0.0. Recommend:
- "engines": { - "node": ">=20.11.0 || >=21.2.0" - } + "engines": { + "node": ">=20.11.0 || >=22.0.0" + }
21-25: Nit: use canonical repo casing.Cosmetic, but keeps metadata consistent with the org.
- "url": "https://github.com/thecodedestroyer/devkit.git", + "url": "https://github.com/TheCodeDestroyer/devkit.git",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
packages/eslint-presets/eslint-preset-react/README.md(1 hunks)packages/eslint-presets/eslint-preset-react/package.json(1 hunks)packages/eslint-presets/eslint-preset-react/src/react-preset.linter.ts(1 hunks)packages/eslint-presets/eslint-preset-react/tsconfig.build.json(1 hunks)packages/eslint-presets/eslint-preset-react/tsconfig.json(1 hunks)packages/eslint-presets/eslint-preset-react/tsup.config.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/eslint/eslint-config-react/package.json:80-80
Timestamp: 2025-05-23T18:25:39.851Z
Learning: The tcd-devkit ESLint configuration packages (like eslint-config-react) are built from scratch specifically for ESLint v9+ using the flat config format, not migrated from older ESLint versions.
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/eslint-presets/eslint-preset-node/src/node-preset.linter.ts:14-20
Timestamp: 2025-05-23T17:49:36.376Z
Learning: The tcd-devkit preset packages (like eslint-preset-node) are designed to be combinations of existing tcd-devkit config packages rather than introducing new external plugins or rules. They serve as "plug n play" bundles for convenience.
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/eslint/eslint-config-react/src/react.linter.ts:20-20
Timestamp: 2025-05-23T17:50:17.181Z
Learning: ESLint configuration packages in the tcd-devkit ecosystem are designed to be consumed by external projects, so they may include file patterns and extensions (like mjsx, mtsx) that aren't used in the current monorepo but might be needed by consuming projects.
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/internal-utils/package.json:55-55
Timestamp: 2025-05-23T19:27:10.314Z
Learning: Each individual ESLint config package in the tcd-devkit monorepo has its own "imports" field that maps "#*" to their source files, enabling alias imports like #react.linter within their own package scope. The internal-utils package doesn't need an "imports" field when it only contains one source file.
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/internal-utils/src/test.utils.ts:0-0
Timestamp: 2025-05-23T18:45:38.179Z
Learning: TheCodeDestroyer prefers consistent API design and likes to use unified interface names when functions share similar option patterns, even if some properties aren't used by all functions.
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/eslint/eslint-config-import-ts/package.json:65-67
Timestamp: 2025-05-23T19:34:31.271Z
Learning: TheCodeDestroyer prefers to use Renovate for automated dependency management rather than manual dependency version updates in package.json files.
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#7
File: renovate.json:2-4
Timestamp: 2025-05-25T09:20:16.838Z
Learning: TheCodeDestroyer prefers using local Renovate presets with the "local>" syntax to avoid external fetches, rather than GitHub-based presets.
📚 Learning: 2025-05-23T18:25:39.851Z
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/eslint/eslint-config-react/package.json:80-80
Timestamp: 2025-05-23T18:25:39.851Z
Learning: The tcd-devkit ESLint configuration packages (like eslint-config-react) are built from scratch specifically for ESLint v9+ using the flat config format, not migrated from older ESLint versions.
Applied to files:
packages/eslint-presets/eslint-preset-react/tsconfig.jsonpackages/eslint-presets/eslint-preset-react/src/react-preset.linter.tspackages/eslint-presets/eslint-preset-react/tsconfig.build.jsonpackages/eslint-presets/eslint-preset-react/README.mdpackages/eslint-presets/eslint-preset-react/tsup.config.tspackages/eslint-presets/eslint-preset-react/package.json
📚 Learning: 2025-05-23T17:50:17.181Z
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/eslint/eslint-config-react/src/react.linter.ts:20-20
Timestamp: 2025-05-23T17:50:17.181Z
Learning: ESLint configuration packages in the tcd-devkit ecosystem are designed to be consumed by external projects, so they may include file patterns and extensions (like mjsx, mtsx) that aren't used in the current monorepo but might be needed by consuming projects.
Applied to files:
packages/eslint-presets/eslint-preset-react/tsconfig.jsonpackages/eslint-presets/eslint-preset-react/src/react-preset.linter.tspackages/eslint-presets/eslint-preset-react/tsconfig.build.jsonpackages/eslint-presets/eslint-preset-react/README.mdpackages/eslint-presets/eslint-preset-react/tsup.config.tspackages/eslint-presets/eslint-preset-react/package.json
📚 Learning: 2025-05-23T17:49:36.376Z
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/eslint-presets/eslint-preset-node/src/node-preset.linter.ts:14-20
Timestamp: 2025-05-23T17:49:36.376Z
Learning: The tcd-devkit preset packages (like eslint-preset-node) are designed to be combinations of existing tcd-devkit config packages rather than introducing new external plugins or rules. They serve as "plug n play" bundles for convenience.
Applied to files:
packages/eslint-presets/eslint-preset-react/tsconfig.jsonpackages/eslint-presets/eslint-preset-react/src/react-preset.linter.tspackages/eslint-presets/eslint-preset-react/tsconfig.build.jsonpackages/eslint-presets/eslint-preset-react/README.mdpackages/eslint-presets/eslint-preset-react/package.json
📚 Learning: 2025-05-23T19:27:10.314Z
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/internal-utils/package.json:55-55
Timestamp: 2025-05-23T19:27:10.314Z
Learning: Each individual ESLint config package in the tcd-devkit monorepo has its own "imports" field that maps "#*" to their source files, enabling alias imports like #react.linter within their own package scope. The internal-utils package doesn't need an "imports" field when it only contains one source file.
Applied to files:
packages/eslint-presets/eslint-preset-react/src/react-preset.linter.tspackages/eslint-presets/eslint-preset-react/README.mdpackages/eslint-presets/eslint-preset-react/tsup.config.tspackages/eslint-presets/eslint-preset-react/package.json
📚 Learning: 2025-05-31T20:36:11.700Z
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#32
File: eslint.config.mjs:5-10
Timestamp: 2025-05-31T20:36:11.700Z
Learning: The NextJS ESLint plugin (next/eslint-plugin-next) exports a default named plugin that requires importing as a default export and then destructuring the needed configuration (e.g., flatConfig). This pattern triggers the `import-x/no-rename-default` rule, necessitating a global disable of this rule when using NextJS ESLint configurations.
Applied to files:
packages/eslint-presets/eslint-preset-react/src/react-preset.linter.ts
📚 Learning: 2025-05-23T19:30:46.588Z
Learnt from: TheCodeDestroyer
PR: TheCodeDestroyer/devkit#5
File: packages/eslint/eslint-config-ts/src/ts.linter.ts:19-19
Timestamp: 2025-05-23T19:30:46.588Z
Learning: In the tcd-devkit codebase, TypeScript ESLint configurations use double type assertion `as unknown as Linter.Config[]` to convert from typescript-eslint's ConfigArray type to standard ESLint Linter.Config[] type for maintaining type consistency across all ESLint configurations.
Applied to files:
packages/eslint-presets/eslint-preset-react/src/react-preset.linter.ts
🧬 Code graph analysis (1)
packages/eslint-presets/eslint-preset-react/src/react-preset.linter.ts (2)
packages/eslint/eslint-config/src/base.linter.ts (1)
baseConfig(22-30)packages/eslint/eslint-config-react/src/react.linter.ts (1)
reactConfig(11-27)
🔇 Additional comments (6)
packages/eslint-presets/eslint-preset-react/tsconfig.json (1)
1-4: LGTM: minimal library tsconfig extending shared base is appropriate.
No further changes needed.packages/eslint-presets/eslint-preset-react/tsup.config.ts (1)
1-5: LGTM: delegates to shared tsup lib config.
Assuming tsupLibConfig sets entry and dts appropriately for linter presets.packages/eslint-presets/eslint-preset-react/README.md (1)
7-21: Docs/code alignment check.
README lists both import (JS) and import-ts (TS). After applying the code change to include import (JS), this stays consistent. If you prefer TS-only import rules, remove the JS import mention here instead.packages/eslint-presets/eslint-preset-react/package.json (3)
4-16: Good package description and keywords.Clear scope and searchability.
58-66: Dependency model looks right for a preset aggregator.Using internal configs as runtime deps matches the “plug n play” goal.
74-76: Peer dependencies are consistent – all three presets (next,node, andreact) specify"eslint": "^9.0.0", so the React preset matches the others. Consider widening to>=9 <11across all packages once ESLint 10 support is confirmed.
TheCodeDestroyer
force-pushed
the
new-react-preset
branch
from
a426e16 to
9d2d7bd
Compare
TheCodeDestroyer
force-pushed
the
new-react-preset
branch
from
9d2d7bd to
ed7e81d
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Documentation
Chores