UNPKG

30.9 kBMarkdownView Raw
1# eslint-config-prettier
2
3Turns off all rules that are unnecessary or might conflict with [Prettier].
4
5This lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier.
6
7Note that this config _only_ turns rules _off,_ so it only makes sense using it together with some other config.
8
9[prettier]: https://github.com/prettier/prettier
10
11## Installation
12
131. Install eslint-config-prettier:
14
15 ```
16 npm install --save-dev eslint-config-prettier
17 ```
18
192. Add eslint-config-prettier to your ESLint configuration – either to [eslintrc] or to [eslint.config.js (flat config)].
20
21 - eslintrc: Add `"prettier"` to the "extends" array in your `.eslintrc.*` file. Make sure to put it **last,** so it gets the chance to override other configs.
22
23 <!-- prettier-ignore -->
24 ```json
25 {
26 "extends": [
27 "some-other-config-you-use",
28 "prettier"
29 ]
30 }
31 ```
32
33 - eslint.config.js (flat config): Import eslint-config-prettier, and put it in the configuration array – **after** other configs that you want to override.
34
35 <!-- prettier-ignore -->
36 ```js
37 import someConfig from "some-other-config-you-use";
38 import eslintConfigPrettier from "eslint-config-prettier";
39
40 export default [
41 someConfig,
42 eslintConfigPrettier,
43 ];
44 ```
45
463. Finally, run the [CLI helper tool](#cli-helper-tool) to find problems in the `"rules"` sections of your config.
47
48> 👉 Using [eslint-plugin-prettier]? Check out [eslint-plugin-prettier’s recommended config][eslint-plugin-prettier-recommended].
49
50### Plugins
51
52eslint-config-prettier not only turns off _core_ rules, but also some from these plugins automatically:
53
54- [@typescript-eslint/eslint-plugin]
55- [@babel/eslint-plugin]
56- [eslint-plugin-babel]
57- [eslint-plugin-flowtype]
58- [eslint-plugin-react]
59- [eslint-plugin-standard]
60- [eslint-plugin-unicorn]
61- [eslint-plugin-vue]
62
63> ℹ️ Note: You might find guides on the Internet saying you should also extend stuff like `"prettier/react"`. Since version 8.0.0 of eslint-config-prettier, all you need to extend is `"prettier"`! That includes all plugins.
64
65#### eslint.config.js (flat config) plugin caveat
66
67With flat config, _you_ get to decide the plugin name! For example:
68
69```js
70import typescriptEslint from "@typescript-eslint/eslint-plugin";
71import eslintConfigPrettier from "eslint-config-prettier";
72
73export default [
74 {
75 plugins: {
76 // You’d typically use one of the following two:
77 // typescriptEslint: typescriptEslint,
78 // typescriptEslint,
79 // But in this example we give it another name.
80 // It might be tempting to use something shorter like “ts”:
81 ts: typescriptEslint, // 🚨 Don’t do this!
82 },
83 rules: {
84 // With eslintrc, this is _always_ called:
85 // @typescript-eslint/indent
86 // But in eslint.config.js (flat config), the name chosen above in `plugins` is used.
87 "ts/indent": "error", // 🚨 Don’t do this!
88 },
89 },
90 eslintConfigPrettier,
91];
92```
93
94You might expect eslint-config-prettier to turn off `ts/indent`, but it won’t! Because eslint-config-prettier only turns off `@typescript-eslint/indent`. It cannot know what you chose to call the plugin. Same thing for the CLI helper tool.
95
96Simply stick to the official plugin names and you’ll be all good.
97
98If you encounter a shared _config_ that uses a non-standard plugin name, please ask them to use the standard name instead.
99
100### Excluding deprecated rules
101
102Some of the rules that eslint-config-prettier turns off may be deprecated, or even removed from ESLint. **This is perfectly fine,** but if you really need to omit the deprecated and removed rules, you can do so by setting the `ESLINT_CONFIG_PRETTIER_NO_DEPRECATED` environment variable to a non-empty value. For example:
103
104```
105env ESLINT_CONFIG_PRETTIER_NO_DEPRECATED=true npx eslint-find-rules --deprecated index.js
106```
107
108## CLI helper tool
109
110eslint-config-prettier also ships with a little CLI tool to help you check if your configuration contains any rules that are unnecessary or conflict with Prettier. Here’s how to run it:
111
112```
113npx eslint-config-prettier path/to/main.js
114```
115
116(Change `path/to/main.js` to a file that exists in your project.)
117
118### What and why
119
120Now, let’s have a look at what it does and why you might want to use it.
121
122🚨 This eslintrc example has a **conflicting rule** `"indent"` enabled:
123
124<!-- prettier-ignore -->
125```json
126{
127 "extends": [
128 "some-other-config-you-use",
129 "prettier"
130 ],
131 "rules": {
132 "indent": "error"
133 }
134}
135```
136
137For eslintrc, while the `"prettier"` config can disable problematic rules in `"some-other-config-you-use"`, it cannot touch `"rules"`! (That’s how ESLint works – it lets you override configs you extend.) The CLI helper tool reports that `"indent"` conflicts with Prettier, so you can remove it. (Which is nice – simplifying your config!)
138
139🚨 This eslint.config.js (flat config) example also has a **conflicting rule** `"indent"` enabled:
140
141```js
142import someConfig from "some-other-config-you-use";
143import eslintConfigPrettier from "eslint-config-prettier";
144
145export default [
146 someConfig,
147 eslintConfigPrettier,
148 {
149 rules: {
150 indent: "error",
151 },
152 },
153];
154```
155
156With the new ESLint “flat config” format, you can control what things override what yourself. One way of solving the above conflict is to reorder the config objects so that eslint-config-prettier is last:
157
158```js
159import someConfig from "some-other-config-you-use";
160import eslintConfigPrettier from "eslint-config-prettier";
161
162export default [
163 someConfig,
164 {
165 rules: {
166 indent: "error",
167 },
168 },
169 eslintConfigPrettier, // eslint-config-prettier last
170];
171```
172
173However, looking at the above config might feel confusing. It looks like we enable the `indent` rule, but in reality it’s disabled thanks to the `eslintConfigPrettier` line below it. Instead you might want to actually have your own rules _after_ eslint-config-prettier and run the CLI helper tool to find out about problems, so you can remove conflicting rules from the config file altogether (simplifying your config).
174
175### Checking multiple files
176
177In theory you need to run the tool for every single file in your project to be 100% sure that there are no conflicting rules, because ESLint supports having different rules for different files. Usually you’ll have about the same rules for all files, so it is good enough to run the command on one file. But if you use [multiple configuration files] or [overrides], you can provide several files to check:
178
179```
180npx eslint-config-prettier index.js test/index.js legacy/main.js
181```
182
183### Exit codes
184
185- 0: No problems found.
186- 1: Unexpected error.
187- 2: Conflicting rules found.
188
189### ESLINT_USE_FLAT_CONFIG environment variable
190
191Just like ESLint itself, you can control the eslint-config-prettier CLI helper tool using the `ESLINT_USE_FLAT_CONFIG` environment variable:
192
193- `ESLINT_USE_FLAT_CONFIG=true`: Only use eslint.config.js (flat config).
194- `ESLINT_USE_FLAT_CONFIG=false`: Only use eslintrc files.
195- Unset or any other value: First try eslint.config.js, then eslintrc.
196
197> **Warning**
198> For eslint.config.js (flat config), the CLI helper tool imports `eslint/use-at-your-own-risk` which may break at any time.
199
200### Legacy
201
202eslint-config-prettier versions before 7.0.0 had a slightly different CLI tool that was run in a different way. For example:
203
204```
205npx eslint --print-config index.js | npx eslint-config-prettier-check
206```
207
208If you find something like that in a tutorial, this is what the command looks like in 7.0.0 or later:
209
210```
211npx eslint-config-prettier index.js
212```
213
214## Special rules
215
216There a few rules that eslint-config-prettier disables that actually can be enabled in some cases.
217
218- Some require certain options. The CLI helper tool validates this.
219- Some require special attention when writing code. The CLI helper tool warns you if any of those rules are enabled, but can’t tell if anything is problematic.
220- Some can cause problems if using [eslint-plugin-prettier] and `--fix`.
221
222For maximum ease of use, the special rules are disabled by default (provided that you include all needed things in `"extends"`). If you want them, you need to explicitly specify them in your ESLint config.
223
224### [arrow-body-style] and [prefer-arrow-callback]
225
226**These rules might cause problems if using [eslint-plugin-prettier] and `--fix`.**
227
228See the [`arrow-body-style` and `prefer-arrow-callback` issue][eslint-plugin-prettier-autofix-issue] for details.
229
230There are a couple of ways to turn these rules off:
231
232- Put `"plugin:prettier/recommended"` in your `"extends"`. That’s [eslint-<strong>plugin</strong>-prettier’s recommended config][eslint-plugin-prettier-recommended].
233- Put `"prettier/prettier"` in your `"extends"`. (Yes, there’s both a _rule_ called `"prettier/prettier"` and a _config_ called `"prettier/prettier"`.)
234- Remove them from your config or turn them off manually.
235
236It doesn’t matter which approach you use. `"plugin:prettier/recommended"` is probably the easiest.
237
238Note: The CLI tool only reports these as problematic if the `"prettier/prettier"` _rule_ is enabled for the same file.
239
240These rules are safe to use if you don’t use [eslint-plugin-prettier]. In other words, if you run `eslint --fix` and `prettier --write` as separate steps.
241
242### [curly]
243
244**This rule requires certain options.**
245
246If a block (for example after `if`, `else`, `for` or `while`) contains only one statement, JavaScript allows omitting the curly braces around that statement. This rule enforces if or when those optional curly braces should be omitted.
247
248If you use the `"multi-line"` or `"multi-or-nest"` option, the rule can conflict with Prettier.
249
250For example, the `"multi-line"` option allows this line:
251
252<!-- prettier-ignore -->
253```js
254if (cart.items && cart.items[0] && cart.items[0].quantity === 0) updateCart(cart);
255```
256
257However, Prettier might consider the line too long and turn it into the following, which the `"multi-line"` option does _not_ allow:
258
259<!-- prettier-ignore -->
260```js
261if (cart.items && cart.items[0] && cart.items[0].quantity === 0)
262 updateCart(cart);
263```
264
265If you like this rule, it can be used just fine with Prettier as long as you don’t use the `"multi-line"` or `"multi-or-nest"` option.
266
267Example ESLint configuration:
268
269<!-- prettier-ignore -->
270```json
271{
272 "rules": {
273 "curly": ["error", "all"]
274 }
275}
276```
277
278### [lines-around-comment] \(deprecated)
279
280(The following applies to [@stylistic/lines-around-comment], [@stylistic/js/lines-around-comment], [@stylistic/ts/lines-around-comment], and [@typescript-eslint/lines-around-comment] as well.)
281
282**This rule can be used with certain options.**
283
284This rule requires empty lines before and/or after comments. Prettier preserves blank lines, with two exceptions:
285
286- Several blank lines in a row are collapsed into a single blank line. This is fine.
287- Blank lines at the beginning and end of blocks, objects and arrays are always removed. This may lead to conflicts.
288
289By default, ESLint requires a blank line above the comment is this case:
290
291<!-- prettier-ignore -->
292```js
293if (result) {
294
295 /* comment */
296 return result;
297}
298```
299
300However, Prettier removes the blank line:
301
302<!-- prettier-ignore -->
303```js
304if (result) {
305 /* comment */
306 return result;
307}
308```
309
310If you like this rule, it can be used just fine with Prettier as long as you add some extra configuration to allow comments at the start and end of blocks, objects and arrays.
311
312Example ESLint configuration:
313
314<!-- prettier-ignore -->
315```json
316{
317 "rules": {
318 "lines-around-comment": [
319 "error",
320 {
321 "beforeBlockComment": true,
322 "afterBlockComment": true,
323 "beforeLineComment": true,
324 "afterLineComment": true,
325 "allowBlockStart": true,
326 "allowBlockEnd": true,
327 "allowObjectStart": true,
328 "allowObjectEnd": true,
329 "allowArrayStart": true,
330 "allowArrayEnd": true
331 }
332 ]
333 }
334}
335```
336
337### [max-len] \(deprecated)
338
339(The following applies to [@stylistic/max-len], [@stylistic/js/max-len], and [vue/max-len] as well.)
340
341**This rule requires special attention when writing code.**
342
343Usually, Prettier takes care of following a maximum line length automatically. However, there are cases where Prettier can’t do anything, such as for long strings, regular expressions and comments. Those need to be split up by a human.
344
345If you’d like to enforce an even stricter maximum line length policy than Prettier can provide automatically, you can enable this rule. Just remember to keep `max-len`’s options and Prettier’s `printWidth` option in sync.
346
347Keep in mind that you might have to refactor code slightly if Prettier formats lines in a way that the `max-len` rule does not approve of.
348
349Example ESLint configuration:
350
351<!-- prettier-ignore -->
352```json
353{
354 "rules": {
355 "max-len": ["error", {"code": 80, "ignoreUrls": true}]
356 }
357}
358```
359
360### [no-confusing-arrow] \(deprecated)
361
362(The following applies to [@stylistic/no-confusing-arrow] and [@stylistic/js/no-confusing-arrow] as well.)
363
364**This rule requires certain options.**
365
366For example, the rule could warn about this line:
367
368<!-- prettier-ignore -->
369```js
370var x = a => 1 ? 2 : 3;
371```
372
373With `{allowParens: true}` (the default since ESLint 6.0.0), adding parentheses is considered a valid way to avoid the arrow confusion:
374
375<!-- prettier-ignore -->
376```js
377var x = a => (1 ? 2 : 3);
378```
379
380While Prettier keeps those parentheses, it removes them if the line is long enough to introduce a line break:
381
382<!-- prettier-ignore -->
383```js
384EnterpriseCalculator.prototype.calculateImportantNumbers = inputNumber =>
385 1 ? 2 : 3;
386```
387
388With `{allowParens: false}`, ESLint instead suggests switching to an explicit return:
389
390<!-- prettier-ignore -->
391```js
392var x = a => { return 1 ? 2 : 3; };
393```
394
395That causes no problems with Prettier.
396
397If you like this rule, it can be used just fine with Prettier as long as the `allowParens` option is off.
398
399Example ESLint configuration:
400
401<!-- prettier-ignore -->
402```json
403{
404 "rules": {
405 "no-confusing-arrow": ["error", { "allowParens": false }]
406 }
407}
408```
409
410(Note: The CLI helper tool considers `{allowParens: true}` to be the default, which is the case since ESLint 6.0.0. The tool will produce a warning if you use the default even if you use an older version of ESLint. It doesn’t hurt to explicitly set `{allowParens: false}` even though it is technically redundant. This way you are prepared for a future ESLint upgrade and the CLI tool can be kept simple.)
411
412### [no-mixed-operators] \(deprecated)
413
414(The following applies to [@stylistic/no-mixed-operators] and [@stylistic/js/no-mixed-operators] as well.)
415
416**This rule requires special attention when writing code.**
417
418This rule forbids mixing certain operators, such as `&&` and `||`.
419
420For example, the rule could warn about this line:
421
422<!-- prettier-ignore -->
423```js
424var foo = a + b * c;
425```
426
427The rule suggests adding parentheses, like this:
428
429<!-- prettier-ignore -->
430```js
431var foo = a + (b * c);
432```
433
434However, Prettier removes many “unnecessary” parentheses, turning it back to:
435
436<!-- prettier-ignore -->
437```js
438var foo = a + b * c;
439```
440
441If you want to use this rule with Prettier, you need to split the expression into another variable:
442
443<!-- prettier-ignore -->
444```js
445var bar = b * c;
446var foo = a + bar;
447```
448
449Keep in mind that Prettier prints _some_ “unnecessary” parentheses, though:
450
451<!-- prettier-ignore -->
452```js
453var foo = (a && b) || c;
454```
455
456Example ESLint configuration:
457
458<!-- prettier-ignore -->
459```json
460{
461 "rules": {
462 "no-mixed-operators": "error"
463 }
464}
465```
466
467### [no-tabs] \(deprecated)
468
469(The following applies to [@stylistic/no-tabs] and [@stylistic/js/no-tabs] as well.)
470
471**This rule requires certain options.**
472
473This rule disallows the use of tab characters. By default the rule forbids _all_ tab characters. That can be used just fine with Prettier as long as you don’t configure Prettier to indent using tabs.
474
475Luckily, it’s possible to configure the rule so that it works regardless of whether Prettier uses spaces or tabs: Set `allowIndentationTabs` to `true`. This way Prettier takes care of your indentation, while the `no-tabs` takes care of potential tab characters anywhere else in your code.
476
477Example ESLint configuration:
478
479<!-- prettier-ignore -->
480```json
481{
482 "rules": {
483 "no-tabs": ["error", {"allowIndentationTabs": true}]
484 }
485}
486```
487
488### [no-unexpected-multiline]
489
490**This rule requires special attention when writing code.**
491
492This rule disallows confusing multiline expressions where a newline looks like it is ending a statement, but is not.
493
494For example, the rule could warn about this:
495
496<!-- prettier-ignore -->
497```js
498var hello = "world"
499[1, 2, 3].forEach(addNumber)
500```
501
502Prettier usually formats this in a way that makes it obvious that a semicolon was missing:
503
504<!-- prettier-ignore -->
505```js
506var hello = "world"[(1, 2, 3)].forEach(addNumber);
507```
508
509However, there are cases where Prettier breaks things into several lines such that the `no-unexpected-multiline` conflicts.
510
511<!-- prettier-ignore -->
512```js
513const value = text.trim().split("\n")[position].toLowerCase();
514```
515
516Prettier breaks it up into several lines, though, causing a conflict:
517
518<!-- prettier-ignore -->
519```js
520const value = text
521 .trim()
522 .split("\n")
523 [position].toLowerCase();
524```
525
526If you like this rule, it can usually be used with Prettier without problems, but occasionally you might need to either temporarily disable the rule or refactor your code.
527
528<!-- prettier-ignore -->
529```js
530const value = text
531 .trim()
532 .split("\n")
533 // eslint-disable-next-line no-unexpected-multiline
534 [position].toLowerCase();
535
536// Or:
537
538const lines = text.trim().split("\n");
539const value = lines[position].toLowerCase();
540```
541
542**Note:** If you _do_ enable this rule, you have to run ESLint and Prettier as two separate steps (and ESLint first) in order to get any value out of it. Otherwise Prettier might reformat your code in such a way that ESLint never gets a chance to report anything (as seen in the first example).
543
544Example configuration:
545
546<!-- prettier-ignore -->
547```json
548{
549 "rules": {
550 "no-unexpected-multiline": "error"
551 }
552}
553```
554
555### [quotes] \(deprecated)
556
557(The following applies to [babel/quotes], [@stylistic/quotes], [@stylistic/js/quotes], [@stylistic/ts/quotes], and [@typescript-eslint/quotes] as well.)
558
559**This rule requires certain options and certain Prettier options.**
560
561Usually, you don’t need this rule at all. But there are two cases where it could be useful:
562
563- To enforce the use of backticks rather than single or double quotes for strings.
564- To forbid backticks where regular strings could have been used.
565
566#### Enforce backticks
567
568If you’d like all strings to use backticks (never quotes), enable the `"backtick"` option.
569
570Example ESLint configuration:
571
572<!-- prettier-ignore -->
573```json
574{
575 "rules": {
576 "quotes": ["error", "backtick"]
577 }
578}
579```
580
581#### Forbid unnecessary backticks
582
583In the following example, the first array item could have been written with quotes instead of backticks.
584
585<!-- prettier-ignore -->
586```js
587const strings = [
588 `could have been a regular string`,
589 `
590 multiple
591 lines
592 `,
593 `uses ${interpolation}`,
594 String.raw`\tagged/`,
595];
596```
597
598If you’d like ESLint to enforce `` `could have been a regular string` `` being written as either `"could have been a regular string"` or `'could have been a regular string'`, you need to use some specific configuration. The `quotes` rule has two options, a string option and an object option.
599
600- The first (string) option needs to be set to `"single"` or `"double"` and be kept in sync with Prettier’s [singleQuote] option.
601- The second (object) option needs the following properties:
602 - `"avoidEscape": true` to follow Prettier’s [string formatting rules].
603 - `"allowTemplateLiterals": false` to disallow unnecessary backticks.
604
605##### Example double quote configuration
606
607ESLint:
608
609<!-- prettier-ignore -->
610```json
611{
612 "rules": {
613 "quotes": [
614 "error",
615 "double",
616 { "avoidEscape": true, "allowTemplateLiterals": false }
617 ]
618 }
619}
620```
621
622Prettier (this is the default, so adding this is not required):
623
624<!-- prettier-ignore -->
625```json
626{
627 "singleQuote": false
628}
629```
630
631##### Example single quote configuration
632
633ESLint:
634
635<!-- prettier-ignore -->
636```json
637{
638 "rules": {
639 "quotes": [
640 "error",
641 "single",
642 { "avoidEscape": true, "allowTemplateLiterals": false }
643 ]
644 }
645}
646```
647
648Prettier:
649
650<!-- prettier-ignore -->
651```json
652{
653 "singleQuote": true
654}
655```
656
657### [unicorn/template-indent]
658
659**This rule can be used with certain options.**
660
661This rule will automatically fix the indentation of multiline string templates, to keep them in alignment with the code they are found in. A configurable whitelist is used to ensure no whitespace-sensitive strings are edited.
662
663Prettier deals with:
664
665- HTML
666- CSS
667- GraphQL
668- markdown
669
670Using various tags, functions and comments.
671
672`unicorn/template-indent` by default formats some of the same tagged templates, which can cause conflicts. For example, the rule and Prettier disagree about indentation in ternaries:
673
674```js
675condition
676 ? null
677 : html`
678 <p>
679 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
680 mauris.
681 </p>
682 `;
683```
684
685If you like this rule, it can be used just fine with Prettier as long as you configure the rule to not deal with the same templates as Prettier.
686
687Example ESLint configuration:
688
689<!-- prettier-ignore -->
690```json
691{
692 "rules": {
693 "unicorn/template-indent": [
694 "error",
695 {
696 "tags": [
697 "outdent",
698 "dedent",
699 "sql",
700 "styled"
701 ],
702 "functions": [
703 "dedent",
704 "stripIndent"
705 ],
706 "selectors": [],
707 "comments": [
708 "indent"
709 ]
710 }
711 ]
712 }
713}
714```
715
716Note: If you use `"selectors"`, the CLI helper tool cannot detect if your selectors might cause conflicts.
717
718### [vue/html-self-closing]
719
720**This rule requires certain options.**
721
722This rule enforces whether elements should be self-closing or not.
723
724Prettier generally preserves the way you wrote your elements:
725
726<!-- prettier-ignore -->
727```vue
728<div />
729<div></div>
730<MyComponent />
731<MyComponent></MyComponent>
732<svg><path d="" /></svg>
733<svg><path d=""></path></svg>
734```
735
736But for known _void_ HTML elements, Prettier always uses the self-closing style. For example, `<img>` is turned into `<img />`.
737
738If you like this rule, it can be used just fine with Prettier as long as you set `html.void` to `"any"`.
739
740Example ESLint configuration:
741
742<!-- prettier-ignore -->
743```json
744{
745 "rules": {
746 "vue/html-self-closing": [
747 "error",
748 {
749 "html": {
750 "void": "any"
751 }
752 }
753 ]
754 }
755}
756```
757
758## Other rules worth mentioning
759
760These rules don’t conflict with Prettier, but have some gotchas when used with Prettier.
761
762### [no-sequences]
763
764This rule forbids using JavaScript’s confusing comma operator (sequence expressions). This piece of code is not doing what it looks like:
765
766<!-- prettier-ignore -->
767```js
768matrix[4, 7];
769```
770
771Prettier adds parentheses to the above to make it clear that a sequence expression is used:
772
773<!-- prettier-ignore -->
774```js
775matrix[(4, 7)];
776```
777
778However, the `no-sequences` rule allows comma operators if the expression sequence is explicitly wrapped in parentheses. Since Prettier automatically wraps them in parentheses, you might never see any warnings from ESLint about comma operators.
779
780Ending up with an accidental sequence expression can easily happen while refactoring. If you want ESLint to catch such mistakes, it is recommended to forbid sequence expressions entirely using [no-restricted-syntax] \([as mentioned in the `no-sequences` documentation][no-sequences-full]):
781
782<!-- prettier-ignore -->
783```json
784{
785 "rules": {
786 "no-restricted-syntax": ["error", "SequenceExpression"]
787 }
788}
789```
790
791If you still need to use the comma operator for some edge case, you can place an `// eslint-disable-next-line no-restricted-syntax` comment on the line above the expression. `no-sequences` can safely be disabled if you use the `no-restricted-syntax` approach.
792
793You can also supply a custom message if you want:
794
795<!-- prettier-ignore -->
796```json
797{
798 "rules": {
799 "no-restricted-syntax": [
800 "error",
801 {
802 "selector": "SequenceExpression",
803 "message": "The comma operator is confusing and a common mistake. Don’t use it!"
804 }
805 ]
806 }
807}
808```
809
810## Contributing
811
812See [package.json] for the exact versions of ESLint, Prettier and ESLint plugins that eslint-config-prettier has been tested with.
813
814Have new rules been added since those versions? Have we missed any rules? Is there a plugin you would like to see exclusions for? Open an issue or a pull request!
815
816If you’d like to add support for eslint-plugin-foobar, this is how you’d go about it:
817
818First, add rules to `index.js`:
819
820<!-- prettier-ignore -->
821```js
822"foobar/some-rule": "off"
823```
824
825Then, create `test-lint/foobar.js`:
826
827<!-- prettier-ignore -->
828```js
829/* eslint-disable quotes */
830"use strict";
831
832// Prettier does not want spaces before the parentheses, but
833// `plugin:foobar/recommended` wants one.
834console.log();
835```
836
837`test-lint/foobar.js` must fail when used with eslint-plugin-foobar and eslint-plugin-prettier at the same time – until eslint-config-prettier is added to the ESLint config. The file should be formatted according to Prettier, and that formatting should disagree with the plugin.
838
839Finally, you need to mention the plugin in several places:
840
841- Add eslint-plugin-foobar to the "devDependencies" field in `package.json`.
842- Make sure that at least one rule from eslint-plugin-foobar gets used in `.eslintrc.base.js` and `eslint.base.config.js`.
843- Add it to the lists of supported plugins in this `README.md`.
844
845When you’re done, run `npm test` to verify that you got it all right. It runs several other npm scripts:
846
847- `"test:prettier"` checks that Prettier has been run on all files.
848- `"test:eslint"` makes sure that the files in `test-lint/` pass ESLint when the exclusions from eslint-config-prettier are used. It also lints the code of eslint-config-prettier itself.
849- `"test:lint-verify-fail"` is run by a test in `test/lint-verify-fail.test.js`.
850- `"test:lint-rules"` is run by a test in `test/rules.test.js`.
851- `"test:jest"` runs unit tests that check a number of things:
852 - That eslint-plugin-foobar is mentioned in all the places shown above.
853 - That no unknown rules are turned off. This helps catching typos, for example.
854 - That the CLI works.
855- `"test:cli-sanity"` and `"test:cli-sanity-warning"` are sanity checks for the CLI.
856
857## License
858
859[MIT](LICENSE).
860
861[@babel/eslint-plugin]: https://github.com/babel/babel/tree/main/eslint/babel-eslint-plugin
862[@stylistic/lines-around-comment]: https://eslint.style/rules/default/lines-around-comment
863[@stylistic/js/lines-around-comment]: https://eslint.style/rules/js/lines-around-comment
864[@stylistic/ts/lines-around-comment]: https://eslint.style/rules/ts/lines-around-comment
865[@stylistic/max-len]: https://eslint.style/rules/default/max-len
866[@stylistic/js/max-len]: https://eslint.style/rules/js/max-len
867[@stylistic/no-confusing-arrow]: https://eslint.style/rules/default/no-confusing-arrow
868[@stylistic/js/no-confusing-arrow]: https://eslint.style/rules/js/no-confusing-arrow
869[@stylistic/no-mixed-operators]: https://eslint.style/rules/default/no-mixed-operators
870[@stylistic/js/no-mixed-operators]: https://eslint.style/rules/js/no-mixed-operators
871[@stylistic/no-tabs]: https://eslint.style/rules/default/no-tabs
872[@stylistic/js/no-tabs]: https://eslint.style/rules/js/no-tabs
873[@stylistic/quotes]: https://eslint.style/rules/default/quotes
874[@stylistic/js/quotes]: https://eslint.style/rules/js/quotes
875[@stylistic/ts/quotes]: https://eslint.style/rules/ts/quotes
876[@typescript-eslint/eslint-plugin]: https://github.com/typescript-eslint/typescript-eslint
877[@typescript-eslint/lines-around-comment]: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/lines-around-comment.md
878[@typescript-eslint/quotes]: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/quotes.md
879[arrow-body-style]: https://eslint.org/docs/rules/arrow-body-style
880[babel/quotes]: https://github.com/babel/eslint-plugin-babel#rules
881[curly]: https://eslint.org/docs/rules/curly
882[eslint-plugin-babel]: https://github.com/babel/eslint-plugin-babel
883[eslint-plugin-flowtype]: https://github.com/gajus/eslint-plugin-flowtype
884[eslint-plugin-prettier-autofix-issue]: https://github.com/prettier/eslint-plugin-prettier#arrow-body-style-and-prefer-arrow-callback-issue
885[eslint-plugin-prettier-recommended]: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration
886[eslint-plugin-prettier]: https://github.com/prettier/eslint-plugin-prettier
887[eslint-plugin-react]: https://github.com/yannickcr/eslint-plugin-react
888[eslint-plugin-standard]: https://github.com/xjamundx/eslint-plugin-standard
889[eslint-plugin-unicorn]: https://github.com/sindresorhus/eslint-plugin-unicorn
890[eslint-plugin-vue]: https://github.com/vuejs/eslint-plugin-vue
891[eslint.config.js (flat config)]: https://eslint.org/docs/latest/use/configure/configuration-files-new
892[eslintrc]: https://eslint.org/docs/latest/use/configure/configuration-files
893[lines-around-comment]: https://eslint.org/docs/rules/lines-around-comment
894[max-len]: https://eslint.org/docs/rules/max-len
895[multiple configuration files]: https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
896[no-confusing-arrow]: https://eslint.org/docs/rules/no-confusing-arrow
897[no-mixed-operators]: https://eslint.org/docs/rules/no-mixed-operators
898[no-restricted-syntax]: https://eslint.org/docs/rules/no-restricted-syntax
899[no-sequences-full]: https://eslint.org/docs/rules/no-sequences#when-not-to-use-it
900[no-sequences]: https://eslint.org/docs/rules/no-sequences
901[no-tabs]: https://eslint.org/docs/rules/no-tabs
902[no-unexpected-multiline]: https://eslint.org/docs/rules/no-unexpected-multiline
903[overrides]: https://eslint.org/docs/user-guide/configuring#configuration-based-on-glob-patterns
904[package.json]: https://github.com/prettier/eslint-config-prettier/blob/main/package.json
905[prefer-arrow-callback]: https://eslint.org/docs/rules/prefer-arrow-callback
906[quotes]: https://eslint.org/docs/rules/quotes
907[singlequote]: https://prettier.io/docs/en/options.html#quotes
908[string formatting rules]: https://prettier.io/docs/en/rationale.html#strings
909[unicorn/template-indent]: https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/template-indent.md
910[vue/html-self-closing]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md
911[vue/max-len]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/max-len.md