177 lines
7.2 KiB
Markdown
177 lines
7.2 KiB
Markdown
|
# eslint-plugin-prettier [![Build Status](https://github.com/prettier/eslint-plugin-prettier/workflows/CI/badge.svg?branch=master)](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.
|
|||
|
|
|||
|
## 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
|
|||
|
npm install --save-dev --save-exact prettier
|
|||
|
```
|
|||
|
|
|||
|
**_`eslint-plugin-prettier` does not install Prettier or ESLint for you._** _You must install these yourself._
|
|||
|
|
|||
|
Then, in your `.eslintrc.json`:
|
|||
|
|
|||
|
```json
|
|||
|
{
|
|||
|
"plugins": ["prettier"],
|
|||
|
"rules": {
|
|||
|
"prettier/prettier": "error"
|
|||
|
}
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
## Recommended Configuration
|
|||
|
|
|||
|
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.) You can use [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) to disable all formatting-related ESLint rules.
|
|||
|
|
|||
|
This plugin ships with a `plugin:prettier/recommended` config that sets up both the plugin and `eslint-config-prettier` in one go.
|
|||
|
|
|||
|
1. In addition to the above installation instructions, install `eslint-config-prettier`:
|
|||
|
|
|||
|
```sh
|
|||
|
npm install --save-dev eslint-config-prettier
|
|||
|
```
|
|||
|
|
|||
|
2. Then you need to add `plugin:prettier/recommended` as the _last_ extension in your `.eslintrc.json`:
|
|||
|
|
|||
|
```json
|
|||
|
{
|
|||
|
"extends": ["plugin:prettier/recommended"]
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
You can then set Prettier's own options inside a `.prettierrc` file.
|
|||
|
|
|||
|
Exactly what does `plugin:prettier/recommended` do? Well, this is what it expands to:
|
|||
|
|
|||
|
```json
|
|||
|
{
|
|||
|
"extends": ["prettier"],
|
|||
|
"plugins": ["prettier"],
|
|||
|
"rules": {
|
|||
|
"prettier/prettier": "error",
|
|||
|
"arrow-body-style": "off",
|
|||
|
"prefer-arrow-callback": "off"
|
|||
|
}
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
- `"extends": ["prettier"]` enables the config from `eslint-config-prettier`, which turns off some ESLint rules that conflict with Prettier.
|
|||
|
- `"plugins": ["prettier"]` registers this plugin.
|
|||
|
- `"prettier/prettier": "error"` turns on the rule provided by this plugin, which runs Prettier from within ESLint.
|
|||
|
- `"arrow-body-style": "off"` and `"prefer-arrow-callback": "off"` turns off two ESLint core rules that unfortunately are problematic with this plugin – see the next section.
|
|||
|
|
|||
|
## `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 they has been modified.
|
|||
|
|
|||
|
## `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.
|
|||
|
|
|||
|
```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.
|
|||
|
|
|||
|
---
|
|||
|
|
|||
|
## 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)
|