Repository files navigation

Formats your JavaScript usingprettier followed byeslint --fix

Thefix feature ofeslint is pretty great and canauto-format/fix much of your code according to your ESLint config.prettier is a more powerful automatic formatter. One of the nicethings about prettier is how opinionated it is. Unfortunately, it's notopinionated enough and/or some opinions differ from my own. So after prettierformats the code, I start getting linting errors.

This formats your code viaprettier, and then passes the result of that toeslint --fix. This way you can get the benefits ofprettier's superiorformatting capabilities, but also benefit from the configuration capabilities ofeslint.

For files with an extension of.css,.less,.scss, or.json this onlyrunsprettier sinceeslint cannot process those.

This module is distributed vianpm which is bundled withnode andshould be installed as one of your project'sdevDependencies:

npm install --save-dev prettier-eslint

constformat=require('prettier-eslint');// notice, no semicolon in the original textconstsourceCode='const {foo} = bar';constoptions={text:sourceCode,eslintConfig:{parserOptions:{ecmaVersion:7,},rules:{semi:['error','never'],},},prettierOptions:{bracketSpacing:true,},fallbackPrettierOptions:{singleQuote:false,},};constformatted=awaitformat(options);// notice no semicolon in the formatted textformatted;// const { foo } = bar

The source code to format.

The path of the file being formatted can be used to overrideeslintConfig(eslint will be used to find the relevant config for the file).

The config to use for formatting with ESLint. Can be overridden withfilePath.

