Skip to content

Commit 100c778

Browse files
authored
feat: support flat config format default for ESLint 9 (#277)
* feat: export FlatConfig to support ESLint v9 * refactor: add backwards compatibility for ESLint < 9 and extract common configuration code * chore: updated README.md * fix: adjust plugin flowtype in node.factory.js to work with flat config properly * fix(test): created configuration for tests to be run both with ESLint v8 & v9 * fix: maintain previous order of plugins in final configuration * fix: bring back compatibility with any jest version in test package * refactor: export named functions from .factory.js source files
1 parent 0fe2501 commit 100c778

18 files changed

+3420
-2824
lines changed

Diff for: README.md

+108-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# @callstack/eslint-config
22

3-
Callstack ESLint config for React Native, React and Node.js projects, utilizing Flow, TypeScript, Prettier and Jest with sensible defaults.
3+
Callstack ESLint config for React Native, React and Node.js projects, utilizing Flow, TypeScript, Prettier and Jest with sensible defaults. Supports both eslintrc and flat config.
44

55
## Installation
66

@@ -18,18 +18,40 @@ npm install --save-dev eslint @callstack/eslint-config
1818

1919
## Usage
2020

21-
You can choose one of the following environments to work with by extending your ESLint config (`.eslintrc`, or `eslintConfig` field in `package.json`) with `@callstack` config tailored to your project.
21+
You can choose one of the following environments to work with by extending your ESLint config (`eslint.config.mjs` for flat config, or `.eslintrc` / `eslintConfig` field in `package.json` for the eslintrc config style) with `@callstack` config tailored to your project.
2222

2323
### React Native config
2424

2525
Usage:
2626

27+
#### eslintrc format (ESLint < v9)
28+
2729
```json
2830
{
2931
"extends": "@callstack"
3032
}
3133
```
3234

35+
#### flat config format (`eslint.config.mjs`, ESLint 9+)
36+
37+
```js
38+
import callstackConfig from '@callstack/eslint-config/react-native.flat.js';
39+
40+
export default [
41+
{
42+
ignores: [
43+
// ignored files go here
44+
],
45+
},
46+
...callstackConfig,
47+
{
48+
rules: {
49+
// your custom rules
50+
},
51+
},
52+
];
53+
```
54+
3355
Plugins used:
3456

3557
- **React config**
@@ -42,12 +64,34 @@ Additionally, it sets `"react-native/react-native"` environment and native platf
4264

4365
Usage:
4466

67+
#### eslintrc format (ESLint < v9)
68+
4569
```json
4670
{
4771
"extends": "@callstack/eslint-config/react"
4872
}
4973
```
5074

75+
#### flat config format (`eslint.config.mjs`, ESLint 9+)
76+
77+
```js
78+
import callstackConfigReact from '@callstack/eslint-config/react.flat.js';
79+
80+
export default [
81+
{
82+
ignores: [
83+
// ignored files go here
84+
],
85+
},
86+
...callstackConfigReact,
87+
{
88+
rules: {
89+
// your custom rules
90+
},
91+
},
92+
];
93+
```
94+
5195
Plugins used:
5296

5397
- **Node config**
@@ -58,12 +102,34 @@ Plugins used:
58102

59103
Usage:
60104

105+
#### eslintrc format (ESLint < v9)
106+
61107
```json
62108
{
63109
"extends": "@callstack/eslint-config/node"
64110
}
65111
```
66112

113+
#### flat config format (`eslint.config.mjs`, ESLint 9+)
114+
115+
```js
116+
import callstackConfigNode from '@callstack/eslint-config/node.flat.js';
117+
118+
export default [
119+
{
120+
ignores: [
121+
// ignored files go here
122+
],
123+
},
124+
...callstackConfigNode,
125+
{
126+
rules: {
127+
// your custom rules
128+
},
129+
},
130+
];
131+
```
132+
67133
Plugins used:
68134

69135
- [eslint-config-prettier](https://yarnpkg.com/en/package/eslint-config-prettier)
@@ -79,6 +145,8 @@ Additionally, it sets `es6` and `node` environments.
79145

80146
### Example of extending the configuration
81147

148+
##### eslintrc format (ESLint < v9)
149+
82150
```json
83151
{
84152
"extends": "@callstack",
@@ -89,6 +157,22 @@ Additionally, it sets `es6` and `node` environments.
89157
}
90158
```
91159

160+
##### flat config format (`eslint.config.mjs`, ESLint 9+)
161+
162+
```js
163+
import callstackConfig from '@callstack/eslint-config/react-native.flat.js';
164+
165+
export default [
166+
...callstackConfig,
167+
{
168+
rules: {
169+
'global-require': 0,
170+
'prefer-destructuring': 0,
171+
},
172+
},
173+
];
174+
```
175+
92176
### TypeScript
93177

94178
TypeScript is supported out-of-the-box, including importing JS files from TS files and vice-versa. All you need to do is to make sure you have [`typescript`](https://yarnpkg.com/en/package/typescript) module installed.
@@ -103,6 +187,8 @@ yarn eslint --ext '.js,.ts' ./src
103187

104188
To do so, you'll need to override our setup for TS files in your ESLint config:
105189

190+
##### eslintrc format (ESLint < v9)
191+
106192
```json
107193
{
108194
"overrides": [
@@ -116,6 +202,26 @@ To do so, you'll need to override our setup for TS files in your ESLint config:
116202
}
117203
```
118204

205+
##### flat config format (`eslint.config.mjs`, ESLint 9+)
206+
207+
In the flat config, just append another configuration object to the array and be sure to import the `/react-native.flat` file:
208+
209+
```js
210+
import callstackConfig from '@callstack/eslint-config/react-native.flat.js';
211+
import tsEslintParser from '@typescript-eslint/parser';
212+
213+
export default [
214+
...callstackConfig,
215+
{
216+
files: ['**/*.ts', '**/*.tsx'],
217+
languageOptions: {
218+
parser: tsEslintParser,
219+
parserOptions: { project: './packages/**/tsconfig.json' },
220+
},
221+
},
222+
];
223+
```
224+
119225
#### VSCode
120226

121227
If you're VSCode user, you may find adding this config to your `.vscode/settings.json` helpful:

0 commit comments

Comments
 (0)