{"id":16534551,"url":"https://github.com/iamolegga/prettier-loader","last_synced_at":"2025-03-15T11:33:25.593Z","repository":{"id":22028587,"uuid":"94903190","full_name":"iamolegga/prettier-loader","owner":"iamolegga","description":"prettier loader for webpack","archived":false,"fork":false,"pushed_at":"2022-12-10T04:57:33.000Z","size":980,"stargazers_count":30,"open_issues_count":30,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T07:07:24.050Z","etag":null,"topics":["loader","prettier","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamolegga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-20T14:56:28.000Z","updated_at":"2022-05-20T08:43:28.000Z","dependencies_parsed_at":"2023-01-14T00:45:19.857Z","dependency_job_id":null,"html_url":"https://github.com/iamolegga/prettier-loader","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamolegga%2Fprettier-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamolegga%2Fprettier-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamolegga%2Fprettier-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamolegga%2Fprettier-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamolegga","download_url":"https://codeload.github.com/iamolegga/prettier-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725079,"owners_count":20337660,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loader","prettier","webpack"],"created_at":"2024-10-11T18:24:31.955Z","updated_at":"2025-03-15T11:33:25.291Z","avatar_url":"https://github.com/iamolegga.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# prettier-loader\n\n[Prettier](https://github.com/prettier/prettier) loader for [Webpack](https://github.com/webpack/webpack).\n\n---\n\n[![Travis][travis-badge]][travis]\n[![Coverage Status][coveralls-badge]][coveralls]\n[![Snyk Vulnerabilities for npm package][snyk-badge]][snyk]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmcharts]\n[![Node version support][node-version]][package]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs]\n[![Code of Conduct][coc-badge]][coc]\n\n## Purpose\n\nPrettier is one of the best tools that really help developers not to waste time on codestyle.\n\nListed below are some of the ways one could employ prettier in a project:\n\n- [Editor Integration](https://prettier.io/docs/en/editors.html)\n\n  - Pros:\n    - no overhead bootstrapping code\n    - autoformatting on every save\n\n  - Cons:\n    - every developer needs to setup and configure editor's plugin manually\n    - 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.\n\n- [Pre-commit Hook](https://prettier.io/docs/en/precommit.html)\n\n  - Pros:\n    - works in the background (i.e. developer doesn't have to think about it)\n    - consistent prettier settings in the project\n  \n  - Cons:\n    - you can not see prettier changes on save\n\n- [Watching For Changes](https://prettier.io/docs/en/watching-files.html)\n\n  + Pros:\n    - no overhead bootstrapping code\n    - autoformatting on every save\n    - works in the background\n    - consistent prettier settings in the project\n  \n  - Cons:\n    - 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\n\n- [CLI](https://prettier.io/docs/en/cli.html)\n\n  + Pros:\n    - no overhead bootstrapping code\n  \n  - Cons:\n    - you can not see prettier changes on save\n    - prone to errors unless stored somewhere (e.g. npm-scripts)\n\n- [This Webpack Loader](https://www.npmjs.com/package/prettier-loader)\n\n  + Pros:\n    - autoformatting on every save (if working with webpack-dev-server)\n    - works in the background\n    - consistent prettier settings in the project\n    - updates all the codebase when new prettier version is released\n  \n  - Cons:\n    - works only on webpack-dependent projects\n\nIn 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.\n\n## Features\n\n- support [prettier configuration files](https://prettier.io/docs/en/configuration.html): `.prettierrc`, `prettier.config.js`, `\"prettier\"` key in your `package.json` file\n- support of [ignoring code](https://prettier.io/docs/en/ignore.html) using both comments and `.prettierignore` file\n- override configuration files in loader options\n- zero configuration of loader options for supporting all features out of the box\n\n## Requirements\n\n- webpack \u003e= 2\n- prettier \u003e= 1.6\n\nCreate an issue on pr, if you __really__ need to support Webpack 1.\n\n## Installation\n\n```\nnpm install prettier-loader prettier --save-dev\n```\n\n## Usage\n\n### Minimal config example\n\n```js\n// webpack.config.js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.jsx?$/,\n        use: {\n          loader: 'prettier-loader',\n          exclude: /node_modules/,\n        }\n      }\n    ]\n  }\n};\n```\n\n### Full config example with description\n\n```js\n// webpack.config.js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.jsx?$/,\n        use: {\n          loader: 'prettier-loader',\n\n          // force this loader to run first if it's not first in loaders list\n          enforce: 'pre',\n\n          // avoid running prettier on all the files!\n          // use it only on your source code and not on dependencies!\n          exclude: /node_modules/,\n          \n          // additional prettier options assigned to options in\n          // - .prettierrc,\n          // - prettier.config.js,\n          // - \"prettier\" property in package.json\n          options: {\n            trailingComma: 'es5',\n            tabWidth: 4,\n            \n            // additional options object for resolveConfig method\n            // @see https://prettier.io/docs/en/api.html#prettierresolveconfigfilepath-options\n            resolveConfigOptions: {\n              editorconfig: true,\n              config: 'config/prettier.config.js'\n            },\n\n            // skip rewriting source file.\n            // if true, only prettier the output\n            skipRewritingSource: false,\n\n            // skip prettifying file at startup.\n            // if true, prettier will be triggered after the modification of a file\n            ignoreInitial: false,\n          },\n        }\n      }\n    ]\n  }\n};\n```\n\n### Working with HTML preprocessor\n\nIf you work with HTML preprocessor (Twig, EJS, Nunjucks, ...), you may want to process the output stream.\nStill you don't want the input template to be rewritten with the output.\nIn that case, you'll need to tell the loader to keep the source file unchanged.\n\n```js\n// webpack.config.js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.njk?$/,\n        use: [\n          {\n            loader: 'html-loader',\n          },\n          {\n            loader: 'prettier-loader',\n            options: {\n              skipRewritingSource: true,\n            },\n          },\n          {\n            loader: 'nunjucks-html-loader',\n          },\n        ],\n      }\n    ]\n  }\n};\n```\n\n## Pro Tip\n\nInstall and use it only in development environment if you minimize code for production, don't do unnecessary work!\n\n## Known issue\n\nAs a loader, that is modifying source code, it has [known issue](https://github.com/iamolegga/prettier-loader/issues/1) with double compilation in watch mode. With current `webpack` API this problem can not be solved (the same problem exists in [other](https://github.com/rchaser53/awesome-prettier-loader/issues/3) [similar](https://github.com/webpack-contrib/eslint-loader/issues/303) [projects](https://github.com/hawkins/prettier-webpack-plugin/issues/2)). [Webpack maintainers are not going to help with this](https://github.com/webpack/webpack/issues/9763).\n\n## Contributing\n\nAll pull requests that respect next rules are welcome:\n\n- Before opening pull request to this repo run `npm t` to lint, prettify and run test on code.\n\n- All bugfixes and features should contain tests.\n\n## License\n\nMIT License\n\nCopyright (c) 2017 Oleg Repin\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n[travis-badge]: https://img.shields.io/travis/iamolegga/prettier-loader.svg?style=flat-square\n[travis]: https://travis-ci.org/iamolegga/prettier-loader\n[coveralls-badge]: https://img.shields.io/coveralls/github/iamolegga/prettier-loader.svg?style=flat-square\n[coveralls]: https://coveralls.io/github/iamolegga/prettier-loader?branch=master\n[snyk-badge]: https://img.shields.io/snyk/vulnerabilities/npm/prettier-loader\n[snyk]: https://snyk.io/test/github/iamolegga/prettier-loader\n[version-badge]: https://img.shields.io/npm/v/prettier-loader.svg?style=flat-square\n[package]: https://www.npmjs.com/package/prettier-loader\n[downloads-badge]: https://img.shields.io/npm/dm/prettier-loader.svg?style=flat-square\n[npmcharts]: https://npmcharts.com/compare/prettier-loader\n[node-version]: https://img.shields.io/node/v/prettier-loader.svg?style=flat-square\n[license-badge]: https://img.shields.io/npm/l/prettier-loader.svg?style=flat-square\n[license]: https://github.com/iamolegga/prettier-loader/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/iamolegga/prettier-loader/blob/master/CODE_OF_CONDUCT.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamolegga%2Fprettier-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamolegga%2Fprettier-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamolegga%2Fprettier-loader/lists"}