Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prettier/eslint-plugin-prettier
ESLint plugin for Prettier formatting
https://github.com/prettier/eslint-plugin-prettier
eslint-plugin prettier
Last synced: 3 days ago
JSON representation
ESLint plugin for Prettier formatting
- Host: GitHub
- URL: https://github.com/prettier/eslint-plugin-prettier
- Owner: prettier
- License: mit
- Created: 2017-01-26T04:09:32.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-12-01T12:54:30.000Z (11 days ago)
- Last Synced: 2024-12-07T16:37:31.450Z (5 days ago)
- Topics: eslint-plugin, prettier
- Language: JavaScript
- Homepage: https://npm.im/eslint-plugin-prettier
- Size: 748 KB
- Stars: 3,348
- Watchers: 23
- Forks: 187
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome - prettier/eslint-plugin-prettier - ESLint plugin for Prettier formatting (JavaScript)
- awesome - eslint-plugin-prettier - ESLint plugin for Prettier formatting (JavaScript)
- awesome-github-star - eslint-plugin-prettier
README
# eslint-plugin-prettier [](https://github.com/prettier/eslint-plugin-prettier/actions?query=workflow%3ACI+branch%3Amaster)
Runs [Prettier](https://github.com/prettier/prettier) as an [ESLint](https://eslint.org) rule and reports differences as individual ESLint issues.
If your desired formatting does not match Prettier’s output, you should use a different tool such as [prettier-eslint](https://github.com/prettier/prettier-eslint) instead.
Please read [Integrating with linters](https://prettier.io/docs/en/integrating-with-linters.html) before installing.
## TOC
- [Sample](#sample)
- [Installation](#installation)
- [Configuration (legacy: `.eslintrc*`)](#configuration-legacy-eslintrc)
- [Configuration (new: `eslint.config.js`)](#configuration-new-eslintconfigjs)
- [`Svelte` support](#svelte-support)
- [`arrow-body-style` and `prefer-arrow-callback` issue](#arrow-body-style-and-prefer-arrow-callback-issue)
- [Options](#options)
- [Sponsors](#sponsors)
- [Backers](#backers)
- [Contributing](#contributing)
- [Changelog](#changelog)
- [License](#license)
## Sample
```js
error: Insert `,` (prettier/prettier) at pkg/commons-atom/ActiveEditorRegistry.js:22:25:
20 | import {
21 | observeActiveEditorsDebounced,
> 22 | editorChangesDebounced
| ^
23 | } from './debounced';;
24 |
25 | import {observableFromSubscribeFunction} from '../commons-node/event';
error: Delete `;` (prettier/prettier) at pkg/commons-atom/ActiveEditorRegistry.js:23:21:
21 | observeActiveEditorsDebounced,
22 | editorChangesDebounced
> 23 | } from './debounced';;
| ^
24 |
25 | import {observableFromSubscribeFunction} from '../commons-node/event';
26 | import {cacheWhileSubscribed} from '../commons-node/observable';
2 errors found.
```
> `./node_modules/.bin/eslint --format codeframe pkg/commons-atom/ActiveEditorRegistry.js` (code from [nuclide](https://github.com/facebook/nuclide)).
## Installation
```sh
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
npm install --save-dev --save-exact prettier
```
**_`eslint-plugin-prettier` does not install Prettier or ESLint for you._** _You must install these yourself._
This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect potential bugs. If another active ESLint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors. Our recommended configuration automatically enables [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) to disable all formatting-related ESLint rules.
## Configuration (legacy: `.eslintrc*`)
For [legacy configuration](https://eslint.org/docs/latest/use/configure/configuration-files-deprecated), this plugin ships with a `plugin:prettier/recommended` config that sets up both `eslint-plugin-prettier` and [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) in one go.
Add `plugin:prettier/recommended` as the _last_ item in the extends array in your `.eslintrc*` config file, so that `eslint-config-prettier` has the opportunity to override other configs:
```json
{
"extends": ["plugin:prettier/recommended"]
}
```
This will:
- Enable the `prettier/prettier` rule.
- Disable the `arrow-body-style` and `prefer-arrow-callback` rules which are problematic with this plugin - see the below for why.
- Enable the `eslint-config-prettier` config which will turn off ESLint rules that conflict with Prettier.
## Configuration (new: `eslint.config.js`)
For [flat configuration](https://eslint.org/docs/latest/use/configure/configuration-files-new), this plugin ships with an `eslint-plugin-prettier/recommended` config that sets up both `eslint-plugin-prettier` and [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) in one go.
Import `eslint-plugin-prettier/recommended` and add it as the _last_ item in the configuration array in your `eslint.config.js` file so that `eslint-config-prettier` has the opportunity to override other configs:
```js
const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
module.exports = [
// Any other config imports go at the top
eslintPluginPrettierRecommended,
];
```
This will:
- Enable the `prettier/prettier` rule.
- Disable the `arrow-body-style` and `prefer-arrow-callback` rules which are problematic with this plugin - see the below for why.
- Enable the `eslint-config-prettier` config which will turn off ESLint rules that conflict with Prettier.
## `Svelte` support
We recommend to use [`eslint-plugin-svelte`](https://github.com/ota-meshi/eslint-plugin-svelte) instead of [`eslint-plugin-svelte3`](https://github.com/sveltejs/eslint-plugin-svelte3) because `eslint-plugin-svelte` has a correct [`eslint-svelte-parser`](https://github.com/ota-meshi/svelte-eslint-parser) instead of hacking.
When use with `eslint-plugin-svelte3`, `eslint-plugin-prettier` will just ignore the text passed by `eslint-plugin-svelte3`, because the text has been modified.
If you still decide to use `eslint-plugin-svelte3`, you'll need to run `prettier --write *.svelte` manually.
## `arrow-body-style` and `prefer-arrow-callback` issue
If you use [arrow-body-style](https://eslint.org/docs/rules/arrow-body-style) or [prefer-arrow-callback](https://eslint.org/docs/rules/prefer-arrow-callback) together with the `prettier/prettier` rule from this plugin, you can in some cases end up with invalid code due to a bug in ESLint’s autofix – see [issue #65](https://github.com/prettier/eslint-plugin-prettier/issues/65).
For this reason, it’s recommended to turn off these rules. The `plugin:prettier/recommended` config does that for you.
You _can_ still use these rules together with this plugin if you want, because the bug does not occur _all the time._ But if you do, you need to keep in mind that you might end up with invalid code, where you manually have to insert a missing closing parenthesis to get going again.
If you’re fixing large of amounts of previously unformatted code, consider temporarily disabling the `prettier/prettier` rule and running `eslint --fix` and `prettier --write` separately.
## Options
> Note: While it is possible to pass options to Prettier via your ESLint configuration file, it is not recommended because editor extensions such as `prettier-atom` and `prettier-vscode` **will** read [`.prettierrc`](https://prettier.io/docs/en/configuration.html), but **won't** read settings from ESLint, which can lead to an inconsistent experience.
- The first option:
- An object representing [options](https://prettier.io/docs/en/options.html) that will be passed into prettier. Example:
```json
{
"prettier/prettier": [
"error",
{
"singleQuote": true,
"parser": "flow"
}
]
}
```
NB: This option will merge and override any config set with `.prettierrc` files
- The second option:
- An object with the following options
- `usePrettierrc`: Enables loading of the Prettier configuration file, (default: `true`). May be useful if you are using multiple tools that conflict with each other, or do not wish to mix your ESLint settings with your Prettier configuration. And also, it is possible to run prettier without loading the prettierrc config file [via the CLI's --no-config option](https://prettier.io/docs/en/cli.html#--no-config) or through the API by [calling prettier.format() without passing through the options generated by calling resolveConfig](https://prettier.io/docs/en/api.html#prettierresolveconfigfilepath--options).
```json
{
"prettier/prettier": [
"error",
{},
{
"usePrettierrc": false
}
]
}
```
- `fileInfoOptions`: Options that are passed to [prettier.getFileInfo](https://prettier.io/docs/en/api.html#prettiergetfileinfofilepath--options) to decide whether a file needs to be formatted. Can be used for example to opt-out from ignoring files located in `node_modules` directories.
```json
{
"prettier/prettier": [
"error",
{},
{
"fileInfoOptions": {
"withNodeModules": true
}
}
]
}
```
- The rule is auto fixable -- if you run `eslint` with the `--fix` flag, your code will be formatted according to `prettier` style.
---
## Sponsors
| @prettier/plugin-eslint | eslint-config-prettier | eslint-plugin-prettier | prettier-eslint | prettier-eslint-cli |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://opencollective.com/prettier-plugin-eslint) | [](https://opencollective.com/eslint-config-prettier) | [](https://opencollective.com/rxts) | [](https://opencollective.com/prettier-eslint) | [](https://opencollective.com/prettier-eslint-cli) |
## Backers
| @prettier/plugin-eslint | eslint-config-prettier | eslint-plugin-prettier | prettier-eslint | prettier-eslint-cli |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [](https://opencollective.com/prettier-plugin-eslint) | [](https://opencollective.com/eslint-config-prettier) | [](https://opencollective.com/rxts) | [](https://opencollective.com/prettier-eslint) | [](https://opencollective.com/prettier-eslint-cli) |
## Contributing
See [CONTRIBUTING.md](https://github.com/prettier/eslint-plugin-prettier/blob/master/CONTRIBUTING.md)
## Changelog
Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
## License
[MIT](http://opensource.org/licenses/MIT)