GitHub
github.com › prettier › eslint-plugin-prettier
GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting · GitHub
Our recommended configuration automatically enables eslint-config-prettier to disable all formatting-related ESLint rules. For legacy configuration, this plugin ships with a plugin:prettier/recommended config that sets up both eslint-plugin-prettier and eslint-config-prettier in one go.
Starred by 3.6K users
Forked by 212 users
Languages JavaScript
Prettier
prettier.io › docs › integrating-with-linters
Integrating with Linters · Prettier
You end up with a lot of red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting – and not be in your face about it! They are slower than running Prettier directly. They’re yet one layer of indirection where things may break. Finally, we have tools that run prettier and then immediately lint files by running, for example, eslint --fix on them.
Why use prettier if ESLint can format?
Because Prettier generally does a better job of formatting than ESLint. This is for three reasons: It's really fast, particularly in comparison to ESLint. Prettier is designed to format documents and that's it, which means it can be a lot simpler than ESLint, at least architecturally, especially as there's relatively little in the way of plugins. So if you just need to format your code quickly in one chunk, Prettier is the way to go. Prettier is already preconfigured, so it's also usually quicker to get started with. ESLint has some default formatting rules IIRC, but relatively minimal ones. To ensure every detail is formatted the same way, you need to put a lot of effort into configuring ESLint, which most people don't really want to do. Related: Conceptually, Prettier formats holistically, which is to say, it takes a whole document and applies its formatting to every single syntax node - generally, this means that you get very close to having exactly one valid output, no matter how the input file is formatted. ESLint, on the other hand, not only requires each formatting rule to be configured individually, but also applies them generally individually, so it's easier to have cases where you can get inconsistent behaviour depending on the original formatting of the file. More on reddit.com
55
88
July 27, 2022Proper way of Installing ESlint with Prettier in a React Project
I've recently started using eslint and prettier in my projects, but I'm always not sure if I'm installing them correctly. I've read several articles online and it seems each one does it differently. I'm trying to use the Airbnb configuration. I currently do not get any errors in a basic React app, but I just want to be sure it's the correct configuration. What would be the best way to run eslint with ... More on stackoverflow.com
How to Configure ESLint, Prettier, and Flow in VS Code for React Development (x-post /r/reactnative)
This may be a little off topic, but I use Prettier with Sublime Text via the JsPrettier plugin.
Does anyone else have issues with the plugin "losing" the path to the Prettier package? Or the console not providing adequate errors when a bug is found (and Prettier hadn't run)? Often times this happens after a reboot of my computer or just ST.
I really enjoy the tool, but it's becoming more of a headache to figure out what's going wrong when I haven't changed anything relating to ST or the package itself.
More on reddit.com 1
78
June 15, 2013Reformatting your code base using prettier or eslint without destroying git history
Sounds like you’re changing the git history on master and force pushing it. Isn’t that kind of risky? Also, what happens to the existing branches that were around before you force push?
More on reddit.com 16
38
December 8, 2015Videos
Create React App with ESLint & Prettier in VSCode (2022)
35:03
ESLint with VSCode, Prettier, Husky and React For Beginners - YouTube
02:33
How to Setup and Install ESLint and Prettier to Lint Your Code ...
05:22
ESLint (and Prettier) Quickstart - Lint your javascipt code the ...
12:32
ESLint + Prettier + VS Code — The Perfect Setup - YouTube
04:00
How to Setup VS Code + Prettier + ESLint - YouTube
GitHub
github.com › prettier › eslint-config-prettier
GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier. · GitHub
Note that this config only turns rules off, so it only makes sense using it together with some other config. ... Add eslint-config-prettier to your ESLint configuration – either to eslintrc or to eslint.config.js (flat config).
Starred by 5.9K users
Forked by 262 users
Languages JavaScript
GitHub
github.com › prettier › prettier-eslint
GitHub - prettier/prettier-eslint: Code `prettier` `eslint --fix` Formatted Code :sparkles: · GitHub
eslint-plugin-prettier - ESLint plugin. While prettier-eslint uses eslint --fix to change the output of prettier, eslint-plugin-prettier keeps the prettier output as-is and integrates it with the regular ESLint workflow.
Starred by 4.1K users
Forked by 175 users
Languages TypeScript 92.9% | JavaScript 7.1%
Robin Wieruch
robinwieruch.de › prettier-eslint
How to use Prettier with ESLint - Robin Wieruch
February 14, 2022 - While the former turns off all ESLint rules that could conflict with Prettier, the latter integrates the Prettier rules into ESLint rules.
npm
npmjs.com › package › eslint-plugin-prettier
eslint-plugin-prettier - npm
January 14, 2026 - 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: ... Enable the prettier/prettier rule.
» npm install eslint-plugin-prettier
Published Jan 14, 2026
Version 5.5.5
Author Teddy Katz
Expo Documentation
docs.expo.dev › integrations › tools › using eslint and prettier
Using ESLint and Prettier - Expo Documentation
3 weeks ago - This guide provides steps to set up and configure ESLint and Prettier.
DEV Community
dev.to › rgolawski › how-to-make-eslint-and-prettier-work-together-2i5g
How to make ESLint and Prettier work together 🛠️ - DEV Community
July 8, 2024 - Fortunately, there's a simple solution to this process, and it's called eslint-plugin-prettier. Before we start, make sure you have Node.js installed on your machine. Let's start by setting up a new JavaScript project. Note that the following steps are for the demonstration purposes only - I've tried this with Next.js, Remix and Vite React ESLint configurations, and it worked well in those cases.
Medium
medium.com › @fabianterh › an-opinionated-guide-to-setting-up-prettier-with-eslint-51809b1b3043
An opinionated guide to setting up Prettier with ESLint | by Fabian Terh | Medium
September 2, 2018 - An opinionated guide to setting up Prettier with ESLint An application built with create-react-app comes with out-of-the-box support for ESLint with minimal configuration required. You might run into …
Khalil Stemmler
khalilstemmler.com › blogs › tooling › prettier
How to use Prettier with ESLint and TypeScript in VSCode | Khalil Stemmler
January 21, 2022 - In this guide, we'll explain how to use Prettier with ESLint, delegating the responsibility of code convention definition to ESLint, and the responsibility of formatting to Prettier.
Medium
medium.com › @contactmanoharbatra › eslint-and-prettier-configuration-f0259ebeb58b
Eslint and Prettier configuration | by Manohar Batra | Medium
September 10, 2025 - export default { env: { browser: true, es2021: true, }, extends: [ "eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:jsx-a11y/recommended", "plugin:import/recommended", "prettier", // if you also use Prettier ], parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: "latest", sourceType: "module", }, plugins: ["react", "react-hooks", "jsx-a11y", "import"], rules: { "react/react-in-jsx-scope": "off", // Not needed with React 17+ "react/prop-types": "off", // If using TypeScript or prefer no prop-types }, settings: { react: { version: "detect", }, }, }
npm
npmjs.com › package › eslint-config-prettier
eslint-config-prettier - npm
July 18, 2025 - Note that this config only turns rules off, so it only makes sense using it together with some other config. ... Add eslint-config-prettier to your ESLint configuration – either to eslintrc or to eslint.config.js (flat config).
» npm install eslint-config-prettier
Published Jul 18, 2025
Version 10.1.8
Author Simon Lydell
Medium
medium.com › @shawnxu0208 › how-to-use-eslint-and-prettier-together-3b66318e5cc9
How to use Eslint and Prettier together in projects like next and react | Medium
February 23, 2024 - guide on ways to work with Eslint and Prettier together in your project
Ben Ilegbodu
benmvp.com › blog › prettier-eslint
Prettier + ESLint = ❤️ | Ben Ilegbodu
November 28, 2025 - The plugin:prettier/recommended also turns on the single prettier/prettier rule that validates code format using Prettier. When developing in React, we use eslint-plugin-react for React-specific ESLint rules. There are some rules within it that also conflict with Prettier, so eslint-config-prettier provides an additional React-specific config to extend from that removes those conflicting rules.
npm
npmjs.com › package › prettier-eslint
prettier-eslint - npm
May 7, 2025 - eslint-plugin-prettier - ESLint plugin. While prettier-eslint uses eslint --fix to change the output of prettier, eslint-plugin-prettier keeps the prettier output as-is and integrates it with the regular ESLint workflow.
» npm install prettier-eslint
Published May 07, 2025
Version 16.4.2
Author Kent C. Dodds
Repository https://github.com/prettier/prettier-eslint
DEV Community
dev.to › anisriva › setting-up-eslint-and-prettier-for-consistent-code-quality-and-formatting-1ml6
Setting Up ESLint and Prettier for Consistent Code Quality and Formatting - DEV Community
October 3, 2024 - Lint your code: npx eslint . Format your code: npx prettier --write . Note : Setting up .vscode/settings.json or husky eliminates the need to do this manual step. VSCode: Automatically applies consistent formatting and linting across all machines ...
Reddit
reddit.com › r/node › why use prettier if eslint can format?
r/node on Reddit: Why use prettier if ESLint can format?
July 27, 2022 -
I've heard ESLint can format but I haven't found a clear answer why it seems prettier is used instead of the ESLint formatter. Whenever I try to look it up most comments neglect to mention that ESLint can also format so it's not obvious why prettier would be needed at all.
Top answer 1 of 21
106
Because Prettier generally does a better job of formatting than ESLint. This is for three reasons: It's really fast, particularly in comparison to ESLint. Prettier is designed to format documents and that's it, which means it can be a lot simpler than ESLint, at least architecturally, especially as there's relatively little in the way of plugins. So if you just need to format your code quickly in one chunk, Prettier is the way to go. Prettier is already preconfigured, so it's also usually quicker to get started with. ESLint has some default formatting rules IIRC, but relatively minimal ones. To ensure every detail is formatted the same way, you need to put a lot of effort into configuring ESLint, which most people don't really want to do. Related: Conceptually, Prettier formats holistically, which is to say, it takes a whole document and applies its formatting to every single syntax node - generally, this means that you get very close to having exactly one valid output, no matter how the input file is formatted. ESLint, on the other hand, not only requires each formatting rule to be configured individually, but also applies them generally individually, so it's easier to have cases where you can get inconsistent behaviour depending on the original formatting of the file.
2 of 21
11
prettier does a better job, is faster, and can format more than js
Top answer 1 of 2
5
There are a number of ways to set up prettier to work with eslint and it can be confusing.
To run prettier as an eslint rule, you would want to add a rule that allows eslint to run prettier. You do that with the eslint-plugin-prettier plugin.
"plugins": ["prettier"], // Defines a rule that allows eslint to run prettier.
"rules": {
"prettier/prettier": "error" // Turns on that rule.
}
You would also want to turn off eslint rules that may conflct with prettier. You do this with the eslint-config-prettier extension. Note this should come after any other extensions in order to override the rules as appropriate.
"extends": [
/*other extensions*/,
"prettier" // Turns off conflicting eslint rules.
]
As per their documentation, it sounds the recommended extension that comes with the prettier plugin actually takes care of everything for you, so you should be able to get away with just:
extends: [
// .. other extensions
'plugin:prettier/recommended',
]
https://github.com/prettier/eslint-plugin-prettier
Also, in case third-party plugins come with their own rules that may conflict with prettier, you used to have to add "prettier/that-plugin" - "prettier/react" in your case for instance - to the list of plugins in order to tell eslint to defer to prettier for these non-standard rules as relevant as well. But this no longer seems required.
2 of 2
1
I used this guide for setting up eslint with airbnb's style guide on a Yarn monorepo/workspace.
Josh Finnie
joshfinnie.com › blog › adding-eslint-and-prettier-to-my-blog
Adding ESLint & Prettier to My Blog | www.joshfinnie.com
December 2, 2024 - ESLint’s plugin architecture allows customization for any project. It works with frameworks like Astro and integrates with tools like Prettier. While Prettier handles formatting, ESLint focuses on code logic and structure.
freeCodeCamp
freecodecamp.org › news › integrating-prettier-with-eslint-and-stylelint-99e74fede33f
How to integrate Prettier with ESLint and stylelint
January 14, 2026 - Install prettier-eslint-cli. This is the CLI tool that’ll help you run all of your files through prettier-eslint at once. ... Install prettier-stylelint, which is a tool that formats your CSS/SCSS with Prettier followed by stylelint —-fix.