Skip to content

Commit a426e16

Browse files
feat: Add new react preset
1 parent 71ce753 commit a426e16

File tree

7 files changed

+240
-0
lines changed

7 files changed

+240
-0
lines changed
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# @tcd-devkit/eslint-preset-react
2+
3+
Comprehensive ESLint Flat Configuration Preset for React projects. This preset bundles a curated set of `@tcd-devkit` ESLint configurations to provide a complete linting solution for modern React applications, including React, TypeScript, accessibility (a11y), and import rules. It is designed for ESLint v9+ and its Flat Config system.
4+
5+
## Features
6+
7+
- **All-in-One React Setup**: Combines configurations for React, React Hooks, TypeScript, Imports (JS & TS), and JSX A11y.
8+
- **Opinionated Defaults**: Provides a strong, opinionated baseline for React projects.
9+
- **Easy Integration**: Simplifies ESLint setup by providing a single package to install and configure.
10+
- **Flat Config**: Utilizes ESLint's modern flat configuration format (ESLint v9+).
11+
12+
This preset includes the following `@tcd-devkit` configurations:
13+
14+
- `@tcd-devkit/eslint-config` (Base JavaScript rules)
15+
- `@tcd-devkit/eslint-config-ts` (TypeScript rules)
16+
- `@tcd-devkit/eslint-config-import` (JavaScript import rules)
17+
- `@tcd-devkit/eslint-config-import-ts` (TypeScript import rules)
18+
- `@tcd-devkit/eslint-config-react` (React rules)
19+
- `@tcd-devkit/eslint-config-react-hooks` (React Hooks rules)
20+
- `@tcd-devkit/eslint-config-a11y` (JSX Accessibility rules)
21+
22+
## Installation
23+
24+
```bash
25+
# Using npm
26+
npm install -D @tcd-devkit/eslint-preset-react eslint@^9.0.0
27+
28+
# Using yarn
29+
yarn add -D @tcd-devkit/eslint-preset-react eslint@^9.0.0
30+
31+
# Using pnpm
32+
pnpm add -D @tcd-devkit/eslint-preset-react eslint@^9.0.0
33+
```
34+
35+
All necessary `@tcd-devkit/eslint-config-*` packages are direct dependencies of this preset and will be installed automatically.
36+
37+
## Usage
38+
39+
Import and use the preset in your `eslint.config.js` (or `.mjs`/`.cjs`) file:
40+
41+
```javascript
42+
import reactPreset from '@tcd-devkit/eslint-preset-react'; // This is an array of config objects
43+
44+
export default [
45+
...reactPreset,
46+
{
47+
// Your project-specific overrides or additional configurations can be added here.
48+
// For example, to adjust parser options for TypeScript if your tsconfig.json is not in the root:
49+
// files: ['**/*.ts', '**/*.tsx'],
50+
// languageOptions: {
51+
// parserOptions: {
52+
// project: './path/to/your/tsconfig.json',
53+
// },
54+
// },
55+
rules: {
56+
// example: '@typescript-eslint/no-explicit-any': 'warn',
57+
},
58+
},
59+
];
60+
```
61+
62+
This preset exports an array of ESLint configuration objects. You should spread it (`...reactPreset`) into your top-level configuration array. The underlying configurations are designed to work together. Ensure your `tsconfig.json` is correctly set up for TypeScript linting to function optimally.
63+
64+
## Rules
65+
66+
This preset combines rules from all the included `@tcd-devkit/eslint-config-*` packages listed in the Features section.
67+
For a detailed view of all active rules in your project, you can run ESLint with the `--print-config` flag.
68+
69+
## License
70+
71+
MIT © [Nace Logar](https://thecodedestroyer.com)
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"name": "@tcd-devkit/eslint-preset-react",
3+
"version": "0.1.0",
4+
"description": "Comprehensive ESLint Flat Configuration Preset for React projects. This preset bundles various @tcd-devkit ESLint configurations for a complete React, TypeScript, and a11y linting setup.",
5+
"keywords": [
6+
"tcd-devkit",
7+
"preset",
8+
"eslint",
9+
"eslintconfig",
10+
"eslint-preset",
11+
"lint",
12+
"react",
13+
"typescript",
14+
"a11y",
15+
"flat-config"
16+
],
17+
"homepage": "https://github.com/thecodedestroyer/devkit",
18+
"bugs": {
19+
"url": "https://github.com/thecodedestroyer/devkit/issues"
20+
},
21+
"repository": {
22+
"type": "git",
23+
"url": "https://github.com/thecodedestroyer/devkit.git",
24+
"directory": "packages/eslint-presets/eslint-preset-react"
25+
},
26+
"license": "MIT",
27+
"author": {
28+
"name": "Nace Logar",
29+
"email": "the.code.destroyer@gmail.com",
30+
"url": "https://thecodedestroyer.com"
31+
},
32+
"type": "module",
33+
"exports": {
34+
".": {
35+
"types": "./dist/react-preset.linter.d.ts",
36+
"require": "./dist/react-preset.linter.cjs",
37+
"import": "./dist/react-preset.linter.js"
38+
}
39+
},
40+
"main": "./dist/react-preset.linter.cjs",
41+
"module": "./dist/react-preset.linter.js",
42+
"types": "./dist/react-preset.linter.d.ts",
43+
"typesVersions": {
44+
"*": {
45+
".": [
46+
"./dist/react-preset.linter.d.ts"
47+
]
48+
}
49+
},
50+
"files": [
51+
"dist",
52+
"!dist/**/*.d.ts.map"
53+
],
54+
"scripts": {
55+
"build": "tsup",
56+
"lint:types": "tcd-scripts lint --only=tsc"
57+
},
58+
"dependencies": {
59+
"@tcd-devkit/eslint-config": "workspace:*",
60+
"@tcd-devkit/eslint-config-a11y": "workspace:*",
61+
"@tcd-devkit/eslint-config-import-ts": "workspace:*",
62+
"@tcd-devkit/eslint-config-react": "workspace:*",
63+
"@tcd-devkit/eslint-config-react-hooks": "workspace:*",
64+
"@tcd-devkit/eslint-config-ts": "workspace:*",
65+
"eslint-config-prettier": "10.1.8"
66+
},
67+
"devDependencies": {
68+
"@tcd-devkit/scripts": "workspace:*",
69+
"@tcd-devkit/tsconfig": "workspace:*",
70+
"@tcd-devkit/tsup-config": "workspace:*",
71+
"@types/node": "22.17.2",
72+
"tsup": "8.5.0"
73+
},
74+
"peerDependencies": {
75+
"eslint": "^9.0.0"
76+
},
77+
"engines": {
78+
"node": ">=20.11.0 || >=21.2.0"
79+
}
80+
}
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { Linter } from 'eslint';
2+
import prettierConfig from 'eslint-config-prettier/flat';
3+
import { defineConfig, globalIgnores } from 'eslint/config';
4+
5+
import { baseConfig } from '@tcd-devkit/eslint-config';
6+
import { a11yConfig } from '@tcd-devkit/eslint-config-a11y';
7+
import { importTsConfig } from '@tcd-devkit/eslint-config-import-ts';
8+
import { reactConfig } from '@tcd-devkit/eslint-config-react';
9+
import { reactHooksConfig } from '@tcd-devkit/eslint-config-react-hooks';
10+
import { tsConfig } from '@tcd-devkit/eslint-config-ts';
11+
12+
const ignoresConfig = globalIgnores(
13+
['**/dist/**', '**/node_modules/**', '**/build/**'],
14+
'@tcd-devkit/eslint-config/ignores',
15+
);
16+
17+
export const reactPreset: Linter.Config[] = defineConfig(
18+
{
19+
name: '@tcd-devkit/eslint-preset-react',
20+
extends: [
21+
baseConfig,
22+
tsConfig,
23+
reactConfig,
24+
reactHooksConfig,
25+
a11yConfig,
26+
importTsConfig,
27+
],
28+
},
29+
prettierConfig,
30+
ignoresConfig,
31+
);
32+
33+
export default reactPreset;
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "https://json.schemastore.org/tsconfig",
3+
"extends": "@tcd-devkit/tsconfig/build"
4+
}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "https://json.schemastore.org/tsconfig",
3+
"extends": "@tcd-devkit/tsconfig/lib"
4+
}
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { defineConfig } from 'tsup';
2+
3+
import { tsupLibConfig } from '@tcd-devkit/tsup-config/lib';
4+
5+
export default defineConfig(tsupLibConfig);

pnpm-lock.yaml

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)