prettier-loader

3.3.0 verified Sat Apr 25 auth: no javascript

Webpack loader that auto-formats source code with Prettier during the build process. Current stable version is 3.3.0, with ongoing maintenance. It integrates seamlessly with webpack-dev-server to format on every save, supporting Prettier configuration files and ignore directives. Unlike pre-commit hooks or CLI scripts, this loader ensures consistent formatting without additional watchers or developer setup. Requires webpack >= 2 and prettier >= 1.6.

Common errors

error Module not found: Error: Can't resolve 'prettier-loader' ↓

cause Missing installation of prettier-loader or prettier peer dependency.

fix

Run 'npm install prettier-loader prettier --save-dev'

error Error: Cannot find module 'prettier' ↓

cause Prettier peer dependency not installed.

fix

Run 'npm install prettier --save-dev'

error ValidationError: Invalid options object. Prettier Loader has been initialized using an options object that does not match the API schema. ↓

cause Invalid option name or type passed to loader options.

fix

Check the options passed to the loader; they must match Prettier's API (e.g., 'semi' not 'semicolon').

Warnings

gotcha Loader may slow down build on large codebases due to formatting overhead. ↓

fix Use exclude patterns or only apply to specific paths.

breaking Webpack 1 is not supported; version requirement changed from webpack >= 2 to webpack >= 2 (always been). ↓

fix Upgrade to webpack 2+.

gotcha Loader runs on every file match; if prettier fails, the build may break. ↓

fix Use emitErrors or emitWarnings options to control behavior.

deprecated Options like 'configFile' may be deprecated in favor of Prettier's own config resolution. ↓

fix Rely on Prettier config files or pass options directly.

Install

npm install prettier-loader

yarn add prettier-loader

pnpm add prettier-loader

Imports

prettier-loader
wrong
```
import { prettier-loader } from 'prettier-loader'
```
correct
```
import PrettierLoader from 'prettier-loader'
```
Loader is used in webpack config, not typically imported directly. Common mistake is using named import.

use in webpack config

wrong

use: 'prettier-loader' without options

correct

use: { loader: 'prettier-loader', options: {...} }

Loader must be referenced as string in webpack rules.

loader in Rule

wrong

require('prettier-loader') in config

correct

module.exports = { module: { rules: [ { test: /\.jsx?$/, use: { loader: 'prettier-loader' } } ] } }

Loader is resolved by webpack; not required directly.

Quickstart

Minimal webpack configuration to auto-format JavaScript files with Prettier using the loader.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'prettier-loader',
          options: {
            parser: 'babel',
            semi: true,
            singleQuote: true
          }
        },
        exclude: /node_modules/
      }
    ]
  }
};