prettier-eslint

What is prettier-eslint?

The prettier-eslint npm package is a tool that combines the functionality of Prettier and ESLint. It allows developers to format their code using Prettier while also applying ESLint rules to ensure code quality and consistency. This package is particularly useful for projects that require both code formatting and linting.

What are prettier-eslint's main functionalities?

Format and Lint Code

This feature allows you to format and lint your code using both Prettier and ESLint. The code sample demonstrates how to use the prettier-eslint package to format a piece of JavaScript code according to specified ESLint rules and Prettier options.

const prettierEslint = require('prettier-eslint');

const formatted = prettierEslint({
  text: 'const foo = ( ) => { console.log("hello world") }',
  eslintConfig: {
    rules: {
      semi: ['error', 'always'],
      quotes: ['error', 'single']
    }
  },
  prettierOptions: {
    singleQuote: true
  }
});

console.log(formatted);

Custom Configuration

This feature allows you to use custom configuration files for ESLint and Prettier. The code sample shows how to load ESLint and Prettier configurations from external files and apply them to format and lint the code.

const prettierEslint = require('prettier-eslint');

const formatted = prettierEslint({
  text: 'const foo = ( ) => { console.log("hello world") }',
  eslintConfig: require('./.eslintrc'),
  prettierOptions: require('./.prettierrc')
});

console.log(formatted);

Other packages similar to prettier-eslint

eslint-plugin-prettier

eslint-plugin-prettier is an ESLint plugin that integrates Prettier into your ESLint workflow. It allows you to run Prettier as an ESLint rule and report differences as individual ESLint issues. This package is useful for those who prefer to use ESLint as the single source of truth for code quality and formatting.

prettier-eslint-cli

prettier-eslint-cli is a command-line interface for prettier-eslint. It provides a convenient way to format and lint files from the command line. This package is ideal for developers who prefer using CLI tools for their workflow.

prettier

Prettier is an opinionated code formatter that supports many languages and integrates with most editors. While it does not include linting capabilities, it can be used in conjunction with ESLint to achieve similar results as prettier-eslint.

eslint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. It can be extended with plugins like eslint-plugin-prettier to include code formatting capabilities. ESLint is highly configurable and widely used for maintaining code quality.

README

prettier-eslint

Formats your JavaScript using prettier followed by eslint --fix

The problem

prettier can do some really fantastic automatic formatting. And one of the nice things about it is how opinionated it is. Unfortunately it's either not opinionated enough in some respects and other opinions differ from my own.

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: {
    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.

Inspiration

• prettier
• eslint

Other Solutions

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

Related

• prettier-eslint-atom - Atom plugin

Contributors

Thanks goes to these people (emoji key):

Kent C. Dodds 💻 📖 🚇 ⚠️

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

LICENSE

MIT