@seanblonien/eslint-config-react 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -22
- package/dist/index.js +65 -14
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,45 +1,64 @@
|
|
|
1
1
|
# @seanblonien/eslint-config-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
[](https://github.com/semantic-release/semantic-release)
|
|
6
|
+
|
|
7
|
+
Sean Blonien's opinionated ESLint config for TypeScript & React projects. **This package extends [@seanblonien/eslint-config-base](../eslint-config-base)** and includes all base TypeScript/JavaScript rules plus React-specific configurations.
|
|
4
8
|
|
|
5
9
|
## Installation
|
|
6
10
|
|
|
7
|
-
|
|
11
|
+
Since this uses eslint v9, the only peer dependency is `eslint` itself, all other dependencies are included in the package.
|
|
12
|
+
|
|
13
|
+
**Note:** This package automatically includes `@seanblonien/eslint-config-base` as a dependency, so you don't need to install it separately.
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
# pnpm
|
|
8
17
|
pnpm add -D eslint @seanblonien/eslint-config-react
|
|
9
|
-
```
|
|
10
18
|
|
|
11
|
-
|
|
19
|
+
# npm
|
|
20
|
+
npm install -D eslint @seanblonien/eslint-config-react
|
|
12
21
|
|
|
13
|
-
|
|
14
|
-
|
|
22
|
+
# yarn
|
|
23
|
+
yarn add -D eslint @seanblonien/eslint-config-react
|
|
15
24
|
```
|
|
16
25
|
|
|
17
26
|
## Usage
|
|
18
27
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
```javascript
|
|
28
|
+
```ts
|
|
29
|
+
// eslint.config.ts
|
|
22
30
|
import reactConfig from '@seanblonien/eslint-config-react';
|
|
23
31
|
|
|
24
|
-
export default [
|
|
32
|
+
export default [
|
|
33
|
+
...reactConfig,
|
|
34
|
+
{
|
|
35
|
+
rules: {
|
|
36
|
+
'react/jsx-curly-spacing': ['error', { when: 'always' }],
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
ignores: ['dist/**', 'build/**'],
|
|
41
|
+
},
|
|
42
|
+
];
|
|
25
43
|
```
|
|
26
44
|
|
|
27
|
-
|
|
45
|
+
## What's Included
|
|
28
46
|
|
|
29
|
-
|
|
30
|
-
import reactConfig from '@seanblonien/eslint-config-react';
|
|
47
|
+
This config extends [@seanblonien/eslint-config-base](../eslint-config-base) and builds on top of the following additional direct dependencies:
|
|
31
48
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
49
|
+
- **[@seanblonien/eslint-config-base](https://www.npmjs.com/package/@seanblonien/eslint-config-base)** - Base TypeScript/JavaScript ESLint configuration (includes all base rules and plugins)
|
|
50
|
+
- **[eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)** - React-specific linting rules with automatic version detection
|
|
51
|
+
- **[eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)** - Enforces Rules of Hooks and exhaustive dependencies
|
|
52
|
+
- **[eslint-plugin-react-hooks-addons](https://www.npmjs.com/package/eslint-plugin-react-hooks-addons)** - Additional best practices for React Hooks
|
|
53
|
+
- **[eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)** - Accessibility rules for JSX elements
|
|
54
|
+
- **[eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler)** - Linting support for the experimental React Compiler
|
|
36
55
|
|
|
37
|
-
|
|
56
|
+
## Requirements
|
|
38
57
|
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
58
|
+
- Node.js >= 20
|
|
59
|
+
- ESLint >= 9.0.0
|
|
60
|
+
- TypeScript >= 5.0.0
|
|
61
|
+
- React >= 16.8.0
|
|
43
62
|
|
|
44
63
|
## License
|
|
45
64
|
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/index.ts
|
|
2
|
-
import baseConfig from "@seanblonien/eslint-config-base";
|
|
2
|
+
import baseConfig, { booleanNameConvention } from "@seanblonien/eslint-config-base";
|
|
3
3
|
import jsxA11y from "eslint-plugin-jsx-a11y";
|
|
4
4
|
import reactPlugin from "eslint-plugin-react";
|
|
5
5
|
import reactCompilerPlugin from "eslint-plugin-react-compiler";
|
|
@@ -17,8 +17,11 @@ var config = [
|
|
|
17
17
|
jsxA11y.flatConfigs.recommended,
|
|
18
18
|
// React plugin configuration
|
|
19
19
|
{
|
|
20
|
-
files: ["**/*.jsx"
|
|
20
|
+
files: ["**/*.{tsx,jsx}"],
|
|
21
21
|
languageOptions: {
|
|
22
|
+
globals: {
|
|
23
|
+
React: "readonly"
|
|
24
|
+
},
|
|
22
25
|
parserOptions: {
|
|
23
26
|
ecmaFeatures: {
|
|
24
27
|
jsx: true
|
|
@@ -31,24 +34,72 @@ var config = [
|
|
|
31
34
|
}
|
|
32
35
|
},
|
|
33
36
|
rules: {
|
|
34
|
-
//
|
|
37
|
+
// --- React Rules ---
|
|
38
|
+
// General React rules
|
|
39
|
+
"react/style-prop-object": "off",
|
|
40
|
+
// Keep off for RN
|
|
35
41
|
"react/prop-types": "off",
|
|
36
|
-
// TypeScript handles this
|
|
37
42
|
"react/react-in-jsx-scope": "off",
|
|
38
43
|
// Not needed with new JSX transform
|
|
39
|
-
"react/
|
|
40
|
-
|
|
41
|
-
"react/
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"react/
|
|
44
|
+
"react/no-multi-comp": ["error", { ignoreStateless: true }],
|
|
45
|
+
"react/no-array-index-key": "warn",
|
|
46
|
+
"react/void-dom-elements-no-children": "error",
|
|
47
|
+
"react/destructuring-assignment": ["warn", "always"],
|
|
48
|
+
"react/boolean-prop-naming": ["warn", { rule: booleanNameConvention }],
|
|
49
|
+
// Component definition rules
|
|
50
|
+
"react/function-component-definition": ["error", { namedComponents: "arrow-function" }],
|
|
51
|
+
"react/jsx-filename-extension": ["error", { extensions: [".tsx"] }],
|
|
52
|
+
"react/self-closing-comp": "warn",
|
|
53
|
+
// JSX formatting rules
|
|
54
|
+
"react/jsx-curly-brace-presence": "warn",
|
|
55
|
+
"react/jsx-closing-bracket-location": ["warn", "line-aligned"],
|
|
56
|
+
"react/jsx-no-useless-fragment": ["warn", { allowExpressions: true }],
|
|
57
|
+
"react/jsx-first-prop-new-line": ["warn"],
|
|
58
|
+
"react/jsx-tag-spacing": ["warn", { beforeClosing: "never" }],
|
|
59
|
+
"react/jsx-key": "error",
|
|
60
|
+
"react/jsx-max-depth": ["error", { max: 6 }],
|
|
61
|
+
"react/jsx-no-comment-textnodes": "warn",
|
|
46
62
|
"react/jsx-boolean-value": ["error", "never"],
|
|
47
|
-
"react/
|
|
63
|
+
"react/jsx-props-no-multi-spaces": "error",
|
|
64
|
+
// JSX multiline formatting
|
|
65
|
+
"@stylistic/multiline-ternary": ["warn", "always-multiline", { ignoreJSX: true }],
|
|
66
|
+
"@stylistic/jsx-wrap-multilines": [
|
|
67
|
+
"warn",
|
|
68
|
+
{
|
|
69
|
+
declaration: "parens-new-line",
|
|
70
|
+
assignment: "parens-new-line",
|
|
71
|
+
return: "parens-new-line",
|
|
72
|
+
arrow: "parens-new-line",
|
|
73
|
+
condition: "ignore",
|
|
74
|
+
logical: "ignore",
|
|
75
|
+
prop: "ignore"
|
|
76
|
+
}
|
|
77
|
+
],
|
|
78
|
+
// Props handling rules
|
|
79
|
+
"react/jsx-sort-props": ["warn", { shorthandFirst: true, callbacksLast: true, reservedFirst: true }],
|
|
80
|
+
"react/jsx-props-no-spreading": [
|
|
48
81
|
"error",
|
|
49
82
|
{
|
|
50
|
-
|
|
51
|
-
|
|
83
|
+
exceptions: [
|
|
84
|
+
"ScrollView",
|
|
85
|
+
"Component",
|
|
86
|
+
"Container",
|
|
87
|
+
"Screen",
|
|
88
|
+
"AppProvider",
|
|
89
|
+
"Checkbox.Item",
|
|
90
|
+
"TextInputPaper",
|
|
91
|
+
"StatusIcon",
|
|
92
|
+
"CircularProgressBase",
|
|
93
|
+
"CircularProgress"
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
],
|
|
97
|
+
// --- React Hooks Rules ---
|
|
98
|
+
"react-hooks-addons/no-unused-deps": "warn",
|
|
99
|
+
"react-hooks/exhaustive-deps": [
|
|
100
|
+
"warn",
|
|
101
|
+
{
|
|
102
|
+
additionalHooks: "(useEffectIgnoreFirstRender|useAsyncEffect|useEffectDebounce|useEffectIgnoreFirstRender|useEffectInterval|useMemoCache|useMemoCacheKey|useMemoTiming|useCallbackThrottle)"
|
|
52
103
|
}
|
|
53
104
|
]
|
|
54
105
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention -- config file */\nimport baseConfig from '@seanblonien/eslint-config-base';\n// @ts-expect-error - no types available\nimport jsxA11y from 'eslint-plugin-jsx-a11y';\nimport reactPlugin from 'eslint-plugin-react';\nimport reactCompilerPlugin from 'eslint-plugin-react-compiler';\nimport reactHooks from 'eslint-plugin-react-hooks';\nimport reactHooksAddonsPlugin from 'eslint-plugin-react-hooks-addons';\nimport type { Linter } from 'eslint';\n\nconst config: Linter.Config[] = [\n // Spread base config\n ...baseConfig,\n\n // React compiler and hooks addons\n reactCompilerPlugin.configs.recommended,\n reactHooksAddonsPlugin.configs.recommended,\n reactPlugin.configs.flat.recommended,\n (reactHooks.configs as unknown as { flat: { recommended: Linter.Config } }\n ).flat.recommended,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- incorrect type definition from package\n jsxA11y.flatConfigs.recommended as Linter.Config,\n\n // React plugin configuration\n {\n files: ['**/*.jsx'
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention -- config file */\nimport baseConfig, { booleanNameConvention } from '@seanblonien/eslint-config-base';\n// @ts-expect-error - no types available\nimport jsxA11y from 'eslint-plugin-jsx-a11y';\nimport reactPlugin from 'eslint-plugin-react';\nimport reactCompilerPlugin from 'eslint-plugin-react-compiler';\nimport reactHooks from 'eslint-plugin-react-hooks';\nimport reactHooksAddonsPlugin from 'eslint-plugin-react-hooks-addons';\nimport type { Linter } from 'eslint';\n\nconst config: Linter.Config[] = [\n // Spread base config\n ...baseConfig,\n\n // React compiler and hooks addons\n reactCompilerPlugin.configs.recommended,\n reactHooksAddonsPlugin.configs.recommended,\n reactPlugin.configs.flat.recommended,\n (reactHooks.configs as unknown as { flat: { recommended: Linter.Config } }\n ).flat.recommended,\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- incorrect type definition from package\n jsxA11y.flatConfigs.recommended as Linter.Config,\n\n // React plugin configuration\n {\n files: ['**/*.{tsx,jsx}'],\n languageOptions: {\n globals: {\n React: 'readonly',\n },\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n },\n },\n settings: {\n react: {\n version: 'detect',\n },\n },\n rules: {\n // --- React Rules ---\n // General React rules\n 'react/style-prop-object': 'off', // Keep off for RN\n 'react/prop-types': 'off',\n 'react/react-in-jsx-scope': 'off', // Not needed with new JSX transform\n 'react/no-multi-comp': ['error', { ignoreStateless: true }],\n 'react/no-array-index-key': 'warn',\n 'react/void-dom-elements-no-children': 'error',\n 'react/destructuring-assignment': ['warn', 'always'],\n 'react/boolean-prop-naming': ['warn', { rule: booleanNameConvention }],\n\n // Component definition rules\n 'react/function-component-definition': ['error', { namedComponents: 'arrow-function' }],\n 'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],\n 'react/self-closing-comp': 'warn',\n\n // JSX formatting rules\n 'react/jsx-curly-brace-presence': 'warn',\n 'react/jsx-closing-bracket-location': ['warn', 'line-aligned'],\n 'react/jsx-no-useless-fragment': ['warn', { allowExpressions: true }],\n 'react/jsx-first-prop-new-line': ['warn'],\n 'react/jsx-tag-spacing': ['warn', { beforeClosing: 'never' }],\n 'react/jsx-key': 'error',\n 'react/jsx-max-depth': ['error', { max: 6 }],\n 'react/jsx-no-comment-textnodes': 'warn',\n 'react/jsx-boolean-value': ['error', 'never'],\n 'react/jsx-props-no-multi-spaces': 'error',\n\n // JSX multiline formatting\n '@stylistic/multiline-ternary': ['warn', 'always-multiline', { ignoreJSX: true }],\n '@stylistic/jsx-wrap-multilines': [\n 'warn',\n {\n declaration: 'parens-new-line',\n assignment: 'parens-new-line',\n return: 'parens-new-line',\n arrow: 'parens-new-line',\n condition: 'ignore',\n logical: 'ignore',\n prop: 'ignore',\n },\n ],\n\n // Props handling rules\n 'react/jsx-sort-props': ['warn', { shorthandFirst: true, callbacksLast: true, reservedFirst: true }],\n 'react/jsx-props-no-spreading': [\n 'error',\n {\n exceptions: [\n 'ScrollView',\n 'Component',\n 'Container',\n 'Screen',\n 'AppProvider',\n 'Checkbox.Item',\n 'TextInputPaper',\n 'StatusIcon',\n 'CircularProgressBase',\n 'CircularProgress',\n ],\n },\n ],\n\n // --- React Hooks Rules ---\n 'react-hooks-addons/no-unused-deps': 'warn',\n 'react-hooks/exhaustive-deps': [\n 'warn',\n {\n additionalHooks:\n '(useEffectIgnoreFirstRender|useAsyncEffect|useEffectDebounce|useEffectIgnoreFirstRender|useEffectInterval|useMemoCache|useMemoCacheKey|useMemoTiming|useCallbackThrottle)',\n },\n ],\n },\n },\n];\n\nexport default config;\n\n/* eslint-enable @typescript-eslint/naming-convention */\n"],"mappings":";AACA,OAAO,cAAc,6BAA6B;AAElD,OAAO,aAAa;AACpB,OAAO,iBAAiB;AACxB,OAAO,yBAAyB;AAChC,OAAO,gBAAgB;AACvB,OAAO,4BAA4B;AAGnC,IAAM,SAA0B;AAAA;AAAA,EAE9B,GAAG;AAAA;AAAA,EAGH,oBAAoB,QAAQ;AAAA,EAC5B,uBAAuB,QAAQ;AAAA,EAC/B,YAAY,QAAQ,KAAK;AAAA,EACxB,WAAW,QACV,KAAK;AAAA;AAAA,EAEP,QAAQ,YAAY;AAAA;AAAA,EAGpB;AAAA,IACE,OAAO,CAAC,gBAAgB;AAAA,IACxB,iBAAiB;AAAA,MACf,SAAS;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,eAAe;AAAA,QACb,cAAc;AAAA,UACZ,KAAK;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,OAAO;AAAA;AAAA;AAAA,MAGL,2BAA2B;AAAA;AAAA,MAC3B,oBAAoB;AAAA,MACpB,4BAA4B;AAAA;AAAA,MAC5B,uBAAuB,CAAC,SAAS,EAAE,iBAAiB,KAAK,CAAC;AAAA,MAC1D,4BAA4B;AAAA,MAC5B,uCAAuC;AAAA,MACvC,kCAAkC,CAAC,QAAQ,QAAQ;AAAA,MACnD,6BAA6B,CAAC,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAAA;AAAA,MAGrE,uCAAuC,CAAC,SAAS,EAAE,iBAAiB,iBAAiB,CAAC;AAAA,MACtF,gCAAgC,CAAC,SAAS,EAAE,YAAY,CAAC,MAAM,EAAE,CAAC;AAAA,MAClE,2BAA2B;AAAA;AAAA,MAG3B,kCAAkC;AAAA,MAClC,sCAAsC,CAAC,QAAQ,cAAc;AAAA,MAC7D,iCAAiC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,CAAC;AAAA,MACpE,iCAAiC,CAAC,MAAM;AAAA,MACxC,yBAAyB,CAAC,QAAQ,EAAE,eAAe,QAAQ,CAAC;AAAA,MAC5D,iBAAiB;AAAA,MACjB,uBAAuB,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;AAAA,MAC3C,kCAAkC;AAAA,MAClC,2BAA2B,CAAC,SAAS,OAAO;AAAA,MAC5C,mCAAmC;AAAA;AAAA,MAGnC,gCAAgC,CAAC,QAAQ,oBAAoB,EAAE,WAAW,KAAK,CAAC;AAAA,MAChF,kCAAkC;AAAA,QAChC;AAAA,QACA;AAAA,UACE,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,UACX,SAAS;AAAA,UACT,MAAM;AAAA,QACR;AAAA,MACF;AAAA;AAAA,MAGA,wBAAwB,CAAC,QAAQ,EAAE,gBAAgB,MAAM,eAAe,MAAM,eAAe,KAAK,CAAC;AAAA,MACnG,gCAAgC;AAAA,QAC9B;AAAA,QACA;AAAA,UACE,YAAY;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA;AAAA,MAGA,qCAAqC;AAAA,MACrC,+BAA+B;AAAA,QAC7B;AAAA,QACA;AAAA,UACE,iBACE;AAAA,QACJ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seanblonien/eslint-config-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Sean Blonien's opinionated ESLint config for TypeScript & React projects",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"eslint",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"dist"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@seanblonien/eslint-config-base": "1.0.
|
|
36
|
+
"@seanblonien/eslint-config-base": "1.0.1",
|
|
37
37
|
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
38
38
|
"eslint-plugin-react": "^7.37.5",
|
|
39
39
|
"eslint-plugin-react-compiler": "19.1.0-rc.2",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@types/node": "^24.10.1",
|
|
45
|
+
"@types/react": "^19.2.5",
|
|
45
46
|
"eslint": "^9.39.1",
|
|
46
47
|
"tsup": "^8.5.1",
|
|
47
48
|
"typescript": "^5.9.3",
|