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

README.md

prettier-eslint

Formats your JavaScript using prettier followed by eslint --fix

Build Status Code Coverage Dependencies version downloads MIT License

All Contributors PRs Welcome Donate Code of Conduct Roadmap Examples

Watch on GitHub Star on GitHub Tweet

The problem

The fix feature of eslint is pretty great and can auto-format/fix much of your code according to your ESLint config. prettier is a more powerful automatic formatter. One of the nice things about prettier is how opinionated it is. Unfortunately it's not opinionated enough and/or some opinions differ from my own. So after prettier formats the code, I start getting linting errors.

This solution

This formats your code via prettier, and then passes the result of that to eslint --fix. This way you can get the benefits of prettier's superior formatting capabilities, but also benefit from the configuration capabilities of eslint.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev prettier-eslint

Usage

Example

const format = require('prettier-eslint')

// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar'

const options = {
  text: sourceCode,
  eslintConfig: {
    parserOptions: {
      ecmaVersion: 7,
    },
    rules: {
      semi: ['error', 'never'],
    },
  },
  prettierOptions: {
    bracketSpacing: true,
  },
}

const formatted = format(options)

// notice no semicolon in the formatted text
formatted // const { foo } = bar

options

text (String)

The source code to format.

filePath (?String)

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

eslintConfig (?Object)

The config to use for formatting with ESLint. If this is provided, then filePath is not necessary.

prettierOptions (?Object)

The options to pass for formatting with prettier. If not provided, prettier-eslint will attempt to create the options based on the eslintConfig (whether that's provided or derived via filePath). You can also provide some of the options and have the remaining options derived via your eslint config. This is useful for options like parser.

logLevel (?Enum: ['trace', 'debug', 'info', 'warn', 'error', 'silent'])

prettier-eslint does quite a bit of logging if you want it to. Pass this to set the amount of logs you want to see. Default is process.env.LOG_LEVEL || 'warn'.

eslintPath (?String)

By default, prettier-eslint will try to find the relevant eslint (and prettier) module based on the filePath. If it cannot find one, then it will use the version that prettier-eslint has installed locally. If you'd like to specify a path to the eslint module you would like to have prettier-eslint use, then you can provide the full path to it with the eslintPath option.

prettierPath (?String)

This is basically the same as eslintPath except for the prettier module.

throws

prettier-eslint will propagate errors when either prettier or eslint fails for one reason or another. In addition to propagating the errors, it will also log a specific message indicating what it was doing at the time of the failure.

Inspiration

Other Solutions

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

Related

Contributors

Thanks goes to these people (emoji key):


Kent C. Dodds

💻 📖 🚇 ⚠️

Gyandeep Singh

👀

Igor Pnev

🐛

Benjamin Tan

💬 👀

Eric McCormick

💻 📖 ⚠️

Simon Lydell

📖

Tom McKearney

📖 💡

Patrik Åkerstrand

💻

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

LICENSE

MIT