eslint-config-prettier

# eslint-config-prettier Turns off all rules that are unnecessary or might conflict with [Prettier]. This lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier. Note that this config _only_ turns rules _off,_ so it only makes sense using it together with some other config. [prettier]: https://github.com/prettier/prettier ## Installation 1. Install eslint-config-prettier: ```shell npm i -D eslint-config-prettier ``` ```shell yarn add -D eslint-config-prettier ``` ```shell pnpm add -D eslint-config-prettier ``` ```shell bun add -D eslint-config-prettier ``` 2. Add eslint-config-prettier to your ESLint configuration – either to [eslintrc] or to [eslint.config.js (flat config)]. - 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. ```json { "extends": [ "some-other-config-you-use", "prettier" ] } ``` - eslint.config.js (flat config): Import eslint-config-prettier, and put it in the configuration array – **after** other configs that you want to override. ```js import someConfig from "some-other-config-you-use"; // Note the `/flat` suffix here, the difference from default entry is that // `/flat` added `name` property to the exported object to improve // [config-inspector](https://eslint.org/blog/2024/04/eslint-config-inspector/) experience. import eslintConfigPrettier from "eslint-config-prettier/flat"; export default [ someConfig, eslintConfigPrettier, ]; ``` 3. Finally, run the [CLI helper tool](#cli-helper-tool) to find problems in the `"rules"` sections of your config. > Using [eslint-plugin-prettier]? Check out [eslint-plugin-prettier’s recommended config][eslint-plugin-prettier-recommended]. ### Plugins eslint-config-prettier not only turns off _core_ rules, but also some from these plugins automatically: - [@babel/eslint-plugin] - [@stylistic/eslint-plugin] - [@typescript-eslint/eslint-plugin] - [eslint-plugin-babel] - [eslint-plugin-flowtype] - [eslint-plugin-react] - [eslint-plugin-standard] - [eslint-plugin-unicorn] - [eslint-plugin-vue] > ℹ️ 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. #### eslint.config.js (flat config) plugin caveat With flat config, _you_ get to decide the plugin name! For example: ``` … ``` 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. Simply stick to the official plugin names and you’ll be all good. If you encounter a shared _config_ that uses a non-standard plugin name, please ask them to use the standard name instead. ### Excluding deprecated rules 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: ``` env ESLINT_CONFIG_PRETTIER_NO_DEPRECATED=true npx eslint-find-rules --deprecated index.js ``` ## CLI helper tool 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: ``` npx eslint-config-prettier path/to/main.js ``` (Change `path/to/main.js` to a file that exists in your project.) ### What and why Now, let’s have a look at what it does and why you might want to use it. This eslintrc example has a **conflicting rule** `"indent"` enabled: ```json { "extends": [ "some-other-config-you-use", "prettier" ], "rules": { "indent": "error" } } ``` 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!) This eslint.config.js (flat config) example also has a **conflicting rule** `"indent"` enabled: ```js import someConfig from "some-other-config-you-use"; import eslintConfigPrettier from "eslint-config-prettier/flat"; export default [ someConfig, eslintConfigPrettier, { rules: { indent: "error", }, }, ]; ``` 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: ```js import someConfig from "some-other-config-you-use"; import eslintConfigPrettier from "eslint-config-prettier/flat"; export default [ someConfig, { rules: { indent: "error", }, }, eslintConfigPrettier, // eslint-config-prettier last ]; ``` 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). ### Checking multiple files 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: ``` npx eslint-config-prettier index.js test/index.js legacy/main.js ``` ### Exit codes - 0: No problems found. - 1: Unexpected error. - 2: Conflicting rules found. ### ESLINT_USE_FLAT_CONFIG environment variable Just like ESLint itself, you can control the eslint-config-prettier CLI helper tool using the `ESLINT_USE_FLAT_CONFIG` environment variable: - `ESLINT_USE_FLAT_CONFIG=true`: Only use eslint.config.js (flat config). - `ESLINT_USE_FLAT_CONFIG=false`: Only use eslintrc files. - Unset or any other value: First try eslint.config.js, then eslintrc. > **Warning** > For eslint.config.js (flat config), the CLI helper tool imports `eslint/use-at-your-own-risk` which may break at any time. ### Legacy eslint-config-prettier versions before 7.0.0 had a slightly different CLI tool that was run in a different way. For example: ``` npx eslint --print-config index.js | npx eslint-config-prettier-check ``` If you find something like that in a tutorial, this is what the command looks like in 7.0.0 or later: ``` npx eslint-config-prettier index.js ``` ## Special rules There a few rules that eslint-config-prettier disables that actually can be enabled in some cases. - Some require certain options. The CLI helper tool validates this. - 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. - Some can cause problems if using [eslint-plugin-prettier] and `--fix`. For 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. ### [arrow-body-style] and [prefer-arrow-callback] **These rules might cause problems if using [eslint-plugin-prettier] and `--fix`.** See the [`arrow-body-style` and `prefer-arrow-callback` issue][eslint-plugin-prettier-autofix-issue] for details. There are a couple of ways to turn these rules off: - Put `"plugin:prettier/recommended"` in your `"extends"`. That’s [eslint-plugin-prettier’s recommended config][eslint-plugin-prettier-recommended]. - Put `"prettier/prettier"` in your `"extends"`. (Yes, there’s both a _rule_ called `"prettier/prettier"` and a _config_ called `"prettier/prettier"`.) - Remove them from your config or turn them off manually. It doesn’t matter which approach you use. `"plugin:prettier/recommended"` is probably the easiest. Note: The CLI tool only reports these as problematic if the `"prettier/prettier"` _rule_ is enabled for the same file. These 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. ### [curly] **This rule requires certain options.** If 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. If you use the `"multi-line"` or `"multi-or-nest"` option, the rule can conflict with Prettier. For example, the `"multi-line"` option allows this line: ```js if (cart.items && cart.items[0] && cart.items[0].quantity === 0) updateCart(cart); ``` However, Prettier might consider the line too long and turn it into the following, which the `"multi-line"` option does _not_ allow: ```js if (cart.items && cart.items[0] && cart.items[0].quantity === 0) updateCart(cart); ``` If 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. Example ESLint configuration: ```json { "rules": { "curly": ["error", "all"] } } ``` ### [lines-around-comment] \(deprecated) (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.) **This rule can be used with certain options.** This rule requires empty lines before and/or after comments. Prettier preserves blank lines, with two exceptions: - Several blank lines in a row are collapsed into a single blank line. This is fine. - Blank lines at the beginning and end of blocks, objects and arrays are always removed. This may lead to conflicts. By default, ESLint requires a blank line above the comment is this case: ```js if (result) { /* comment */ return result; } ``` However, Prettier removes the blank line: ```js if (result) { /* comment */ return result; } ``` If 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. Example ESLint configuration: ```json { "rules": { "lines-around-comment": [ "error", { "beforeBlockComment": true, "afterBlockComment": true, "beforeLineComment": true, "afterLineComment": true, "allowBlockStart": true, "allowBlockEnd": true, "allowObjectStart": true, "allowObjectEnd": true, "allowArrayStart": true, "allowArrayEnd": true } ] } } ``` ### [max-len] \(deprecated) (The following applies to [@stylistic/max-len], [@stylistic/js/max-len], and [vue/max-len] as well.) **This rule requires special attention when writing code.** Usually, 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. If you’d like to enforce an even stricter maximum line length policy than Prettier can provide automatically, you can enable this ru