0
# @react-native-community/eslint-config
1

2
@react-native-community/eslint-config is a comprehensive ESLint configuration package specifically designed for React Native development. It provides a complete set of linting rules, plugin integrations, and environment configurations to ensure code quality and consistency across React Native projects with support for JavaScript, TypeScript, Flow, and Jest testing.
3

4
## Package Information
5

6
- **Package Name**: @react-native-community/eslint-config
7
- **Package Type**: npm
8
- **Language**: JavaScript (ESLint configuration)
9
- **Installation**: `yarn add --dev eslint prettier @react-native-community/eslint-config`
10

11
The package requires ESLint >=8 and Prettier >=2 as peer dependencies.
12

13
## Core Imports
14

15
This package is consumed through ESLint configuration, not direct imports:
16

17
**.eslintrc.json:**
18
```json
19
{
20
  "extends": "@react-native-community"
21
}
22
```
23

24
**package.json eslintConfig:**
25
```json
26
{
27
  "eslintConfig": {
28
    "extends": "@react-native-community"
29
  }
30
}
31
```
32

33
## Basic Usage
34

35
After installation, add the configuration to your ESLint setup:
36

37
```json
38
{
39
  "extends": "@react-native-community"
40
}
41
```
42

43
The configuration automatically applies appropriate rules based on file types:
44
- JavaScript files (*.js) with Flow type checking support
45
- TypeScript files (*.ts, *.tsx) with TypeScript-specific rules
46
- Test files with Jest environment and relaxed styling rules
47

48
Example with additional custom rules:
49

50
```json
51
{
52
  "extends": "@react-native-community",
53
  "rules": {
54
    "no-console": "warn",
55
    "react-native/no-inline-styles": "error"
56
  }
57
}
58
```
59

60
## Architecture
61

62
The configuration is structured around several key components:
63

64
- **Base Configuration**: Core ESLint settings with ES6 environment and module support
65
- **Plugin Integration**: Comprehensive plugin ecosystem for React Native development
66
- **File-specific Overrides**: Language-specific configurations for JavaScript, TypeScript, and test files
67
- **Global Variable Definitions**: React Native and platform-specific global variables
68
- **Rule Categorization**: Organized rule sets covering code quality, style, and best practices
69

70
## Capabilities
71

72
### ESLint Configuration Export
73

74
The main export provides a complete ESLint configuration object with all necessary settings for React Native development.
75

76
```javascript { .api }
77
/**
78
 * Main ESLint configuration export
79
 * @type {ESLintConfig}
80
 */
81
module.exports = ESLintConfig;
82

83
interface ESLintConfig {
84
  /** Environment configuration */
85
  env: {
86
    es6: boolean;
87
  };
88
  /** Parser options for module support */
89
  parserOptions: {
90
    sourceType: "module";
91
  };
92
  /** Extended configurations */
93
  extends: ["plugin:prettier/recommended"];
94
  /** ESLint plugins used */
95
  plugins: string[];
96
  /** Plugin-specific settings */
97
  settings: {
98
    react: {
99
      version: "detect";
100
    };
101
  };
102
  /** File-specific rule overrides */
103
  overrides: FileOverride[];
104
  /** Global variables defined for React Native */
105
  globals: GlobalVariables;
106
  /** Complete rule configuration */
107
  rules: RuleConfiguration;
108
}
109
```
110

111
### Environment Configuration
112

113
Configures the ESLint environment for modern JavaScript and React Native development.
114

115
```javascript { .api }
116
interface EnvironmentConfig {
117
  /** Enable ES6 global variables and features */
118
  es6: boolean;
119
}
120
```
121

122
### Parser Configuration
123

124
Sets up module-based parsing for modern JavaScript imports/exports.
125

126
```javascript { .api }
127
interface ParserOptions {
128
  /** Source type for module imports/exports */
129
  sourceType: "module";
130
}
131
```
132

133
### Plugin Integration
134

135
Integrates essential ESLint plugins for React Native development.
136

137
```javascript { .api }
138
/** ESLint plugins included in the configuration */
139
type PluginList = [
140
  "eslint-comments",
141
  "react", 
142
  "react-hooks",
143
  "react-native",
144
  "@react-native-community",
145
  "jest"
146
];
147
```
148

