Code Monkey home page Code Monkey logo

prettier-webpack-plugin's Introduction

Prettier Webpack Plugin

Greenkeeper badge All Contributors

Automatically process your source files with Prettier when bundling via Webpack.

How it works

This plugin reads all file dependencies in your dependency graph. If a file is found with a matching extension, the file is processed by Prettier and overwritten.

You can provide options Prettier by specifying them when creating the plugin.

Looking for a loader?

It's in its early stages, but you can find a loader version of this plugin here: prettier-webpack-loader

Installation

Note, for Webpack 4 support, install prettier-webpack-plugin@1. For Webpack < 4, install prettier-webpack-plugin@0

Simply run npm install --save-dev prettier prettier-webpack-plugin or yarn add --dev prettier prettier-webpack-plugin to install.

Then, in your Webpack config files, add the lines:

var PrettierPlugin = require("prettier-webpack-plugin");

module.exports = {
  // ... config settings here ...
  plugins: [
    new PrettierPlugin()
  ],
};

Why?

Keeping style consistent between programmers new to collaboration can be tricky. Prettier tackles this problem by formatting your code to fit its preferred style, which is admittedly very pretty. Now, your code is automatically formatted when you bundle with Webpack.

Perfect for group projects bundling code on save!

Usage

The API is very simple. The constructor accepts one argument, options, a JavaScript object which you can leverage to override any default behaviors. You can specify any of Prettier's options to override any of the defaults.

For the most basic example, simple add this in your webpack.config.js:

plugins: [
  new PrettierPlugin()
],

Or, you could add options to the plugin in the form of an Object:

plugins: [
  new PrettierPlugin({
    printWidth: 80,               // Specify the length of line that the printer will wrap on.
    tabWidth: 2,                  // Specify the number of spaces per indentation-level.
    useTabs: false,               // Indent lines with tabs instead of spaces.
    semi: true,                   // Print semicolons at the ends of statements.
    encoding: 'utf-8',            // Which encoding scheme to use on files
    extensions: [ ".js", ".ts" ]  // Which file extensions to process
  })
],

Again, see Prettier's options for a complete list of options to specify for Prettier.

Note that you can specify any option for Prettier to use in this object. So, all options are assumed to be for Prettier, and will thus be passed to prettier, with the exception of three for this plugin:

  • encoding (type: String)
    • The encoding scheme to use for the file.
    • Default: utf-8
  • extensions (type: [String])
    • Which file extensions to pass.
    • Default: Either what your version of Prettier supports, or [ ".css", ".graphql", ".js", ".json", ".jsx", ".less", ".sass", ".scss", ".ts", ".tsx", ".vue", ".yaml" ]
  • configFile (type: String)
    • Optional value to supply global config file from your project in order to avoid hardcoding values in multiple places
    • Default: .prettierrc (from your current project directory)

Testing

npm run test or yarn run test will show you how tests are going currently.

These tests can also serve as primitive examples for configuring Prettier Webpack Plugin.

Contributors

Thanks goes to these wonderful people (emoji key):


Josh Hawkins

πŸ’» πŸ“– πŸ’‘ ⚠️

Erwann Mest

πŸ“–

Eduardo Sganzerla

πŸ’» πŸ“– ⚠️

rkilgore-meta

πŸ’» πŸ€” ⚠️

Jacob

πŸ€”

Jason Salzman

πŸ’» πŸ“– πŸ€” ⚠️

pastelInc

πŸ’»

Nicolas Beauvais

πŸ’»

Alejandro Sanchez

πŸ› πŸ’»

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

prettier-webpack-plugin's People

Contributors

alesanchezr avatar esganzerla avatar greenkeeper[bot] avatar greenkeeperio-bot avatar hawkins avatar jacobbuck avatar jasonsalzman avatar kud avatar nicolasbeauvais avatar pastelinc avatar rkilgore-meta avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

prettier-webpack-plugin's Issues

Crashes on syntax errors

