prettier-eslint-webpack-plugin (fork)

1.1.4 verified Sat Apr 25 auth: no javascript deprecated

Fork of prettier-eslint-webpack-plugin (v1.1.4, last updated 2017) that integrates prettier-eslint formatting into Webpack 2 build pipeline as a plugin. This package is a legacy fork with no active maintenance; it runs prettier and eslint on files after compilation. Differs from alternatives by being a Webpack plugin rather than a loader or CLI tool. Dependencies include prettier, eslint, and prettier-eslint. Not recommended for new projects; use eslint-plugin-prettier or prettier-eslint-cli instead.

Common errors

error PrettierEslintPlugin is not a constructor ↓

cause Using default import where package has named export only.

fix

Use import { PrettierEslintPlugin } from 'prettier-eslint-plugin'.

error Cannot find module 'prettier-eslint' ↓

cause Missing peer dependency prettier-eslint.

fix

npm install prettier-eslint --save-dev

error Plugin only supports webpack 2 ↓

cause Fork targets Webpack 2; incompatible with Webpack 4/5.

fix

Upgrade to eslint-plugin-prettier or use a different plugin.

Warnings

deprecated This package is a legacy fork of prettier-eslint-webpack-plugin and is no longer maintained. It uses Webpack 2 API and may not work with Webpack 4/5. ↓

fix Switch to eslint-plugin-prettier or prettier-eslint-cli.

breaking Incorrect file encoding can cause malformed output; plugin writes files using the provided encoding which may not match the source. ↓

fix Ensure encoding matches your project's file encoding; test on a copy first.

gotcha The plugin reads eslintConfig as a string or object; if using fs.readFileSync, you must JSON.parse for object config. ↓

fix Use JSON.parse(config) or require the .eslintrc file directly.

gotcha Options merge with defaults; providing extensions as a string instead of array may cause unexpected behavior. ↓

fix Always pass extensions as an array, e.g., ['.js', '.jsx'].

Install

npm install prettier-eslint-plugin

yarn add prettier-eslint-plugin

pnpm add prettier-eslint-plugin

Imports

PrettierEslintPlugin

wrong

const PrettierEslintPlugin = require('prettier-eslint-plugin')

correct

import { PrettierEslintPlugin } from 'prettier-eslint-plugin'

Package is ESM. default export is not available; named export only.

PrettierEslintPlugin

const { PrettierEslintPlugin } = require('prettier-eslint-plugin')

CJS destructured require works as alternative.

prettierEslintPlugin

wrong

const prettierEslintPlugin = require('prettier-eslint-plugin')

correct

import { PrettierEslintPlugin } from 'prettier-eslint-plugin'

No default export; attempting to use require as default will yield an object.

Quickstart

Configures the PrettierEslintPlugin in a Webpack config with eslintConfig from file and custom prettier options.

import { PrettierEslintPlugin } from 'prettier-eslint-plugin';
import fs from 'fs';

const eslintConfig = fs.readFileSync('.eslintrc', 'utf-8');
const config = {
  plugins: [new PrettierEslintPlugin({
    encoding: 'utf-8',
    extensions: ['.js', '.jsx'],
    eslintConfig: JSON.parse(eslintConfig),
    logLevel: 'warn',
    prettierOptions: { singleQuote: true }
  })]
};

export default config;