The options to pass for formatting withprettier. If not provided,prettier-eslint will attempt to create the options based on theeslintConfig(whether that's provided or derived viafilePath). You can also providesomeof the options and have the remaining options derived via your eslint config.This is useful for options likeparser.

NOTE: these optionsoverride the eslint config. If you want the fallbackoptions to be used only in the case that the rule cannot be inferred fromeslint, see "fallbackPrettierOptions" below.

The options to pass for formatting withprettier ifprettier-eslint is notable to create the options based on the theeslintConfig (whether that'sprovided or derived viafilePath). These options will only be used in the casethat the corresponding eslint rule cannot be found and the prettier option hasnot been manually defined inprettierOptions. If the fallback is not given,prettier-eslint will just use the defaultprettier value in this scenario.

prettier-eslint does quite a bit of logging if you want it to. Pass this toset the number of logs you want to see. Default isprocess.env.LOG_LEVEL || 'warn'.

By default,prettier-eslint will try to find the relevanteslint (andprettier) module based on thefilePath. If it cannot find one, then it willuse the version thatprettier-eslint has installed locally. If you'd like tospecify a path to theeslint module you would like to haveprettier-eslintuse, then you can provide the full path to it with theeslintPath option.

This is basically the same aseslintPath except for theprettier module.

By default,prettier-eslint will runprettier first, theneslint --fix.This is great if you want to useprettier, but override some of the styles youdon't like usingeslint --fix.

An alternative approach is to use different tools for different concerns. If youprovideprettierLast: true, it will runeslint --fix first, thenprettier.This allows you to useeslint to look for bugs and/or bad practices, and useprettier to enforce code style.

prettier-eslint willonly propagateparsing errors when eitherprettier oreslint 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.

Note:format will not show any message regarding broken rules in eitherprettier oreslint.

const{ analyze}=require('prettier-eslint');consttext='var x = 0;';constresult=awaitanalyze({  text,eslintConfig:{rules:{'no-var':'error'},},});console.log(result.messages);

produces on the console

[{  ruleId: 'no-var',  severity: 2,  message: 'Unexpected var, use let or const instead.',  line: 1,  column: 1,  nodeType: 'VariableDeclaration',  messageId: 'unexpectedVar',  endLine: 1,  endColumn: 11}]

The additional exportanalyze is identical toformat except that itreturns a simple object with propertiesoutput giving the exact stringthatformat would return, andmessages giving the array of messagedescriptions (with the structure shown above) produced by theeslintanalysis of the code. You may useanalyze in place offormat if youwould like to perform the formatting but also capture any errors thateslint may notice.

Code ➡️prettier ➡️eslint --fix ➡️ Formatted Code ✨

TheeslintConfig andprettierOptions can each be provided as an argument. IftheeslintConfig is not provided, thenprettier-eslint will look for thembased on thefileName (if nofileName is provided then it usesprocess.cwd()). Onceprettier-eslint has found theeslintConfig, theprettierOptions are inferred from theeslintConfig. If some of theprettierOptions have already been provided, thenprettier-eslint will onlyinfer the remaining options. This inference happens insrc/utils.js.

An important thing to note about this inference is that it may not supportyour specific eslint config. So you'll want to checksrc/utils.js to see howthe inference is done for each option (what rule(s) are referenced, etc.) andmake a pull request if your configuration is supported.

Defaults if you have all of the relevant ESLint rules disabled (or haveESLint disabled entirely via/* eslint-disable */ then prettier options willfall back to theprettier defaults:

{printWidth:80,tabWidth:2,singleQuote:false,trailingComma:'none',bracketSpacing:true,semi:true,useTabs:false,// prettier-eslint doesn't currently support// inferring these two (Pull Requests welcome):parser:'babylon',bracketSameLine:false,}

There is a lot of logging available withprettier-eslint. When debugging, youcan use one of thelogLevels to get a betteridea of what's going on. If you're usingprettier-eslint-cli then you can usethe--log-level trace, if you're usingthe Atom plugin, thenyou canopen the developer tools and enter:process.env.LOG_LEVEL = 'trace' in the console, then run the format. You'llsee a bunch of logs that should help you determine whether the problem isprettier,eslint --fix, howprettier-eslint infers yourprettieroptions, or any number of other things. You will be asked to do this beforefiling issues, so please do 😄

NOTE: When you're doing this, it's recommended that you only run this on asingle file because there are a LOT of logs :)

While using// eslint-disable-line, sometimes you may get linting errors afterthe code has been processed by this module. That is becauseprettier changesthis:

// prettier-ignoreif(x){// eslint-disable-line}

to this:

if(x){// eslint-disable-line}

And theeslint --fix wont change it back. You can notice that// eslint-disable-line has moved to a new line. To work around this issue, you canuse//eslint-disable-next-line instead of// eslint-disable-line like this:

// eslint-disable-next-lineif(x){}

• prettier
• eslint

None that I'm aware of. Feel free to file a PR if you know of any othersolutions.

• prettier-eslint-cli -Command Line Interface
• prettier-atom - Atom plugin (check the "ESlint integration"checkbox in settings)
• vs-code-prettier-eslint - Visual Studio Code plugin
• eslint-plugin-prettier -ESLint plugin. Whileprettier-eslint useseslint --fix to change the output ofprettier,eslint-plugin-prettier keeps theprettier output as-is and integrates it with the regular ESLint workflow.
• prettier-eslint-webpack-plugin -Prettier ESlint Webpack Plugin

Thanks goes to these people (emoji key):

Kent C. Dodds 💻📖🚇⚠️	Gyandeep Singh 👀	Igor Pnev 🐛	Benjamin Tan 💬👀	Eric McCormick 💻📖⚠️	Simon Lydell 📖	Tom McKearney 📖💡
Patrik Åkerstrand 💻	Lochlan Bunn 💻	Daniël Terwiel 🔌🔧	Robin Malfait 🔧	Michael McDermott 💻	Adam Stankiewicz 💻	Stephen John Sorensen 💻
Brian Di Palma 🐛💻	Rob Wise 📖💻	Patryk Peas 🐛💻⚠️	Thijs Koerselman 🐛💻⚠️	Enrique Caballero 🐛💻	Łukasz Moroz 🐛⚠️	Simon Fridlund 💬🐛💻📖💡🤔🚇🔌👀📢⚠️🔧✅
Oliver Joseph Ash 🐛💻	Mark Palfreeman 📖	Alex Taylor 💻⚠️	Xianming Zhong ⚠️	Lewis Liu 💻	Hamza Hamidi 💻🤔🚧🔧👀	Rajiv Ranjan Singh 💻
Igor 🚧	Rebecca Vest 💻	Chris Bobbe 🐛💻	JounQin 💬💻🎨📖🤔🚇🚧🔌📆👀⚠️🔧	Jonathan Rehm 🐛💻	Glen Whitney 💻

This project follows theall-contributors specification.Contributions of any kind welcome!

MIT