Skip to content

Commit b73ab12

Browse files
sethamussethamus
authored
docs: update examples to use defineConfig (#20131)
1 parent 47afcf6 commit b73ab12

File tree

3 files changed

+62
-37
lines changed

3 files changed

+62
-37
lines changed

‎docs/src/extend/custom-parsers.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -129,16 +129,17 @@ Then add the custom parser to your ESLint configuration file with the `languageO
129129
```js
130130
// eslint.config.js
131131

132+
const { defineConfig } = require("eslint/config");
132133
const myparser = require("eslint-parser-myparser");
133134

134-
module.exports = [
135+
module.exports = defineConfig([
135136
{
136137
languageOptions: {
137138
parser: myparser,
138139
},
139140
// ... rest of configuration
140141
},
141-
];
142+
]);
142143
```
143144

144145
When using legacy configuration, specify the `parser` property as a string:
@@ -183,13 +184,15 @@ Include the custom parser in an ESLint configuration file:
183184

184185
```js
185186
// eslint.config.js
186-
module.exports = [
187+
const { defineConfig } = require("eslint/config");
188+
189+
module.exports = defineConfig([
187190
{
188191
languageOptions: {
189192
parser: require("./path/to/awesome-custom-parser"),
190193
},
191194
},
192-
];
195+
]);
193196
```
194197

195198
Or if using legacy configuration:

‎docs/src/use/configure/migration-guide.md‎

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,10 @@ In flat config, you would do the same thing like this:
8080
```javascript
8181
// eslint.config.js
8282

83+
import { defineConfig } from "eslint/config";
8384
import jsdoc from "eslint-plugin-jsdoc";
8485

85-
export default [
86+
export default defineConfig([
8687
{
8788
files: ["**/*.js"],
8889
plugins: {
@@ -93,7 +94,7 @@ export default [
9394
"jsdoc/check-values": "error",
9495
},
9596
},
96-
];
97+
]);
9798
```
9899

99100
::: tip
@@ -123,17 +124,18 @@ In flat config, you would do the same thing like this:
123124
```javascript
124125
// eslint.config.js
125126

127+
import { defineConfig } from "eslint/config";
126128
import babelParser from "@babel/eslint-parser";
127129

128-
export default [
130+
export default defineConfig([
129131
{
130132
// ...other config
131133
languageOptions: {
132134
parser: babelParser,
133135
},
134136
// ...other config
135137
},
136-
];
138+
]);
137139
```
138140

139141
### Processors
@@ -187,9 +189,10 @@ In flat config, the following are all valid ways to express the same:
187189

188190
```javascript
189191
// eslint.config.js
192+
import { defineConfig } from "eslint/config";
190193
import somePlugin from "eslint-plugin-someplugin";
191194

192-
export default [
195+
export default defineConfig([
193196
{
194197
plugins: { somePlugin },
195198
processor: "somePlugin/someProcessor",
@@ -203,7 +206,7 @@ export default [
203206
// We don't need the plugin to be present in the config to use the processor directly
204207
processor: somePlugin.processors.someProcessor,
205208
},
206-
];
209+
]);
207210
```
208211

209212
Note that because the `.md` processor is _not_ automatically added by flat config, you also need to specify an extra configuration element:
@@ -265,9 +268,10 @@ For flat config, here is a configuration with the default glob pattern:
265268
```javascript
266269
// eslint.config.js
267270

271+
import { defineConfig } from "eslint/config";
268272
import js from "@eslint/js";
269273

270-
export default [
274+
export default defineConfig([
271275
js.configs.recommended, // Recommended config applied to all files
272276
// Override the recommended config
273277
{
@@ -277,17 +281,18 @@ export default [
277281
},
278282
// ...other configuration
279283
},
280-
];
284+
]);
281285
```
282286

283287
A flat config example configuration supporting multiple configs for different glob patterns:
284288

285289
```javascript
286290
// eslint.config.js
287291

292+
import { defineConfig } from "eslint/config";
288293
import js from "@eslint/js";
289294

290-
export default [
295+
export default defineConfig([
291296
js.configs.recommended, // Recommended config applied to all files
292297
// File-pattern specific overrides
293298
{
@@ -303,7 +308,7 @@ export default [
303308
},
304309
},
305310
// ...other configurations
306-
];
311+
]);
307312
```
308313

309314
### Configuring Language Options
@@ -338,9 +343,10 @@ Here's the same configuration in flat config:
338343
```javascript
339344
// eslint.config.js
340345

346+
import { defineConfig } from "eslint/config";
341347
import globals from "globals";
342348

343-
export default [
349+
export default defineConfig([
344350
{
345351
languageOptions: {
346352
ecmaVersion: 2022,
@@ -353,7 +359,7 @@ export default [
353359
},
354360
// ...other config
355361
},
356-
];
362+
]);
357363
```
358364

359365
::: tip
@@ -402,9 +408,10 @@ Another option is to remove the comment from the file being linted and define th
402408
```javascript
403409
// eslint.config.js
404410

411+
import { defineConfig } from "eslint/config";
405412
import globals from "globals";
406413

407-
export default [
414+
export default defineConfig([
408415
// ...other config
409416
{
410417
files: ["tests/**"],
@@ -414,7 +421,7 @@ export default [
414421
},
415422
},
416423
},
417-
];
424+
]);
418425
```
419426

420427
### Predefined and Shareable Configs
@@ -475,11 +482,12 @@ To use the same configs in flat config, you would do the following:
475482
```javascript
476483
// eslint.config.js
477484

485+
import { defineConfig } from "eslint/config";
478486
import js from "@eslint/js";
479487
import customConfig from "./custom-config.js";
480488
import myConfig from "eslint-config-my-config";
481489

482-
export default [
490+
export default defineConfig([
483491
js.configs.recommended,
484492
customConfig,
485493
myConfig,
@@ -489,24 +497,25 @@ export default [
489497
},
490498
// ...other config
491499
},
492-
];
500+
]);
493501
```
494502

495503
Note that because you are just importing JavaScript modules, you can mutate the config objects before ESLint uses them. For example, you might want to have a certain config object only apply to your test files:
496504

497505
```javascript
498506
// eslint.config.js
499507

508+
import { defineConfig } from "eslint/config";
500509
import js from "@eslint/js";
501510
import customTestConfig from "./custom-test-config.js";
502511

503-
export default [
512+
export default defineConfig([
504513
js.configs.recommended,
505514
{
506515
...customTestConfig,
507516
files: ["**/*.test.js"],
508517
},
509-
];
518+
]);
510519
```
511520

512521
#### Using eslintrc Configs in Flat Config
@@ -522,6 +531,7 @@ You may find that there's a shareable config you rely on that hasn't yet been up
522531
Then, import `FlatCompat` and create a new instance to convert an existing eslintrc config. For example, if the npm package `eslint-config-my-config` is in eslintrc format, you can write this:
523532

524533
```js
534+
import { defineConfig } from "eslint/config";
525535
import { FlatCompat } from "@eslint/eslintrc";
526536
import path from "path";
527537
import { fileURLToPath } from "url";
@@ -534,10 +544,10 @@ const compat = new FlatCompat({
534544
baseDirectory: __dirname,
535545
});
536546

537-
export default [
547+
export default defineConfig([
538548
// mimic ESLintRC-style extends
539549
...compat.extends("eslint-config-my-config"),
540-
];
550+
]);
541551
```
542552
543553
This example uses the `FlatCompat#extends()` method to insert the `eslint-config-my-config` into the flat config array.
@@ -572,13 +582,15 @@ module.exports = {
572582
The equivalent ignore patterns in flat config look like this:
573583
574584
```javascript
575-
export default [
585+
import { defineConfig } from "eslint/config";
586+
587+
export default defineConfig([
576588
// ...other config
577589
{
578590
// Note: there should be no other properties in this object
579591
ignores: ["**/temp.js", "config/*"],
580592
},
581-
];
593+
]);
582594
```
583595
584596
In `.eslintignore`, `temp.js` ignores all files named `temp.js`, whereas in flat config, you need to specify this as `**/temp.js`. The pattern `temp.js` in flat config only ignores a file named `temp.js` in the same directory as the configuration file.
@@ -610,15 +622,17 @@ Here's the same options in flat config:
610622
```javascript
611623
// eslint.config.js
612624

613-
export default [
625+
import { defineConfig } from "eslint/config";
626+
627+
export default defineConfig([
614628
{
615629
// ...other config
616630
linterOptions: {
617631
noInlineConfig: true,
618632
reportUnusedDisableDirectives: "warn",
619633
},
620634
},
621-
];
635+
]);
622636
```
623637
624638
### CLI Flag Changes
@@ -637,9 +651,10 @@ The `--rulesdir` flag was used to load additional rules from a specified directo
637651
638652
```js
639653
// eslint.config.js
654+
import { defineConfig } from "eslint/config";
640655
import myRule from "./rules/my-rule.js";
641656

642-
export default [
657+
export default defineConfig([
643658
{
644659
// define the plugin
645660
plugins: {
@@ -655,7 +670,7 @@ export default [
655670
"local/my-rule": ["error"],
656671
},
657672
},
658-
];
673+
]);
659674
```
660675
661676
#### `--ext`
@@ -664,13 +679,15 @@ The `--ext` flag was used to specify additional file extensions ESLint should se
664679
665680
```js
666681
// eslint.config.js
667-
export default [
682+
import { defineConfig } from "eslint/config";
683+
684+
export default defineConfig([
668685
{
669686
files: ["**/*.ts", "**/*.tsx"],
670687

671688
// any additional configuration for these file types here
672689
},
673-
];
690+
]);
674691
```
675692
676693
ESLint uses the `files` keys from the config file to determine which files should be linted.

‎docs/src/use/core-concepts/glossary.md‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,15 @@ Each config file exports a [config array](#config-array) containing [config obje
3333
For example, this `eslint.config.js` file enables the `prefer-const` [rule](#rule) at the _error_ [severity](#severity):
3434

3535
```js
36-
export default [
36+
import { defineConfig } from "eslint/config";
37+
38+
export default defineConfig([
3739
{
3840
rules: {
3941
"prefer-const": "error",
4042
},
4143
},
42-
];
44+
]);
4345
```
4446

4547
See [Configuration Files](../configure/configuration-files) for more details.
@@ -242,7 +244,9 @@ When a [config object](#config-object) or [inline config](#inline-config-configu
242244
The following [config file](#config-file-configuration-file) overrides `no-unused-expressions` from `"error"` to `"off"` in `*.test.js` files:
243245

244246
```js
245-
export default [
247+
import { defineConfig } from "eslint/config";
248+
249+
export default defineConfig([
246250
{
247251
rules: {
248252
"no-unused-expressions": "error",
@@ -254,7 +258,7 @@ export default [
254258
"no-unused-expressions": "off",
255259
},
256260
},
257-
];
261+
]);
258262
```
259263

260264
The following [inline config](#inline-config-configuration-comment) sets `no-unused-expressions` to `"error"`:
@@ -346,10 +350,11 @@ Many plugins provide configs with names like _"recommended"_ that enable their s
346350
For example, [`eslint-plugin-solid`](https://github.com/solidjs-community/eslint-plugin-solid) provides a shareable recommended config:
347351

348352
```js
353+
import { defineConfig } from "eslint/config";
349354
import js from "@eslint/js";
350355
import solid from "eslint-plugin-solid/configs/recommended";
351356

352-
export default [js.configs.recommended, solid];
357+
export default defineConfig([js.configs.recommended, solid]);
353358
```
354359

355360
For information on shareable configs, see [Share Configurations](../../extend/shareable-configs).

0 commit comments

Comments
 (0)