Menu
Runs Prettier as an ESLint 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 instead. Please read Integrating with linters before installing.
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 , but won't read settings from ESLint, which can lead to an inconsistent experience.
extends uses a config file which applies set of rules when you add that to the extends options. A plugin on the other hand provides you with a set of rules that you can individually apply depending on your need. Just having a plugin does not enforce any rule. You have to choose which rules you need.
ESLint and Prettier both provide an auto-fixing feature that allows them to make changes to your code whenever either one finds a fix to an error. This awesome feature can be integrated within your IDE or editor to correct and format your code whenever you save a file or paste some code.
ESLint contains many rules and those that are formatting-related might conflict with Prettier, such as arrow-parens, space-before-function-paren, etc. Hence using them together will cause some issues. The following tools have been created to use ESLint and Prettier together.
prettier-eslint |
eslint-plugin-prettier |
eslint-config-prettier |
|
|---|---|---|---|
| What it is | A JavaScript module exporting a single function. | An ESLint plugin. | An ESLint configuration. |
| What it does | Runs the code (string) through prettier then eslint --fix. The output is also a string. |
Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output. | This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb. |
| How to use it | Either calling the function in your code or via prettier-eslint-cli if you prefer the command line. |
Add it to your .eslintrc. |
Add it to your .eslintrc. |
| Is the final output Prettier compliant? | Depends on your ESLint config | Yes | Yes |
Do you need to run prettier command separately? |
No | No | Yes |
| Do you need to use anything else? | No | You may want to turn off conflicting rules using eslint-config-prettier. |
No |
It's the recommended practice to let Prettier handle formatting and ESLint for non-formatting issues, prettier-eslint is not in the same direction as that practice, hence prettier-eslint is not recommended anymore. You can use eslint-plugin-prettier and eslint-config-prettier together.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With