149
Plugins provide specialized linting rules for:
150
- **eslint-comments**: ESLint directive management
151
- **react**: React-specific linting rules
152
- **react-hooks**: React Hooks rules of hooks validation
153
- **react-native**: React Native platform-specific rules
154
- **@react-native-community**: Community-driven React Native rules
155
- **jest**: Jest testing framework support
156

157
### File-specific Overrides
158

159
Provides specialized configurations for different file types and environments.
160

161
```javascript { .api }
162
interface FileOverride {
163
  /** File patterns to match */
164
  files: string[];
165
  /** Parser for the file type */
166
  parser?: string;
167
  /** Additional plugins for file type */
168
  plugins?: string[];
169
  /** Environment settings */
170
  env?: {
171
    jest?: boolean;
172
    "jest/globals"?: boolean;
173
  };
174
  /** File-specific rules */
175
  rules: Partial<RuleConfiguration>;
176
}
177

178
/** File override configurations */
179
type OverrideConfigurations = [
180
  JavaScriptOverride,
181
  TypeScriptOverride, 
182
  TestFileOverride
183
];
184
```
185

186
**JavaScript Files (*.js):**
187
- Uses @babel/eslint-parser for modern JavaScript parsing
188
- Enables ft-flow plugin for Flow type checking
189
- Applies Flow-specific linting rules
190

191
**TypeScript Files (*.ts, *.tsx):**
192
- Uses @typescript-eslint/parser for TypeScript parsing
193
- Enables @typescript-eslint/eslint-plugin
194
- Applies TypeScript-specific rules for unused variables, shadows, and function calls
195

196
**Test Files:**
197
- Matches test patterns: `*.{spec,test}.{js,ts,tsx}` and `**/__{mocks,tests}__/**/*.{js,ts,tsx}`
198
- Enables Jest environment and globals
199
- Relaxes styling rules for test code
200

201
### Global Variables
202

203
Defines React Native and platform-specific global variables.
204

205
```javascript { .api }
206
interface GlobalVariables {
207
  /** React Native development mode flag */
208
  __DEV__: boolean;
209
  /** Node.js dirname variable */
210
  __dirname: boolean;
211
  /** React Native bridge configuration */
212
  __fbBatchedBridgeConfig: boolean;
213
  /** Web APIs available in React Native */
214
  AbortController: boolean;
215
  Blob: boolean;
216
  fetch: boolean;
217
  FormData: boolean;
218
  Headers: boolean;
219
  URL: boolean;
220
  URLSearchParams: boolean;
221
  WebSocket: boolean;
222
  XMLHttpRequest: boolean;
223
  /** JavaScript built-ins with React Native modifications */
224
  Map: boolean;
225
  Set: boolean;
226
  Promise: boolean;
227
  /** Timing functions */
228
  setTimeout: boolean;
229
  setInterval: boolean;
230
  clearTimeout: boolean;
231
  clearInterval: boolean;
232
  requestAnimationFrame: boolean;
233
  cancelAnimationFrame: boolean;
234
  setImmediate: boolean;
235
  clearImmediate: boolean;
236
  /** Other React Native globals */
237
  console: boolean;
238
  global: boolean;
239
  navigator: boolean;
240
  process: boolean;
241
  alert: boolean;
242
  /** Additional React Native globals */
243
  ErrorUtils: boolean;
244
  escape: boolean;
245
  Event: boolean;
246
  EventTarget: boolean;
247
  exports: boolean;
248
  File: boolean;
249
  FileReader: boolean;
250
  Intl: boolean;
251
  module: boolean;
252
  require: boolean;
253
  queueMicrotask: boolean;
254
  requestIdleCallback: boolean;
255
  cancelIdleCallback: boolean;
256
  window: boolean;
257
  document: boolean;
258
}
259
```
260

261
### Rule Configuration
262

263
Comprehensive linting rules organized by category covering all aspects of JavaScript/TypeScript and React Native development.
264

