prettier-loader

prettier-loader

Prettier loader for Webpack.

---

Purpose

Prettier is one of the best tools that really help developers not to waste time on codestyle.

Listed below are some of the ways one could employ prettier in a project:

• Editor Integration

  • Pros:

    • no overhead bootstrapping code
    • autoformatting on every save

  • Cons:

    • every developer needs to setup and configure editor's plugin manually
    • teammates can have conflicting plugin settings that might override default settings in an unpredictable way. Or one could forget to install node_modules and a globally installed prettier will be used instead, which might be of older version, etc. This leads to frustrating hiccups in the workflow and, potentially, bugs.

• Pre-commit Hook

  • Pros:
    • works in the background (i.e. developer doesn't have to think about it)
    • consistent prettier settings in the project
  • Cons:
    • you can not see prettier changes on save

• Watching For Changes

  • Pros:

    • no overhead bootstrapping code

    • autoformatting on every save

    • works in the background

    • consistent prettier settings in the project

  • Cons:
    • if you already have another watcher (e.g. webpack-dev-server or watchman), you'll be wasting resources and your bundler will be triggered twice on every change: first by user, then by prettier formatting

• CLI

  • Pros:

    • no overhead bootstrapping code

  • Cons:
    • you can not see prettier changes on save
    • prone to errors unless stored somewhere (e.g. npm-scripts)

• This Webpack Loader

  • Pros:

    • autoformatting on every save (if working with webpack-dev-server)

    • works in the background

    • consistent prettier settings in the project

    • updates all the codebase when new prettier version is released

  • Cons:
    • works only on webpack-dependent projects

In short, idea is to make source code auto-prettier-fy on every save. But to do it in a cross-IDE manner. Use of webpack, eliminates the need to install and configure plugins on each developer's machine and also provides better efficency, as no other watchers are needed.

Features

• support prettier configuration files: .prettierrc, prettier.config.js, "prettier" key in your package.json file
• support of ignoring code using both comments and .prettierignore file
• override configuration files in loader options
• zero configuration of loader options for supporting all features out of the box

Requirements

• webpack >= 2
• prettier >= 1.6

Create an issue on pr, if you really need to support Webpack 1.

Installation

npm install prettier-loader prettier --save-dev

Usage

Minimal config example

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

Full config example with description

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

          // force this loader to run first if it's not first in loaders list
          enforce: 'pre',

          // avoid running prettier on all the files!
          // use it only on your source code and not on dependencies!
          exclude: /node_modules/,
          
          // additional prettier options assigned to options in
          // - .prettierrc,
          // - prettier.config.js,
          // - "prettier" property in package.json
          options: {
            trailingComma: 'es5',
            tabWidth: 4,
            
            // additional options object for resolveConfig method
            // @see https://prettier.io/docs/en/api.html#prettierresolveconfigfilepath-options
            resolveConfigOptions: {
              editorconfig: true,
              config: 'config/prettier.config.js'
            },

            // skip rewriting source file.
            // if true, only prettier the output
            skipRewritingSource: false,

            // skip prettifying file at startup.
            // if true, prettier will be triggered after the modification of a file
            ignoreInitial: false,
          },
        }
      }
    ]
  }
};

Working with HTML preprocessor

If you work with HTML preprocessor (Twig, EJS, Nunjucks, ...), you may want to process the output stream. Still you don't want the input template to be rewritten with the output. In that case, you'll need to tell the loader to keep the source file unchanged.

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.njk?$/,
        use: [
          {
            loader: 'html-loader',
          },
          {
            loader: 'prettier-loader',
            options: {
              skipRewritingSource: true,
            },
          },
          {
            loader: 'nunjucks-html-loader',
          },
        ],
      }
    ]
  }
};

Pro Tip

Install and use it only in development environment if you minimize code for production, don't do unnecessary work!

Known issue

As a loader, that is modifying source code, it has known issue with double compilation in watch mode. With current webpack API this problem can not be solved (the same problem exists in other similar projects). Webpack maintainers are not going to help with this.

Contributing

All pull requests that respect next rules are welcome:

• Before opening pull request to this repo run npm t to lint, prettify and run test on code.

• All bugfixes and features should contain tests.

License

MIT License

Copyright (c) 2017 Oleg Repin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.