npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

prettier-eslint

v16.3.0

Published

Formats your JavaScript using prettier followed by eslint --fix

Downloads

4,456,881

Readme

prettier-eslint

Formats your JavaScript using prettier followed by eslint --fix

Build Status Code Coverage 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.

For files with an extension of .css, .less, .scss, or .json this only runs prettier since eslint cannot process those.

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
  },
  fallbackPrettierOptions: {
    singleQuote: false
  }
};

const formatted = await 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 to override eslintConfig (eslint will be used to find the relevant config for the file).

eslintConfig (?Object)

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

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.

NOTE: these options override the eslint config. If you want the fallback options to be used only in the case that the rule cannot be inferred from eslint, see "fallbackPrettierOptions" below.

fallbackPrettierOptions (?Object)

The options to pass for formatting with prettier if prettier-eslint is not able to create the options based on the the eslintConfig (whether that's provided or derived via filePath). These options will only be used in the case that the corresponding eslint rule cannot be found and the prettier option has not been manually defined in prettierOptions. If the fallback is not given, prettier-eslint will just use the default prettier value in this scenario.

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 number 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.

prettierLast (?Boolean)

By default, prettier-eslint will run prettier first, then eslint --fix. This is great if you want to use prettier, but override some of the styles you don't like using eslint --fix.

An alternative approach is to use different tools for different concerns. If you provide prettierLast: true, it will run eslint --fix first, then prettier. This allows you to use eslint to look for bugs and/or bad practices, and use prettier to enforce code style.

throws

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.

Note: format will not show any message regarding broken rules in either prettier or eslint.

Capturing ESLint messages

const {analyze} = require("prettier-eslint");

const text = 'var x = 0;';
const result = await analyze({
  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 export analyze is identical to format except that it returns a simple object with properties output giving the exact string that format would return, and messages giving the array of message descriptions (with the structure shown above) produced by the eslint analysis of the code. You may use analyze in place of format if you would like to perform the formatting but also capture any errors that eslint may notice.

Technical details

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

inferring prettierOptions via eslintConfig

The eslintConfig and prettierOptions can each be provided as an argument. If the eslintConfig is not provided, then prettier-eslint will look for them based on the fileName (if no fileName is provided then it uses process.cwd()). Once prettier-eslint has found the eslintConfig, the prettierOptions are inferred from the eslintConfig. If some of the prettierOptions have already been provided, then prettier-eslint will only infer the remaining options. This inference happens in src/utils.js.

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

Defaults if you have all of the relevant ESLint rules disabled (or have ESLint disabled entirely via /* eslint-disable */ then prettier options will fall back to the prettier 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,
}

Troubleshooting

debugging issues

There is a lot of logging available with prettier-eslint. When debugging, you can use one of the logLevels to get a better idea of what's going on. If you're using prettier-eslint-cli then you can use the --log-level trace, if you're using the Atom plugin, then you can open the developer tools and enter: process.env.LOG_LEVEL = 'trace' in the console, then run the format. You'll see a bunch of logs that should help you determine whether the problem is prettier, eslint --fix, how prettier-eslint infers your prettier options, or any number of other things. You will be asked to do this before filing issues, so please do :smile:

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

eslint-disable-line

While using // eslint-disable-line, sometimes you may get linting errors after the code has been processed by this module. That is because prettier changes this:

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

to this:

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

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 use //eslint-disable-next-line instead of // eslint-disable-line like this:

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

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):

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

LICENSE

MIT