265
```javascript { .api }
266
interface RuleConfiguration {
267
  /** General JavaScript rules */
268
  "comma-dangle": [number, string];
269
  "no-cond-assign": number;
270
  "no-console": number;
271
  "no-const-assign": number;
272
  "no-debugger": number;
273
  "no-unused-vars": [number, UnusedVarsOptions];
274
  
275
  /** Best practices rules */
276
  "curly": number;
277
  "eqeqeq": [number, string];
278
  "no-eval": number;
279
  "no-alert": number;
280
  
281
  /** Stylistic rules */
282
  "quotes": [number, string, string];
283
  "semi": number;
284
  "keyword-spacing": number;
285
  "jsx-quotes": [number, string];
286
  
287
  /** React plugin rules */
288
  "react/jsx-uses-react": number;
289
  "react/jsx-uses-vars": number;
290
  "react/no-string-refs": number;
291
  "react/react-in-jsx-scope": number;
292
  
293
  /** React Hooks rules */
294
  "react-hooks/rules-of-hooks": number;
295
  "react-hooks/exhaustive-deps": number;
296
  
297
  /** React Native specific rules */
298
  "react-native/no-inline-styles": number;
299
  
300
  /** Jest testing rules */
301
  "jest/no-disabled-tests": number;
302
  "jest/no-focused-tests": number;
303
  "jest/valid-expect": number;
304
  
305
  /** ESLint comments rules */
306
  "eslint-comments/no-unused-disable": number;
307
  "eslint-comments/no-unused-enable": number;
308
  
309
  /** TypeScript rules (in overrides) */
310
  "@typescript-eslint/no-unused-vars": ["error", TypeScriptUnusedVarsOptions];
311
  "@typescript-eslint/no-shadow": 1;
312
  "@typescript-eslint/func-call-spacing": 1;
313
  
314
  /** Flow rules (in overrides) */
315
  "ft-flow/define-flow-type": number;
316
  "ft-flow/use-flow-type": number;
317
}
318

319
interface UnusedVarsOptions {
320
  vars: "all";
321
  args: "none"; 
322
  ignoreRestSiblings: boolean;
323
}
324

325
interface TypeScriptUnusedVarsOptions {
326
  argsIgnorePattern: string;
327
  destructuredArrayIgnorePattern: string;
328
}
329
```
330

331
Rule severity levels:
332
- **0**: Rule disabled
333
- **1**: Warning level
334
- **2**: Error level
335

336
### Dependencies
337

338
The configuration automatically manages and configures these ESLint plugins and parsers:
339

340
```javascript { .api }
341
interface PackageDependencies {
342
  /** Core parsing and configuration */
343
  "@babel/core": string;
344
  "@babel/eslint-parser": string;
345
  "eslint-config-prettier": string;
346
  "eslint-plugin-prettier": string;
347
  
348
  /** React ecosystem */
349
  "eslint-plugin-react": string;
350
  "eslint-plugin-react-hooks": string;
351
  "eslint-plugin-react-native": string;
352
  "@react-native-community/eslint-plugin": string;
353
  
354
  /** TypeScript support */
355
  "@typescript-eslint/eslint-plugin": string;
356
  "@typescript-eslint/parser": string;
357
  
358
  /** Additional tools */
359
  "eslint-plugin-eslint-comments": string;
360
  "eslint-plugin-ft-flow": string;
361
  "eslint-plugin-jest": string;
362
}
363

364
interface PeerDependencies {
365
  /** Required ESLint version */
366
  eslint: ">=8";
367
  /** Required Prettier version */
368
  prettier: ">=2";
369
}
370
```
371

372
## Types
373

374
```javascript { .api }
375
/** Main configuration type exported by the package */
376
type ESLintConfig = {
377
  env: EnvironmentConfig;
378
  parserOptions: ParserOptions;
379
  extends: string[];
380
  plugins: PluginList;
381
  settings: PluginSettings;
382
  overrides: FileOverride[];
383
  globals: GlobalVariables;
384
  rules: RuleConfiguration;
385
};
386

387
/** Plugin-specific settings */
388
interface PluginSettings {
389
  react: {
390
    version: "detect";
391
  };
392
}
393
```