You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+136-30
Original file line number
Diff line number
Diff line change
@@ -10,27 +10,46 @@ Note that this config _only_ turns rules _off,_ so it only makes sense using it
10
10
11
11
## Installation
12
12
13
-
Install eslint-config-prettier:
13
+
1.Install eslint-config-prettier:
14
14
15
-
```
16
-
npm install --save-dev eslint-config-prettier
17
-
```
15
+
```
16
+
npm install --save-dev eslint-config-prettier
17
+
```
18
18
19
-
Then, 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.
19
+
2. Add eslint-config-prettier to your ESLint configuration – either to [eslintrc] or to [eslint.config.js (flat config)].
20
20
21
-
<!-- prettier-ignore -->
22
-
```json
23
-
{
24
-
"extends": [
25
-
"some-other-config-you-use",
26
-
"prettier"
27
-
]
28
-
}
29
-
```
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";
30
39
31
-
Finally, run the [CLI helper tool](#cli-helper-tool) to find problems in the `"rules"` section of your `.eslintrc.*` file. (Remember, `"rules"` always “wins” over `"extends"`!)
40
+
export default [
41
+
someConfig,
42
+
eslintConfigPrettier,
43
+
];
44
+
```
32
45
33
-
Extending `"prettier"` turns off a bunch of core ESLint rules, as well as a few rules from these plugins:
46
+
3. 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
+
52
+
eslint-config-prettier not only turns off _core_ rules, but also some from these plugins automatically:
34
53
35
54
- [@typescript-eslint/eslint-plugin]
36
55
- [@babel/eslint-plugin]
@@ -41,10 +60,43 @@ Extending `"prettier"` turns off a bunch of core ESLint rules, as well as a few
41
60
- [eslint-plugin-unicorn]
42
61
- [eslint-plugin-vue]
43
62
44
-
> 👉 Using [eslint-plugin-prettier]? Check out [eslint-plugin-prettier’s recommended config][eslint-plugin-prettier-recommended].
45
-
46
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.
47
64
65
+
#### eslint.config.js (flat config) plugin caveat
66
+
67
+
With flat config, _you_ get to decide the plugin name! For example:
68
+
69
+
```js
70
+
import typescriptEslint from "@typescript-eslint/eslint-plugin";
71
+
import eslintConfigPrettier from "eslint-config-prettier";
72
+
73
+
export 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
+
94
+
You 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
+
96
+
Simply stick to the official plugin names and you’ll be all good.
97
+
98
+
If you encounter a shared _config_ that uses a non-standard plugin name, please ask them to use the standard name instead.
99
+
48
100
### Excluding deprecated rules
49
101
50
102
Some 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:
eslint-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.
110
+
eslint-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
+
```
113
+
npx 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
+
120
+
Now, let’s have a look at what it does and why you might want to use it.
59
121
60
-
🚨 This example has a **conflicting rule**`"indent"` enabled:
122
+
🚨 This eslintrc example has a **conflicting rule**`"indent"` enabled:
61
123
62
124
<!-- prettier-ignore -->
63
125
```json
@@ -72,28 +134,69 @@ eslint-config-prettier also ships with a little CLI tool to help you check if yo
72
134
}
73
135
```
74
136
75
-
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!)
137
+
For 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!)
76
138
77
-
You can run it using `npx`:
139
+
🚨 This eslint.config.js (flat config) example also has a **conflicting rule**`"indent"` enabled:
With 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:
eslintConfigPrettier, // eslint-config-prettier last
170
+
];
81
171
```
82
172
83
-
(Change `path/to/main.js` to a file that exists in your project.)
173
+
However, 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
84
176
85
-
In 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 check:
177
+
In 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:
`test-lint/foobar.js` must fail when used with eslint-plugin-foobar and eslint-plugin-prettier at the same time – until `"prettier/foobar"` is added to the "extends" property of an ESLint config. The file should be formatted according to Prettier, and that formatting should disagree with the plugin.
770
+
`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.
668
771
669
772
Finally, you need to mention the plugin in several places:
670
773
671
774
- Add eslint-plugin-foobar to the "devDependencies" field in `package.json`.
672
-
- Make sure that at least one rule from eslint-plugin-foobar gets used in `.eslintrc.base.js`.
673
-
- Add it to the lists of supported plugins and in this `README.md`.
775
+
- Make sure that at least one rule from eslint-plugin-foobar gets used in `.eslintrc.base.js` and `eslint.base.config.js`.
776
+
- Add it to the lists of supported plugins in this `README.md`.
674
777
675
778
When you’re done, run `npm test` to verify that you got it all right. It runs several other npm scripts:
676
779
677
-
-`"test:lint"` 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, and checks that Prettier has been run on all files.
780
+
-`"test:prettier"` checks that Prettier has been run on all files.
781
+
-`"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.
678
782
-`"test:lint-verify-fail"` is run by a test in `test/lint-verify-fail.test.js`.
679
783
-`"test:lint-rules"` is run by a test in `test/rules.test.js`.
680
784
-`"test:jest"` runs unit tests that check a number of things:
@@ -703,6 +807,8 @@ When you’re done, run `npm test` to verify that you got it all right. It runs
0 commit comments