Currently, prettier.format returns an error when invalid syntax is parsed. This crashes the plugin.

Fixing this should be as simple as adding a try-catch around that block.

It would be great if we could optionally specify a flag, such as warn: True that will use console.warn to warn the user of compilation errors too, instead of just silently failing.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Add compatibility info

I.e , which node version is required for this plugin?

It would be ideal if we could match compatibility with Webpack 2.

[BUG] Uncaught prettier error breaks the program execution instead of just returning the error as compilation stats

I'm using the Webpack's node.js compiler api to prettify and bundle some code that contains syntax errors (on purpose). Instead of getting the compilation or prettifier errors on the stats.toString() my entire programs stops running and the webpack's compiler.run callback never gets triggered.

    const compiler = webpack(webpackConfig);
    compiler.run((err, stats) => {
        //this line of code never runs
        if (err) {
            console.error(err);
            return;
        }
   
        // i should get the compilation error information here, after all its just a syntax error
        if(stats.hasErrors()) console.log("compilation errors: "+stats.toString());
        else console.log("compilation success");
    });

This is my Prettier-webpack-plugin configuration:

  plugins: [
    new PrettierPlugin({
        parser: "babylon"
    })
  ]

This is the code I'm trying to compile with errors
screen shot 2018-10-20 at 8 31 12 pm
:

This is the exception I get on the console:
screen shot 2018-10-20 at 8 14 37 pm

Deprecate or add collaborators

I hate to say this on my most popular project, but I unfortunately no longer have a use for this project personally now that I'm out of college and no longer using this in group projects.

I would like to either deprecate the project or add new collaborators to help maintain it, since I won't be putting much work into this anymore.

Maintaining this is fairly easy and offers some webpack learning opportunities - basically just update Prettier and their options, and fit Webpack's ever-evolving API, at least with regards to plugins (and optionally loaders.

I'll leave this one up for a hot minute, so if you'd like to take this project under your wing just comment below. Otherwise, I'll deprecate the project and suggest alternative methods for prettifying your code collaboratively.

Update all-contributors rc

I can't do this on the computer I'm using right now, so this is a note for me to update all contribs next time I'm on a dev machine:

pastellnc: code
nicolasbeauvais: code
alesanchezr: code, bug

Automate updating prettier

Something as simple as a greenkeeper bot would probably be enough, but we also need to make new releases and change default extensions and such when necessary. So the greenkeeper PRs are more of a "hey its time to make sure we're up to date" rather than just merge and release.

Rewrite files before Webpack bundles

Currently, the plugin rewrites files just a bit too late, so the bundler runs twice in watch mode. Once on the file changes by user, a second time when the plugin reformats the file.

It would be great if we could manage to rewrite the file before the bundler finalizes the assets, that way code is only bundled once in watch mode.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Upgrade to webpack 4

I seem to recall webpack 4 coming out with a new API for plugins, so this will be a non-trivial task but a necessary one.

Fixes #27

Build a proper test suite

I wrote the bulk of this when I should have been in a class's test study session, so I neglected proper tests.

Currently, tests utilize existing global installs of webpack, prettier; this means tests may result in different outcomes across different systems.

So, I think its best if the project move to testing via a tool like Jest.

To do this:

  • First raise package.json, README.md to the root directory from /src

Then, the test suite should:

  • Involve Webpack in some manner other than a dependency on the published module
    • Would a peerDependency be suitable? Or a test-suite specific package.json to version Webpack for the tests?
  • Utilize Webpack's programmatic API to test against some defined configurations and compare the initial sources vs modified sources

Exclude/Include Directories

Are there any options or future plans to include options to exclude files from certain directories (e.g. node_modules), or perhaps to only include files from certain directories?

Travis CI failing

Not sure why, but Travis CI tests are failing due to yarn reporting 404 for different packages each time. Seems like a bug, possibly related to updating our dependencies? Need to look into this as it makes merging/publishing dangerous, not knowing if tests are affected.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.