3 Formats your JavaScript using [`prettier`][prettier] followed by [`eslint --fix`][eslint]
5 [![Build Status][build-badge]][build]
6 [![Code Coverage][coverage-badge]][coverage]
7 [![Dependencies][dependencyci-badge]][dependencyci]
8 [![version][version-badge]][package] [![downloads][downloads-badge]][npm-stat]
9 [![MIT License][license-badge]][license]
11 [![All Contributors](https://img.shields.io/badge/all_contributors-26-orange.svg?style=flat-square)](#contributors-)
12 [![PRs Welcome][prs-badge]][prs] [![Donate][donate-badge]][donate]
13 [![Code of Conduct][coc-badge]][coc] [![Roadmap][roadmap-badge]][roadmap]
14 [![Examples][examples-badge]][examples]
16 [![Watch on GitHub][github-watch-badge]][github-watch]
17 [![Star on GitHub][github-star-badge]][github-star]
18 [![Tweet][twitter-badge]][twitter]
22 The [`fix`][fix] feature of [`eslint`][eslint] is pretty great and can
23 auto-format/fix much of your code according to your ESLint config.
24 [`prettier`][prettier] is a more powerful automatic formatter. One of the nice
25 things about prettier is how opinionated it is. Unfortunately it's not
26 opinionated enough and/or some opinions differ from my own. So after prettier
27 formats the code, I start getting linting errors.
31 This formats your code via `prettier`, and then passes the result of that to
32 `eslint --fix`. This way you can get the benefits of `prettier`'s superior
33 formatting capabilities, but also benefit from the configuration capabilities of
36 > For files with an extension of `.css`, `.less`, `.scss`, or `.json` this only
37 > runs `prettier` since `eslint` cannot process those.
41 This module is distributed via [npm][npm] which is bundled with [node][node] and
42 should be installed as one of your project's `devDependencies`:
45 npm install --save-dev prettier-eslint
53 const format = require("prettier-eslint");
55 // notice, no semicolon in the original text
56 const sourceCode = "const {foo} = bar";
65 semi: ["error", "never"]
71 fallbackPrettierOptions: {
76 const formatted = format(options);
78 // notice no semicolon in the formatted text
79 formatted; // const { foo } = bar
86 The source code to format.
88 #### filePath (?String)
90 The path of the file being formatted can be used to override `eslintConfig`
91 (eslint will be used to find the relevant config for the file).
93 #### eslintConfig (?Object)
95 The config to use for formatting with ESLint. Can be overridden with `filePath`.
97 #### prettierOptions (?Object)
99 The options to pass for formatting with `prettier`. If not provided,
100 `prettier-eslint` will attempt to create the options based on the `eslintConfig`
101 (whether that's provided or derived via `filePath`). You can also provide _some_
102 of the options and have the remaining options derived via your eslint config.
103 This is useful for options like `parser`.
105 **NOTE:** these options _override_ the eslint config. If you want fallback
106 options to be used only in the case that the rule cannot be inferred from
107 eslint, see "fallbackPrettierOptions" below.
109 #### fallbackPrettierOptions (?Object)
111 The options to pass for formatting with `prettier` if `prettier-eslint` is not
112 able to create the options based on the the `eslintConfig` (whether that's
113 provided or derived via `filePath`). These options will only be used in the case
114 that the corresponding eslint rule cannot be found and the prettier option has
115 not been manually defined in `prettierOptions`. If the fallback is not given,
116 `prettier-eslint` will just use the default `prettier` value in this scenario.
118 #### logLevel (?Enum: ['trace', 'debug', 'info', 'warn', 'error', 'silent'])
120 `prettier-eslint` does quite a bit of logging if you want it to. Pass this to
121 set the amount of logs you want to see. Default is `process.env.LOG_LEVEL || 'warn'`.
123 #### eslintPath (?String)
125 By default, `prettier-eslint` will try to find the relevant `eslint` (and
126 `prettier`) module based on the `filePath`. If it cannot find one, then it will
127 use the version that `prettier-eslint` has installed locally. If you'd like to
128 specify a path to the `eslint` module you would like to have `prettier-eslint`
129 use, then you can provide the full path to it with the `eslintPath` option.
131 #### prettierPath (?String)
133 This is basically the same as `eslintPath` except for the `prettier` module.
135 #### prettierLast (?Boolean)
137 By default, `prettier-eslint` will run `prettier` first, then `eslint --fix`.
138 This is great if you want to use `prettier`, but override some of the styles you
139 don't like using `eslint --fix`.
141 An alternative approach is to use different tools for different concerns. If you
142 provide `prettierLast: true`, it will run `eslint --fix` first, then `prettier`.
143 This allows you to use `eslint` to look for bugs and/or bad practices, and use
144 `prettier` to enforce code style.
148 `prettier-eslint` will **only** propagate _parsing_ errors when either `prettier` or `eslint` fails. In addition to propagating the errors, it will also log a specific message indicating what it was doing at the time of the failure.
150 **Note:** `prettier-eslint` will not show any message regarding broken rules in either `prettier` or `eslint`.
154 > Code ➡️ prettier ➡️ eslint --fix ➡️ Formatted Code ✨
156 ### inferring prettierOptions via eslintConfig
158 The `eslintConfig` and `prettierOptions` can each be provided as an argument. If
159 the `eslintConfig` is not provided, then `prettier-eslint` will look for them
160 based on the `fileName` (if no `fileName` is provided then it uses
161 `process.cwd()`). Once `prettier-eslint` has found the `eslintConfig`, the
162 `prettierOptions` are inferred from the `eslintConfig`. If some of the
163 `prettierOptions` have already been provided, then `prettier-eslint` will only
164 infer the remaining options. This inference happens in `src/utils.js`.
166 **An important thing to note** about this inference is that it may not support
167 your specific eslint config. So you'll want to check `src/utils.js` to see how
168 the inference is done for each option (what rule(s) are referenced, etc.) and
169 [make a pull request][prs] if your configuration is supported.
171 **Defaults** if you have all of the relevant ESLint rules disabled (or have
172 ESLint disabled entirely via `/* eslint-disable */` then prettier options will
173 fall back to the `prettier` defaults:
180 trailingComma: 'none',
181 bracketSpacing: true,
184 // prettier-eslint doesn't currently support
185 // inferring these two (Pull Requests welcome):
187 jsxBracketSameLine: false,
195 There is a lot of logging available with `prettier-eslint`. When debugging, you
197 [`logLevel`](#loglevel-enum-trace-debug-info-warn-error-silent)s to get a better
198 idea of what's going on. If you're using `prettier-eslint-cli` then you can use
199 the `--log-level trace`, if you're using [the Atom plugin][atom-plugin], then
200 you can [open the developer tools][atom-dev-tools] and enter:
201 `process.env.LOG_LEVEL = 'trace'` in the console, then run the format. You'll
202 see a bunch of logs that should help you determine whether the problem is
203 `prettier`, `eslint --fix`, how `prettier-eslint` infers your `prettier`
204 options, or any number of other things. You will be asked to do this before
205 filing issues, so please do :smile:
207 > NOTE: When you're doing this, it's recommended that you only run this on a
208 > single file because there are a LOT of logs :)
210 ### eslint-disable-line
212 While using `// eslint-disable-line`, sometimes you may get linting errors after
213 the code has been processed by this module. That is because `prettier` changes
218 if (x) { // eslint-disable-line
226 // eslint-disable-line
230 And the `eslint --fix` wont change it back. You can notice that `// eslint-disable-line` has moved to a new line. To work around this issue, you can
231 use `//eslint-disable-next-line` instead of `// eslint-disable-line` like this:
234 // eslint-disable-next-line
241 - [`prettier`][prettier]
246 None that I'm aware of. Feel free to file a PR if you know of any other
251 - [`prettier-eslint-cli`](https://github.com/prettier/prettier-eslint-cli) -
252 Command Line Interface
253 - [`prettier-atom`][atom-plugin] - Atom plugin (check the "ESlint integration"
254 checkbox in settings)
255 - [`prettier-vscode`][vscode-plugin] - Visual Studio Code plugin (set
256 `prettier.eslintIntegration: true` in settings)
257 - [`eslint-plugin-prettier`](https://github.com/not-an-aardvark/eslint-plugin-prettier) -
258 ESLint plugin. While prettier-eslint uses `eslint --fix` to change the output
259 of `prettier`, eslint-plugin-prettier keeps the `prettier` output as-is and
260 integrates it with the regular ESLint workflow.
261 - [`prettier-eslint-webpack-plugin`](https://github.com/danielterwiel/prettier-eslint-webpack-plugin) -
262 Prettier ESlint Webpack Plugin
266 Thanks goes to these people ([emoji key][emojis]):
268 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
269 <!-- prettier-ignore-start -->
270 <!-- markdownlint-disable -->
273 <td align="center"><a href="https://kentcdodds.com"><img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=kentcdodds" title="Code">💻</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=kentcdodds" title="Documentation">📖</a> <a href="#infra-kentcdodds" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=kentcdodds" title="Tests">⚠️</a></td>
274 <td align="center"><a href="http://gyandeeps.com"><img src="https://avatars.githubusercontent.com/u/5554486?v=3" width="100px;" alt="Gyandeep Singh"/><br /><sub><b>Gyandeep Singh</b></sub></a><br /><a href="#review-gyandeeps" title="Reviewed Pull Requests">👀</a></td>
275 <td align="center"><a href="https://github.com/exdeniz"><img src="https://avatars.githubusercontent.com/u/682584?v=3" width="100px;" alt="Igor Pnev"/><br /><sub><b>Igor Pnev</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/issues?q=author%3Aexdeniz" title="Bug reports">🐛</a></td>
276 <td align="center"><a href="https://demoneaux.github.io/"><img src="https://avatars.githubusercontent.com/u/813865?v=3" width="100px;" alt="Benjamin Tan"/><br /><sub><b>Benjamin Tan</b></sub></a><br /><a href="#question-demoneaux" title="Answering Questions">💬</a> <a href="#review-demoneaux" title="Reviewed Pull Requests">👀</a></td>
277 <td align="center"><a href="https://ericmccormick.io"><img src="https://avatars.githubusercontent.com/u/622118?v=3" width="100px;" alt="Eric McCormick"/><br /><sub><b>Eric McCormick</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=edm00se" title="Code">💻</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=edm00se" title="Documentation">📖</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=edm00se" title="Tests">⚠️</a></td>
278 <td align="center"><a href="https://github.com/lydell"><img src="https://avatars.githubusercontent.com/u/2142817?v=3" width="100px;" alt="Simon Lydell"/><br /><sub><b>Simon Lydell</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=lydell" title="Documentation">📖</a></td>
279 <td align="center"><a href="https://github.com/tommck"><img src="https://avatars0.githubusercontent.com/u/981957?v=3" width="100px;" alt="Tom McKearney"/><br /><sub><b>Tom McKearney</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=tommck" title="Documentation">📖</a> <a href="#example-tommck" title="Examples">💡</a></td>
282 <td align="center"><a href="https://github.com/PAkerstrand"><img src="https://avatars.githubusercontent.com/u/463105?v=3" width="100px;" alt="Patrik Åkerstrand"/><br /><sub><b>Patrik Åkerstrand</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=PAkerstrand" title="Code">💻</a></td>
283 <td align="center"><a href="https://twitter.com/loklaan"><img src="https://avatars.githubusercontent.com/u/1560301?v=3" width="100px;" alt="Lochlan Bunn"/><br /><sub><b>Lochlan Bunn</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=loklaan" title="Code">💻</a></td>
284 <td align="center"><a href="https://github.com/danielterwiel"><img src="https://avatars.githubusercontent.com/u/25886902?v=3" width="100px;" alt="Daniël Terwiel"/><br /><sub><b>Daniël Terwiel</b></sub></a><br /><a href="#plugin-danielterwiel" title="Plugin/utility libraries">🔌</a> <a href="#tool-danielterwiel" title="Tools">🔧</a></td>
285 <td align="center"><a href="https://robinmalfait.com"><img src="https://avatars1.githubusercontent.com/u/1834413?v=3" width="100px;" alt="Robin Malfait"/><br /><sub><b>Robin Malfait</b></sub></a><br /><a href="#tool-RobinMalfait" title="Tools">🔧</a></td>
286 <td align="center"><a href="http://mgmcdermott.com"><img src="https://avatars0.githubusercontent.com/u/8161781?v=3" width="100px;" alt="Michael McDermott"/><br /><sub><b>Michael McDermott</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=mgmcdermott" title="Code">💻</a></td>
287 <td align="center"><a href="http://sheerun.net"><img src="https://avatars3.githubusercontent.com/u/292365?v=3" width="100px;" alt="Adam Stankiewicz"/><br /><sub><b>Adam Stankiewicz</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=sheerun" title="Code">💻</a></td>
288 <td align="center"><a href="http://www.stephenjohnsorensen.com/"><img src="https://avatars3.githubusercontent.com/u/487068?v=3" width="100px;" alt="Stephen John Sorensen"/><br /><sub><b>Stephen John Sorensen</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=spudly" title="Code">💻</a></td>
291 <td align="center"><a href="https://github.com/briandipalma"><img src="https://avatars2.githubusercontent.com/u/1597820?v=3" width="100px;" alt="Brian Di Palma"/><br /><sub><b>Brian Di Palma</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/issues?q=author%3Abriandipalma" title="Bug reports">🐛</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=briandipalma" title="Code">💻</a></td>
292 <td align="center"><a href="https://robwise.github.io"><img src="https://avatars0.githubusercontent.com/u/6173488?v=3" width="100px;" alt="Rob Wise"/><br /><sub><b>Rob Wise</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=robwise" title="Documentation">📖</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=robwise" title="Code">💻</a></td>
293 <td align="center"><a href="https://github.com/Belir"><img src="https://avatars0.githubusercontent.com/u/4818642?v=3" width="100px;" alt="Patryk Peas"/><br /><sub><b>Patryk Peas</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/issues?q=author%3ABelir" title="Bug reports">🐛</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=Belir" title="Code">💻</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=Belir" title="Tests">⚠️</a></td>
294 <td align="center"><a href="http://vauxlab.com"><img src="https://avatars2.githubusercontent.com/u/1193520?v=3" width="100px;" alt="Thijs Koerselman"/><br /><sub><b>Thijs Koerselman</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/issues?q=author%3A0x80" title="Bug reports">🐛</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=0x80" title="Code">💻</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=0x80" title="Tests">⚠️</a></td>
295 <td align="center"><a href="https://github.com/enriquecaballero"><img src="https://avatars3.githubusercontent.com/u/7918284?v=3" width="100px;" alt="Enrique Caballero"/><br /><sub><b>Enrique Caballero</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/issues?q=author%3Aenriquecaballero" title="Bug reports">🐛</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=enriquecaballero" title="Code">💻</a></td>
296 <td align="center"><a href="https://github.com/lukaszmoroz"><img src="https://avatars2.githubusercontent.com/u/1408542?v=3" width="100px;" alt="Łukasz Moroz"/><br /><sub><b>Łukasz Moroz</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/issues?q=author%3Alukaszmoroz" title="Bug reports">🐛</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=lukaszmoroz" title="Tests">⚠️</a></td>
297 <td align="center"><a href="https://github.com/zimme"><img src="https://avatars0.githubusercontent.com/u/1215414?v=3" width="100px;" alt="Simon Fridlund"/><br /><sub><b>Simon Fridlund</b></sub></a><br /><a href="#question-zimme" title="Answering Questions">💬</a> <a href="https://github.com/prettier/prettier-eslint/issues?q=author%3Azimme" title="Bug reports">🐛</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=zimme" title="Code">💻</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=zimme" title="Documentation">📖</a> <a href="#example-zimme" title="Examples">💡</a> <a href="#ideas-zimme" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-zimme" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#plugin-zimme" title="Plugin/utility libraries">🔌</a> <a href="#review-zimme" title="Reviewed Pull Requests">👀</a> <a href="#talk-zimme" title="Talks">📢</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=zimme" title="Tests">⚠️</a> <a href="#tool-zimme" title="Tools">🔧</a> <a href="#tutorial-zimme" title="Tutorials">✅</a></td>
300 <td align="center"><a href="https://oliverjash.me/"><img src="https://avatars1.githubusercontent.com/u/921609?v=3" width="100px;" alt="Oliver Joseph Ash"/><br /><sub><b>Oliver Joseph Ash</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/issues?q=author%3AOliverJAsh" title="Bug reports">🐛</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=OliverJAsh" title="Code">💻</a></td>
301 <td align="center"><a href="http://palf.co"><img src="https://avatars1.githubusercontent.com/u/3812133?v=3" width="100px;" alt="Mark Palfreeman"/><br /><sub><b>Mark Palfreeman</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=markpalfreeman" title="Documentation">📖</a></td>
302 <td align="center"><a href="https://github.com/alexmckenley"><img src="https://avatars1.githubusercontent.com/u/3639670?v=4" width="100px;" alt="Alex Taylor"/><br /><sub><b>Alex Taylor</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=alexmckenley" title="Code">💻</a> <a href="https://github.com/prettier/prettier-eslint/commits?author=alexmckenley" title="Tests">⚠️</a></td>
303 <td align="center"><a href="https://github.com/chinesedfan"><img src="https://avatars3.githubusercontent.com/u/1736154?v=4" width="100px;" alt="Xianming Zhong"/><br /><sub><b>Xianming Zhong</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=chinesedfan" title="Tests">⚠️</a></td>
304 <td align="center"><a href="https://github.com/lewisl9029"><img src="https://avatars0.githubusercontent.com/u/6934200?v=4" width="100px;" alt="Lewis Liu"/><br /><sub><b>Lewis Liu</b></sub></a><br /><a href="https://github.com/prettier/prettier-eslint/commits?author=lewisl9029" title="Code">💻</a></td>
308 <!-- markdownlint-enable -->
309 <!-- prettier-ignore-end -->
310 <!-- ALL-CONTRIBUTORS-LIST:END -->
312 This project follows the [all-contributors][all-contributors] specification.
313 Contributions of any kind welcome!
319 [prettier]: https://github.com/jlongster/prettier
320 [eslint]: http://eslint.org/
321 [fix]: http://eslint.org/docs/user-guide/command-line-interface#fix
322 [npm]: https://www.npmjs.com/
323 [node]: https://nodejs.org
324 [build-badge]: https://img.shields.io/travis/prettier/prettier-eslint.svg?style=flat-square
325 [build]: https://travis-ci.org/prettier/prettier-eslint
326 [coverage-badge]: https://img.shields.io/codecov/c/github/prettier/prettier-eslint.svg?style=flat-square
327 [coverage]: https://codecov.io/github/prettier/prettier-eslint
328 [dependencyci-badge]: https://dependencyci.com/github/prettier/prettier-eslint/badge?style=flat-square
329 [dependencyci]: https://dependencyci.com/github/prettier/prettier-eslint
330 [version-badge]: https://img.shields.io/npm/v/prettier-eslint.svg?style=flat-square
331 [package]: https://www.npmjs.com/package/prettier-eslint
332 [downloads-badge]: https://img.shields.io/npm/dm/prettier-eslint.svg?style=flat-square
333 [npm-stat]: http://npm-stat.com/charts.html?package=prettier-eslint&from=2016-04-01
334 [license-badge]: https://img.shields.io/npm/l/prettier-eslint.svg?style=flat-square
335 [license]: https://github.com/prettier/prettier-eslint/blob/master/other/LICENSE
336 [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
337 [prs]: http://makeapullrequest.com
338 [donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
339 [donate]: https://www.paypal.me/zimme
340 [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
341 [coc]: https://github.com/prettier/prettier-eslint/blob/master/other/CODE_OF_CONDUCT.md
342 [roadmap-badge]: https://img.shields.io/badge/%F0%9F%93%94-roadmap-CD9523.svg?style=flat-square
343 [roadmap]: https://github.com/prettier/prettier-eslint/blob/master/other/ROADMAP.md
344 [examples-badge]: https://img.shields.io/badge/%F0%9F%92%A1-examples-8C8E93.svg?style=flat-square
345 [examples]: https://github.com/prettier/prettier-eslint/blob/master/other/EXAMPLES.md
346 [github-watch-badge]: https://img.shields.io/github/watchers/prettier/prettier-eslint.svg?style=social
347 [github-watch]: https://github.com/prettier/prettier-eslint/watchers
348 [github-star-badge]: https://img.shields.io/github/stars/prettier/prettier-eslint.svg?style=social
349 [github-star]: https://github.com/prettier/prettier-eslint/stargazers
350 [twitter]: https://twitter.com/intent/tweet?text=Check%20out%20prettier-eslint!%20https://github.com/prettier/prettier-eslint%20%F0%9F%91%8D
351 [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/prettier/prettier-eslint.svg?style=social
352 [emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
353 [all-contributors]: https://github.com/kentcdodds/all-contributors
354 [atom-plugin]: https://github.com/prettier/prettier-atom
355 [atom-dev-tools]: https://discuss.atom.io/t/how-to-make-developer-tools-appear/16232
356 [vscode-plugin]: https://github.com/esbenp/prettier-vscode